Bug 1160307

*** Bug 1149488 has been marked as a duplicate of this bug. ***

May be improved when using Bootstrap grids.

Created attachment 953649 [details]
screen-cast: resizing ovirt login page (PatternFly)

Greg: I think that there is already some behavior that dynamically controls fields' width as well as distance between a field and its label, as seen in attachment 953649 [details] (I am not sure if the fields' labels are actually somehow associated with the field widgets themselves or not); so when applying PatternFly and changing fields within dialogs to be PatternFly fields - shouldn't we expect the same behavior? [BTW - not sure if Bootstrap grids are in use in this page or not].

Just note that the label should be re-sized automatically rather than the text-box. Doesn't seem like the login screen currently support it, changing languages doesn't affect label's width. I.e. the width is predefined to accommodate longest value (similar to the widgets in the dialogs).

Yes, login page uses the bootstrap grid.

The form is configured like so:

<div class="col-sm-7 col-md-6 col-lg-5 ...">

This means, roughly: "take up 7 columns when the screen is small. Take up 6 columns when the screen is medium. Take up 5 columns when the screen is large."

When you resize the page to transition from "medium" to "large", so see the snapping-to-grid happen.

I think I disagree with the proposal of this BZ. I think that labels and widgets should snap to the grid. That way, labels will all be left-aligned, and widgets will all be left-aligned in the next column over.

We probably have some big-idea form design to do.

Created attachment 953865 [details]
Import VM dialog - English vs. Spanish

I believe that we would want to avoid situations like the one depicted in attachment 953865 [details] in the English section - there is just too much space between the field-label and the field itself when displaying this particular dialog in English. would you agree?
[in that sense, I think that Daniel's solution suggestion is a valid one]

If indeed we all agree that there is a problem here: I am trying to find out whether using Bootstrap grids will resolve this situation or not; IIUC: if each column (within the Bootstrap grid) will have a 'static' width, we will probably remain with the same issue. 

any additional thoughts/suggestions? anything that I am missing?

Bootstrap grids will not resolve that situation. They will perpetuate it, in fact. Positions will still be static, set to X number of columns by the developer.

It's really no different than if we said something like: all form elements can only be 20, 40, 60, 80, or 100px wide, and they must all start at either 0, 20, 40, 60, or 80px from the left. Currently we're all over the place (e.g. 238px for form fields) -- grids just add known, predictable numbers.

This is a UXD issue, and something we should study and design.

I find columns, predictable positioning, etc. pleasing to the eye. A common solution to this space-between problem is to right-align the labels. Another solution would be to wrap the labels. IMHO letting the forms flow dynamically creates unpredictability and eventually a mess -- and I do think they are pretty messy at the moment. Free-flow also makes it very difficult for mobile devices and other small screens.

(I believe the term "responsive design" in the title of the BZ is misused. Responsive design means adapting to different devices and screen sizes. This should be titled something like "support free-flowing form layout". I hope you don't mind if I change it.)

all valid points. thanks, Greg.

was not touched for ~180 days, but still relevant (post 3.6) - especially once dialogs will adopt the PatternFly styling.

Closing, as we've decided to implement Bootstrap grids wherever possible.