jquery ui-tabs widget , changing the color of the background with css causes problem with display
- by Ronedog
I'm using the jquery tabs plugin and want to have the background a light grey color. In the css section for tabs, I found this line of code where I manually added the background-color part:
.ui-tabs .ui-tabs-panel { padding: 1em 1em; display: block; border-width: 0; background-color:#EEEEEE;}
The problem comes as seen in the picture below, where the grey background is only extending down part of the way. I initially thought I could update the div container with the same background color, but it didn't work. It looks like that white portion below might be some kind of padding, so I looked for that in the css but everything I tried had the same effect.
Anyone got some ideas?
This is what the HTML looks like (Theoretically):
<div id="tabs_here">
<ul>
<li><a href="#" onclick="$('#T_1').html('Display the data');" >Item Groups</a>
</li>
</ul>
<div id="T_1"></div>
</div>
