This project has moved and is read-only. For the latest updates, please go here.

toolbar grouping moves around

May 21, 2012 at 5:58 PM


I have enough buttons and groupings that the toolbar will wrap.  When I hover over the topmost toolbar, the lower (wrapped) toolbar groupings will automatically shift to the right and back.  

Is there a way to prevent this behavior?

This occurs in the latest versions of Chrome, IE, FF, and Safari.  Also, this may be connected to another discussion I posted here where the button size changes on hover, which causes the toobar to change sizes, and the content below to "bounce".

May 21, 2012 at 7:36 PM


I figured this out.  

The issue was the ul li:hover style was creating a border, which did not exist in ul li.  This caused the css engine to get confused and throw the ul around a bit.

   div.jHtmlArea .ToolBar ul li {... no border... etc...)

   div.jHtmlArea .ToolBar ul li:hover { border: solid 1px #ccc;... etc...}

The fix was to add a transparent border to the ul li.  This 'reserves' the space and does not adversely impact the design.  

   div.jHtmlArea .ToolBar ul li {border: solid 1px transparent;... etc...)

I tested the solution in Chrome v19, IE v9, FF v11, and Safari v5.1.7 and it behaves the same across all of them.