A bit of a newbie issue but I cant seem to figure out why I cant add 3 embedded views side by side. As you can see by my screen shot I want the red on the left and then the blue and yellow besides it one after the other. However, the blue one goes in fine but the yellow one seems to snap under neither the red instead of beside it under the blue. Am I doing something wrong?
Take a look at your breakpoints.
For example:
[
{
"name": "sm",
"span": 12,
"rowIndex": 6,
"colIndex": 0,
"order": 1
},
{
"name": "md",
"span": 12,
"rowIndex": 3,
"colIndex": 0,
"order": 1
},
{
"name": "lg",
"span": 4,
"rowIndex": 2,
"colIndex": 8,
"order": 3
}
]
That configuration will define a single embedded view that on a small screen will be 12 columns wide, on a medium screen will be 12 columns wide, and on a large screen will be 4 columns wide.
The Column container always contains 12 columns. If it can arrange all of your views on one row then it will. If a view goes past column 12 (colIndex + span > 12) then that view will wrap to the next row.
From your screen shot, redView has a span of 4, blueView has a span of 8, and yellowView has a span of 8. 4 + 8 + 8 = 20, which is greater than 12 and so they cannot all be displayed on the same row.
Ok that makes sense. Would that work the same way if I put the yellow right under the blue. Wouldn't it count it as
4 red - 8 blue
4 red - 8 yellow
since its a different column?
I want to ask a meta question - is there a specific reason you're using Column containers vs Flex or Coordinate? To me, it seems like they are one of the more complicated containers to use and their use case is pretty specific, in my opinion/experience.
One scenario where they work well is if you have a dashboard view with a set number of components that are embedded views - then you can use the Coordinate container pretty easily to get a responsive layout.
The browser has already wrapped yellowView to row=2 and it will show up below redView (which has row=1). By explicitly setting rowIndex and colIndex and perhaps some nesting you can put it there, but the column container is really about making a good-enough layout that automatically responds to changes in browser size so that it looks good on everything from a small phone to a 4k wall monitor with a minimum of developer effort. It isn't really for projects that need to be pixel-perfect on all devices (which is a fool's errand in any tool).
The Column Container is heavily influenced by Bootstrap (maybe based on Bootstrap?), so a review of the Bootstrap Grid system is a great introduction to it. Note that Bootstrap predates HTML5 and the Flex Container. For new work you might consider starting with it instead.
Yea it seems that way. I am using it since it has the ability to create multiple breakpoints for mobile, tablet and desktop browser. But I have slowly moved towards a breakpoint container. However, just wondering if there is anyway to create more then two breakpoints on it?
Breakpoint containers only allow for a single "breakpoint" to be defined. However, by nesting additional Breakpoint containers as the children of your differentiated displays, you could have any number of layouts.
Example:
Supposing you want a different layout based on mobile, tablet, or desktop layouts, you could create a View which is a Breakpoint layout, where the breakpoint specified determines "mobile" and "non-mobile" appearances. Within the non-mobile design area, place another Breakpoint Container, where the specified breakpoint could be understood as defining the difference between "tablet" and "desktop". Your View now contains three different breakpoints; one at the top-most level, and two more within the nested larger or non-mobile section.
1 Like
Ok perfect. Yes that was the exact answer I was looking for thank you.
1 Like