v8.0.2
I’ve only just started trying to use the Column Layout for a View, so it might just be that I don’t know what I’m doing…
However, I’ve stumbled into a few hurdles. For context, I just have a number of labels on the View that I’m rearranging for each breakpoint.
-
The heights of the labels cannot be changed for each breakpoint.
For the thinnest breakpoint, I want the labels stacked, but I want the small font labels to be shorter in height. However, for the widest breakpoint, I want the labels to be all on the same row, so they should all be the same height so the font bottoms are aligned.
-
The font alignment can’t be modified between breakpoints, meaning you can make the view look good for one breakpoint, but not for any of the others.
-
Can’t find any controls to set the component alignment on the row. E.g. for widest, I want all labels aligned to the bottom of the top row. At the moment, they’re all top-aligned, so if I have different height labels, it’s a roller-coaster of up-downs between labels.
-
there needs to be a row vertical Alignment so that shorter objects can be moved to the middle/bottom of the row. See Large screenshot where label bounding boxes are aligned to the top of the row.
Small
Medium
Large
-
Breakpoints determine only the position (row:column:span) of a component. See below
-
See below.
-
The problem is not that you can’t find it, the problem is that there is no such setting. See explanation below.
-
As for row vertical alignment, you should NEVER have more than one row within a row. Make additional rows and position as needed within those.
Eventually, when we provide visibility into Viewport dimensions, you’ll be able to accomplish the “width-dependent height definition” paradigm you’re looking to use. The column and Breakpoint containers are intended to be used to determine relative positioning of components based on current viewport width. An oversight during initial development was how important the viewport width was to the style and/or appearance of a component. We are not currently tackling exposing viewport dimensions to users, though the idea has been posted in the ideas/requests forum.
The reason I’m directing you to that post and not opening a feature request for visibility into currently-in-use breakpoint is because binding to or against a breakpoint is extremely dangerous and can easily lead to infinite loops which even the Designer would be near powerless to prevent. Suppose you had modified the width of the container based on the active breakpoint - now your breakpoint is changing, only to be re-evaluated and now you’ve entered a loop.
1 Like
Thanks for the explanation. I don’t have time to reply properly now, but just to explain 4. By vertical alignment, have a look at my screenshot for Large. All of the labels in the row are all top aligned, and they all have different heights. You want text aligned at the bottom, not the top. I’m not saying that would make it look great still, but it would make it look slightly better than it does at the moment.
Ah, but a property of that sort would assume each component has some sort of alignment. row.verticalAlign doesn’t make much sense for a Cylindrical Tank. You should be able to alleviate this concern by applying styles to the Labels, something like col_top_row which sets textAlign to “bottom”. It would be overridden by anything you set locally on the component, but if you’re fighting between locally assigned textAlign and textAlign from a style and you still can’t get what you want then you need to ask yourself if you’re designing the view in the right way.
No no, I’m talking about the component box alignment, not text alignment. The actual component bounds are being aligned to the top of the row. This would apply equally to any kind of component. Perhaps I’m not getting the terms correct, but replace the label components with rectangles of different heights; the rectangles would all be pushed so that their top edge touch the top edge of the row bound.
Excuse the poor lines, I’m on my phone, but the orange lines show the bottom bounding boxes of the labels, and the purple line show the bottom bound of the row. I’d like the oranges all to be on the purple line.
Edit: also it looks like my 3 and 4 points are actually the same (I wrote the post and then left it a few hours and came back to finish it)
