Question

I am creating a dropdown menu using a table. I am adding the jQueryUI-provided “ui-state-highlight” class for row highlighting.

My issue is that right now, whenever an item is highlighted it makes the size of the menu change by a few pixels. I’ve tried to fix this issue using padding but it doesn’t seem to work. JSFiddle

To be more general, how do you style an element to maintain the same width/height when a child element is resized without explicitly setting the height and width?

Answer 1

You are getting that shake effect is because of the border 1px. The border was added when you mouseenter and removed when mouseleave which is causing that effect.

You can avoid it by a cheap trick,

 //Change white if the background color of your screen is different.
 tr { border: 1px solid white; } 

Edit: You can use transparent color to avoid matching with what background color is.

tr { border: 1px solid transparent; }

DEMO here