I am testing out maker edition for my home automation projects. My design works great on desktop, not so great at mobile. I am using flex containers within flex containers to get the layout the way I want it.
I get that flex isnt the right container, but I dont get which I should use to make the left menu dissapear on small screens and content to appear under other content on smaller screens, and side by side on bigger screens.
Can anyone please help me in the right direction in order to choose container, and how to put this together? Would be very appreciated. Thanks.
Flex's are good for your contents if you set the outermost flex to wrap.
You need to use docked Views for the north and east menus. I suggest you have a look at the sample project you can install when you first install ignition
Thanks! I get the menu to work, but not sure about the contents. In the view Test i have 3 flex containers in different colors to test, the blue one is set to wrap.
Thanks, not sure how to use style.gap, or any CSS for that matter in ignition...
Anyways, this is my current design with margins, which is made up of flex container, inside flex container, inside flex container etc.. Tried to set the outer flex to wrap, but on smaller screens it crashes and look terrible.
What are your position prop values on the flex container that your content containers are in? It looks like grow and shrink might be set to 0 with a fixed basis
Can you post the json of your view? Shift right click on the view and down the bottom, copy json. Make sure to paste in here using the preformatted text </> button.
You may want to use calculated font sizes for your text as well
Have a play with changing the 0.8 in here and setting this to the text font size
calc(0.8* (1.0*vmin + 1.0*vmax))
This will size the font based on the width/height of the client viewport. You can also use clamp(8pt, calc(...), 16pt) to clamp the min and max sizes
I would recommend creating perspective styles to create standards for your font sizes. P styles are applied in styles.classes props
I think in the flex repeater it's the props.elementStyle you want to add the gap prop to. For example
homeview_nm.zip (35.3 KB)
It's not perfect, but see if this is more like what you're after.
A couple general comments:
you should use Perspective styles for all of your common style configurations across components, like the "tilsett" containers. Either that, or use a template View for this component.
I've converted most of your margins and paddings to use gap instead. Some margins/paddings were still needed though
The 3 contents in the top row are good candidates for a single template View
Hello, and sorry for my late reply. Your solution worked out great, thank you so much. There is one thing i would like to change if possible, and that is the scoll bar. Is it possible to remove scrollbar and adjust the height of the components to the screen height when using a desktop? And when using mobile phone or any other smaller screen, the scollbar can be used.
