Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add display:table-row-group class to manage width of floated form controls #19839

Closed
thgreasi opened this Issue May 4, 2016 · 16 comments

Comments

Projects
None yet
5 participants
@thgreasi
Copy link

thgreasi commented May 4, 2016

Hi there.
I'm facing an inconsistency issue (between Firefox and Chrome) when using floats on a multi-line "form" that contains input-groups, as demonstrated here.
image

A workaround that I ended-up was to wrap every input-group with a form-inline, but obviously this doesn't have exactly the same result.
image

After some hours of searching and since I couldn't find something relevant (sorry if this ends up to be a duplicate), I decided to report this here and get an official suggested way to approach this use case (which would hopefully be useful to others as well).

Tested with Bootstrap v3.3.6 on Firefox 48.0a2 and Chrome 49.

@thgreasi

This comment has been minimized.

Copy link
Author

thgreasi commented May 4, 2016

Updated example http://jsfiddle.net/chvg8v9z/31/
Updated workaround http://jsfiddle.net/chvg8v9z/32/
Also updated initial issue urls.

@RyanZim

This comment has been minimized.

Copy link

RyanZim commented May 4, 2016

Did a little cross browser testing; IE, Safari, and Opera behave the same as Chrome. Firefox is the only one that does not display .input-group with width: 100%;.

Here is a slightly simplified JSFiddle: http://jsfiddle.net/ms74k5zf/2/.

Not sure if this is a browser bug or what. 😕

Tested on Windows 7, Firefox 45.0.2.

@cvrebert cvrebert changed the title Firefox-Chrome inconsistency on floated input-groups Firefox doesn't display floated .input-group as width:100%; May 8, 2016

@mdo mdo modified the milestone: v3.3.7 May 8, 2016

@Seika85

This comment has been minimized.

Copy link

Seika85 commented May 10, 2016

The problem is the styling as a table in the input-group and its children.
As a workaround for now, I'd suggest wrapping all input-groups into one .input-group-wrapper and give it display: table-row-group.

http://jsfiddle.net/ms74k5zf/3/

I tested it in IE11, FF46 and Chrome 50. It looked exactly the same.

@RyanZim

This comment has been minimized.

Copy link

RyanZim commented May 10, 2016

@Seika85 Your workaround doesn't work for me.

@cvrebert Did you file a bug with Firefox?

@thgreasi

This comment has been minimized.

Copy link
Author

thgreasi commented May 10, 2016

I can confirm that it works consistently on Firefox 47 and Chrome 50 on Android. The floated container takes only the width required to be rendered (not 100%).
How will this be handled in future versions of bootstrap? Will the input-group-wrapper class be added?
Is this a bug in Firefox or in the rest browsers (since it worked the same in Firefox before and after adding the extra wrapper)?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented May 11, 2016

Majority rules (basically), so prima facie, I assume this is a Firefox bug. Will try to file a bug report tomorrow.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 3, 2016

@cvrebert cvrebert added the confirmed label Jun 3, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 3, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 3, 2016

Anyway, the 2nd element floats reasonably in non-Firefox browser if you set an explicit width on the input-groups or the .pull-left <div> (and there might be further possibilities).

@thgreasi Would us adding docs about the need to set explicit widths in cases like this satisfy you sufficiently?

cvrebert added a commit that referenced this issue Jun 3, 2016

cvrebert added a commit that referenced this issue Jun 3, 2016

Port #20026 to v3
Add Wall of Browser Bugs entry for #19839 (#20026)

See https://bugzilla.mozilla.org/show_bug.cgi?id=1277782
Refs #19839

[skip sauce]
@thgreasi

This comment has been minimized.

Copy link
Author

thgreasi commented Jun 3, 2016

To be honest, I personally prefer the .input-group-wrapper since I need the dynamic minimum size that floats offer (and that was exactly my use case).
In my mind a floated element should behave the same no matter what it contains and that's why I thought that Firefox rendered it correctly.

On the other hand, I acknowledged that adding an extra class just for this case might be too much and that for other use cases a (min/max-)width should be enough. So, how about adding a note in the docs about the width and also link the solution posted in this issue?

@cvrebert cvrebert removed the awaiting reply label Jun 3, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 3, 2016

(Ignore the stupid question from my deleted comment)
@thgreasi Would you be able to share what your specific, real-world form was that required such a layout?

@thgreasi

This comment has been minimized.

Copy link
Author

thgreasi commented Jun 3, 2016

This happened to me after migrating to bootstrap 3.
I had a floated form with some inputs and some of them had some floated action buttons right next to them, just as shown in the issue description. After combining the buttons with the inputs, the floated form went 100% width in non-firefox browsers.
The same happened when I migrated other floated input-button pairs, for example some search inputs that were placed above <table>s.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 4, 2016

@thgreasi I meant, like, what are your actual form fields? Surely your actual production-deployed form has some meaningful labels and not every field is a "Search" field. What's the real thing look like?

Would using Bootstrap's grid system instead of the floats be an option for you? Why or why not?

since I need the dynamic minimum size that floats offer (and that was exactly my use case).

Please go into more detail about why you need that and what your exact use case is.

@thgreasi

This comment has been minimized.

Copy link
Author

thgreasi commented Jun 4, 2016

One of the forms that drastically changed after the migrating to bootstrap 3 looks like this:
untitled

This was previously implemented using floats, making all rows reasonably small and placing other panels next to it whenever the screen size allowed it (👍 to whoever defined floats). But now with bootstrap 3 I ended up using col-* along with a max-width on the container. This was actually the form that made me report this issue, since the float layout stopped working on bootstrap 3 right after I added the input-append for the action buttons. Floating the input and the buttons individually worked but didn't result an equal width for every row.

This is how my search table page's code looks like.

I acknowledge that I could have used several other ways (closer to the bootstrap layout philosophy) for my implementation and I actually rewrote some of the pages using the grid system or min/max-widths.

The question that appeared in my mind when I faced this issue was:

why does the width: 100% of the display: table element isn't applied based on its floated parent-element/container!?

The principle that I still have in mind (similarly to separation of concerns) is that applying styles (like floats) on any element that doesn't contain elements with strict sizing (width:N px;) should have the same result. This way we can divide the work, write each component having 100% width in mind and then combine all the component to create each page.
Using col-X-Y (or specific widths) on elements can indeed make the page responsive/look-good-on-many-screen-sizes but stops it from being fluid.

Thanks for all your effort so far. Keep up the great work 😉

@cvrebert cvrebert changed the title Firefox doesn't display floated .input-group as width:100%; Add display:table-row-group class to manage width of floated form controls Jun 4, 2016

@cvrebert cvrebert removed this from the v3.3.7 milestone Jun 4, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 4, 2016

Thanks for sharing those details.

CC: @mdo regarding the request for a display:table-row-group class

@mdo mdo added this to the v4.1 ideas milestone Sep 12, 2016

@mdo mdo removed their assignment Sep 12, 2016

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Oct 29, 2016

If this is about adding a .d-table-row-group class to add that style, we could add it (though that one's used far less frequently than the other display values). I haven't seen much in the way of folks asking for this as a utility though, so closing this as a won't fix.

Happy to revisit though if this is about a separate issue or there's more to this <3.

@mdo mdo closed this Oct 29, 2016

@mdo mdo removed this from the v4.1 ideas milestone Oct 29, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.