Testing CSS Flex in Hype


(Steve Warby) #1

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


(Hans-Gerd Claßen) #2

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!


(Steve Warby) #3

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


(Hans-Gerd Claßen) #4

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 …


(Jonathan Deutsch) #5

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.


#6

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


(Jonathan Deutsch) #7

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.