Testing CSS Flex in Hype

Hi guys,

I have the following working .

testFlex1WorkingInTextWidget.hype.zip (15.8 KB)

This has the CSS in the header and the divs in a text element.

I am now trying to do this ‘natively’ in Hype.

testFlex2.hype.zip (15.4 KB)

I have created a group and given the group class ‘container’

within the group are 4 boxes with class ‘box’

The CSS works but not the Flex part.

When I inspect the page it looks like Hype is adding another container so I presume this is the problem.

<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 2;"><div class="HYPE_element box" id="hype-obj-36Y0XXURIYPP8BY21AWQ" aria-flowto="hype-obj-NVZS2UKD7ET38HUITIEY" style="pointer-events: auto; position: absolute; color: rgb(0, 0, 0); padding: 8px; display: inline; font-family: Helvetica, Arial, sans-serif; font-size: 16px; word-wrap: break-word; overflow: visible; z-index: 2; width: 181px; height: 134px; top: 65px; left: 62px;">111111</div></div>

So is it possible to make the class box work with Flex.

I have tried
.HYPE_element_container .box
.HYPE_element_container box

As usual stabbing in the dark.

Cheers

Steve Warby

as you’ve already discovered those kind of css will (mostly) only work with innerHTML.
Regarding all your other questions: are you sure hype is the right programm for what you are trying to built¿
take the programm as is and you’ll get likely 100% of what it promises!

Hi Hans,

thanks for the input.

Hype is a brilliant application and I’m happy with what I am producing with it. I am not trying to re-invent the wheel with this but just looking at possibilities.

If the Flex CSS worked it means I can use just one scene for different screen sizes. It is a lot of effort to manage 3 different layouts for each scene when you need to make changes.

Plus I’m learning various concepts as I go along ( with some long hours).

I find sometimes ‘looking outside of the box’ get good results and stimulates new paths for things.

So from a knowledge point of view can you expand on ’ those kind of css will (mostly) only work with innerHTML ’ or is that another massive learning curve.

Alternatively has anyone created a method natively in Hype that can 'tile & fill ’ various elements as move them around to suit the different screen sizes.

Cheers

Steve Warby

the only way within hype is to use its javascript api to set positions and width/height …

simply means that the innerHTML of an hypeelement will play with ‘normal’ html-css-rules …

FWIW, we considered flexbox as a possible way to do flexible layout with Hype. At the time, browser support was extremely poor and there were no good ways for unsupported browsers to use this layout mechanism. I also personally felt flexbox would have been very difficult to design a good UI for, and also generally conflicts with the fact that Hype’s element positioning is absolute in nature. This is what led us to the current model for Flexible Layouts.

I don’t think it’d be easy to mix/match Hype elements with flexbox due to Hype wanting to position everything absolutely and also using containers for each element.

Hi there, first post for me in the forum, but i’ve been learning a lot here !

I was trying to “flexbox” clickable elements that could trigger a hype function, so here i’m using css in the innerHTML and found a way to call a hype function from this divs.

In my example I use a @media in the css, just to adapt to the browser and see how the flexboxes react. Hope it’s helpfull

letsTryFlexBoxes.zip (24.7 KB)

ps : for me, and if I understand correctly, the main thing with the Hype Flexible Layouts method is that you need to give different id’s to the same thing depending on the layout, so if I have a text box, and I want to update it’s content using js, if I have 3 layouts, I have to update those 3 text boxes

2 Likes

Pretty cool integration of flexbox and Hype’s flexible layout.

Instead of giving distinct IDs, I would instead give class names (also available in the Identity Inspector) and then you can set all items with that class name.

1 Like