[Bootstrap] Hosts Aggregate Action button on 2 lines

[Cindy Lu]

Hosts Aggregates - Action buttons are not on a single line even though there is plenty of room. See image.

[Thai Tran (tqtran)]

The actions_column has a fixed width of 200px. The "Edit Host Aggregate" label causes the width to spill over to the next line.
Solutions:

1. The easiest solution would be to increase the fixed width, but that causes the column to take up more space on action columns that may not require that much space.

2. Use dynamic widths by setting max-width to 0. This works well when the number of columns are small. For tables with many columns, the width allocated to the actions_column might be small and will cause the spill over to happen.

I have tried a few CSS tricks, but none of them work....

[Aaron Sahlin (asahlin)]

We should be able to get the desired display by styling the button group inside the action column in addition to setting the max-width on the column to 0.

[Aaron Sahlin (asahlin)]

As like Thai - I tried a variety of CSS and the closest I came to getting the desired behavior (with a caveat) is
setting the the td.actions_column width to 0 so the column dynamically adjusts, and then changing td.actions_column .btn-group display to inline-flex. CSS shown below. Then resizing the browser always keeps the buttons on the same line.

td.actions_column {
 ...
 width to 0px;
}

td.actions_column .btn-group {
  display: inline-flex;
}

For the caveat, the flex option is new in CSS3 and is supported in FF 20+, Chrome 29+, Safari 5.1, Opera 12.1+, IE 10+ (per documentation) I personally tested on FF31, Chrome36, Safari 5.1, IE10.

I tested on IE9 and since it doesn't have flex support the buttons are always on 2 lines, and with the dynamically sizing the column is sized to the size of the first button. I am not sure what the behavior of the lower levels of FF, Chrome, Safari are.

With all that said, if I set the width of the td.actions_column to a large enough size (16em) then IE9 will show the buttons on the same line (similar to how it works now, just a bit larger to allow buttons to be on single line). The downside of this is you have extra dead space on the right of the buttons.

I attached an image to show the fixed sized actions column. Is it ok to use CSS3 that isn't supported in the older versions of browsers? If so I will go ahead with the patch of dynamic column sizing with flex display, if not I think we need to set the size on the actions column.

[Aaron Sahlin (asahlin)]

The final fix is to set td.actions_column width to 1em so the column dynamically adjust, but by setting width to 1em (vs 0) stops tables with less columns(Host Aggregates for example) having their actions column expand overally wide, and by changing td.actions_column .btn-group display to inline-flex.

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: master
Review: https://review.openstack.org/112394

[Travis Tripp (travis-tripp)]

I tried the latest patch (display: inline-flex; and width: 200px;).

Good news is it works in all of the following:

Ubuntu 12.04:
 Chrome: 34.0.1847.132
 FF: 29.0

Windows 7:
 Chrome: 36.0.1985.125 m

Bad news it did not work in:

IE 10.0.9200.16921

[Thai Tran (tqtran)]

Cindy's patch to remove the word "More" should also help a bit with spacing: https://review.openstack.org/#/c/114618/1

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.openstack.org/112394
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=c455113791a030aa3f41a09f019292c14f088a81
Submitter: Jenkins
Branch: master

commit c455113791a030aa3f41a09f019292c14f088a81
Author: Aaron Sahlin <email address hidden>
Date: Wed Aug 6 14:25:48 2014 -0500

    Display action column buttons on single line

    Fixed actions column buttons to be displayed on a single line by
    setting the td.actions_column width to 1em so the column dynamically
    adjust, but by setting width to 1em (vs 0) stops tables with less
    columns(Host Aggregates for example) having their actions column
    expand overally wide, and by changing td.actions_column .btn-group
    display to inline-flex.

    Change-Id: I7dcb338f9f82e4b6eb88894068a9c4fb9879cf80
    Closes-Bug: #1349615