Question

I am using jquery UI inside my application and all the elements of the jquery UI when used inside my page are appearing quiet big. That is they appear bigger than the rest of the page. Also the normal elements i put inside a jquery UI element is also growing in size.

For example i have a couple of textboxes and text labels inside an accordion they become bigger than their original size insdide the UI element.

I am not sure what is causing this.

Answer 1

Try setting the font-size of the body element of your page container of your widget to a smaller value in pixels.

Usually jquery UI plugins and stuff have relative sizes (in em), thus they become relative to the font-size inherited from their parent nodes.

You could add something like this to your css:

.ui-widget{
  font-size: 10px;
}

Thanks @Haochi for the better idea, I’ve missed it originally.