TinyMCE: How to display all toolbars on a single row?

Question

This question is basically reverse of Is there a way to wrap the toolbar buttons to the next row in TinyMCE if the width of the editor is too small?

I have a TinyMCE editor where I have buttons specified via theme_advanced_buttons1, theme_advanced_buttons2 and theme_advanced_buttons3. Each toolbar row is designed to be pretty short to make sure that the layout will not overflow horizontally.

Is there a way to get toolbars to reposition on a single line if they can all fit? (E.g. visitor has a wide-screen display and the browser window is maximized.)

I'm thinking it could be possible via CSS by settings display:block and float:left to toolbar rows (the tr elements). Perhaps add clear: left to some (which?) following element to prevent overflowing to editor area. However, this seems like an ugly hack. I'm hoping you can come up with something better.

Answer 1

Each line of buttons is wrapped in a table so theme_advanced_buttons1 is inside a table, theme_advanced_buttons2 is inside another table and theme_advanced_buttons3 is inside another one, so to make them inline you can use

.wp_themeSkin table.mceToolbar {
  margin: 0 6px 2px; // this is by default
  display: inline-table; // this is extra I've added to keep them in single line
}

Below is a screenshot of display: inline-table; in full screen mode of the editor, all three lines of buttons are in one line, side by side

Answer 2

Depending on the number of buttons enabled, setting table.mceToolbar to display inline-table can push the editor's width to be too wide.

Instead float each table left so it breaks when the maximum allowable width is reached.

 table.mceToolbar {margin-left:3px; float:left}