When using jQuery tabs, I recently switched to vertical tabs and noticed that the content is not positioned within the space after the tabs. Instead, it is placed inside a container div with a margin, giving the appearance of being contained within that box. This setup doesn't work well for responsive design.
See example screenshot: https://i.sstatic.net/VebDQ.png
The orange area represents the margin.
I discovered that by adding display: inline-block to each tab, I can ensure the content stays within the space after the tabs. My question is how to add this dynamically instead of manually placing an inline style in every tab's div.
Below is a snippet of the HTML code for my tabs:
<div id="tabs-1" style="display: inline-block">
<div id="placeholder" class="chart-resize"></div>
<div id="placeholder2" class="chart-resize"></div>
</div>
<div id="tabs-2" style="display: inline-block">
<div id="placeholder3" class="chart-resize"></div>
<div id="placeholder4" class="chart-resize"></div>
</div>
Here is the part of the JavaScript code responsible for creating the vertical tabs:
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass( "ui-corner-left" );
All styles are as defined in the default jQueryUI.css file.