I’m probably just using them wrong, but when is it appropriate to use flex and coordinate views with an interface that will be used for both mobile and desktop? I have weird issues where the flex views stretch and such with no way to size them in the designer. Is this just how it’s displayed in the designer and will look fine in practice?Thx, Jake
Take a peek at the docs site for general info on how to use them:
Flex Container
Coordinate Container
There are videos for each to help you get the layout you’re after.
I read through those but they seem a little generic, think the last post I had you answered steered me to a usable solution.Thx,jake
The only time I find myself using a Coordinate container is when I need to layer components over one another (I have a Map component with a special UI overlay in a View), but even then I use the percent mode.
I use a Breakpoint container if I know I want completely different components available between a mobile user or a desktop user.
I use Column Containers If I want to use the EXACT same components between mobile and desktop but I want them in different spots.
I use Flex containers for EVERYTHING else, which is actually a majority of the time. I recommend Flex containers (along with nesting coordinate containers or additional Flex containers to manage flow) be used often.
I don’t use Tab Containers very often, but use them if… you need tabs.
2 Likes
When you say you use column containers, you just line them us side by side and let them wrap? I’ve noticed that there’s a lot of extra space around some of my views and the flex container makes it impossible to remove that blank space, I’m probably use it wrong, but how do I fix that kind of stuff?Thx, Jake
I also found its best to use flex containers for everything I can basically, only use others if there’s a really good reason to.
No, the Column Container has breakpoints (small, medium, large) where you define the width for each breakpoint. Adding a component to a Column container places that component for all three breakpoints, but you determine where in each breakpoint the component goes, and how wide it should be.
This allows me to set up a View which will look vastly different whether used on a phone, tablet, or desktop. To switch between the breakpoints, select the root node of the View (not the named View node, but the root node), and adjust the width until it falls within the breakpoints you have defined.
Where are those breakpoints defined?Thx,jake
There are two locations within which you can adjust the breakpoints:
-
Within the Property Editor at
ColumnContainer.props.breakpoints[x].minWidth
-
If you deep-select the Column Container by double-clicking it (or by right-clicking the Column Container in the Project Browser and selecting "Deep-Select"), then the breakpoint values actually get their own portion of the Property Editor at the top:
2 Likes
I’ve recently gotten into using flex containers for basically everything but I want to know if I’m going about it the right way. When I’m using a flex container for more complicated layouts, more than a single row or column, the way I do it consists of several flex containers nested in flex containers nested in etc…
e.g.
Flex 0-1
Flex 1-1
Flex 1-1-1
Flex 1-1-2
Flex 1-2
Flex 1-2-1
Flex 1-3
Flex 1-3-1
Flex 1-3-2
This works for me but is there a better way or more elegant way?
Thanks
This has been my approach, yes. I usually have my root container as a Flex in column mode, and then I make “rows” where each row is a new Flex container in row mode. There’s not really a more elegant way, although I do highly recommend naming your containers to specify their purpose. This makes it much easier when you’re trying to set up a binding or if you need to drill down for a property reference.
1 Like
Yeah I figured that’s how it would be, just wanted to make sure I wasn’t missing anything. Not saying this way isn’t elegant. All glory to the flex container. And yeah I was just using a generic example.
Thanks!