Tabs/Grid Header Spacing Issue

[iLoveJQWidgetsParticipant]

I have successfully implemented jqxgrids inside jqxtabs in the past but for some reason today I tried again and I am getting some weird spacing between the header and the grid. See the highlight in the screenshot below:

I’m not using any custom css to override the styling. Even with no grids inside the tabs I still get that space after the header.

Any idea what’s causing this issue?

ASPX:

<div id='jqxTabs'>
        <ul>
            <li style="margin-left: 30px;">
                Tab 1
            </li>
            <li>
                Tab 2
            </li>
        </ul>
        <div style="overflow: hidden;">
            <div id="Grid1"></div>
            <p>
                <!-- Publish button opens dialog that allows user to set scheduled date for publishing changes -->
                <input id="btn1"  type="button" value="Ignore All" />
                <!-- Cancel button opens dialog that allows user to go back to Step 1 (Upload Spreadsheet) -->
                <input id="btn2"  type="button" value="Protect All" />
                <input id="btn3"  type="button" value="Delete All" />
                <input id="btn4" type="button" value="Execute" />
            </p>
        </div>

        <div style="overflow: hidden;">
            <div style="border:none;" id="Grid2"></div>
        </div>
</div>

[StanislavParticipant]

Hello iLoveJQWidgets,

It seems that the header isn’t filling the whole space, you can change the padding-bottom and fill it out.

.jqx-tabs-header {
    padding-bottom: 3px;
}

the padding may vary, it depends on how much space there is.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts