CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
Alex Yeung
Alex Yeung

Reputation: 2515

Bug? JQuery UI Tabs remove parents inline style automatically

I am using a JQuery UI Tabs (1.8.6). Here is my HTML

  <div id='outer1' style="height:520;width:610;">
   <div id='outer2' style="height:520;width:610;">
    <div id="tabs">
     <ul>
      <li><a href="#tab1">Tab1</a></li>
     </ul>
     <div id='tab1'>Tab1</div>
    </div>
   </div>
  </div>

And the tab is created by $('#tabs').tabs();

However, after the tab is created, I found that outer1.style and outer2.style have been removed like

  <div id='outer1'>
   <div id='outer2'>
    ... the tab
   </div>
  </div>

Is it a bug of JQuery? I just want to have a way to fix the width and height of the tab. I cannot use css class because the width and height is dynamically calculated by server side.

Thanks!

Upvotes: 2

Views: 559

Answers (2)

Jeach
Jeach

Reputation: 9042

You can use the !important flag in your CSS...

For example:

width : 610px !important;

See this issue for similar fix: jQuery UI - Autocomplete generated inline style override?

Upvotes: 1

shamittomar
shamittomar

Reputation: 46692

So, after you do $('#tabs').tabs();, run the jquery code to apply CSS to those IDs.

 $('#tabs').tabs();

 $('#outer1, #outer2').css('height', '520px').css('width', '610px');

Upvotes: 1

Related Questions