CKEditor 3.6.6.1 in wysiwyg 7.x 2.2 Toolbar doesnt wrap buttons properly Drupal 7.22 [#2040677]

So i have enabled all the buttons of the menu so that i have a full list.
In the full view of the editor everything works fine.
If the editor's window width falls (when resizing the editor's window) under 603px there is a problem for the first line of menu buttons.
In more detail:
IE10 and Chrome 27.0.1453.116 the first line of menu buttons is unable to wrap; while the background is resizing in an expected way leaving the extra part of the menu buttons "hanging" out of the editors window.

In Firefox 22.0 the problem is not so big because the first line DOES wrap, creating a second line of elements which doesn't have that gray background as the upper line though.

Any ideas about this problem?
Note that i could enable less menu buttons but i need enough of them. Just enough to make the problem appear.
Also note that the rest menu buttons that dont belong to the first "set" of buttons do appear fine even when resized.

if you are using firebug you can see the problematic span class="cke_toolgroup"
and unproblematic span class="cke_rcombo"

i tried to test a firebug test altering the cke_toolgroup to cke_rcombo in the first class which made the problem a little less visible but it still existed.

Comment	File	Size	Author
	browser.PNG	180.48 KB	BaBisfLou

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

ann b CreditAttribution: ann b commented 16 July 2014 at 15:19

Issue summary:

View changes

I'm seeing the same problem on an iPad.

iOS Version: 7.0.6
Drupal Version: 7.27

Comment #2

ann b CreditAttribution: ann b commented 7 August 2015 at 16:53

Came across this problem again and decided to investigate. I added the following css to my theme:

.cke_toolbar .cke_toolgroup .cke_button {
	white-space: normal;
	float:left;
}

The icons are now wrapping and the body field fits within its border, but the second row of icons doesn't have the correct background color. It looks better than before. It appears the display, white-space and float properties may be conflicting. Here is a summary of some of the pertinent css:

<span class="cke_toolgroup">... // float:left;
     <span class="cke_button">... // float:none; white-space:nowrap;
          <a>... // display:inline-block;