jQWidgets Forums

Tagged: Tabs

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Incorrect height of jqxTabs Posts

July 29, 2013 at 4:39 am Incorrect height of jqxTabs #25861

Participant

Hi!

When jqxTabs are inside the table row which height sets is in percent, the height of jqxTabs is calculated incorrectly.
Also If the window height will be increased in Firefox, the tabs height will also be increased. In Google Chrome, this behavior does not occur.
This example illustrates a bug:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jqxTabs incorect height</title>
        <link rel="stylesheet" href="styles/jqx.base.css"/>
        <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"> </script>
        <script type="text/javascript" src="scripts/jqx-all.js"> </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#jqxTabs').jqxTabs({ width: '100%', height: '100%' });
            });
        </script>
        <style type="text/css">
            table {
                table-layout: fixed;
                border-collapse: collapse;
            }
            p { margin: 0; }
        </style>
    </head>
    <body>
        <div style="height: 500px; width: 800px;">
            <table style="height: 100%; width: 100%;">
                <tr style="height: 10%">
                    <td>
                        <p>
                            row height should be 50px, but is 46px in Firefox
                        </p>
                    </td>
                </tr>
                <tr style="height: 10%">
                    <td>
                        <p>
                            row height should be 50px, but is 22px in Firefox and Chrome
                        </p>
                    </td>
                </tr>
                <tr style="height: 80%">
                    <td>
                        <div id='jqxTabs'>
                            <ul>
                                <li>First tab</li>
                                <li>Second tab</li>
                            </ul>
                            <div>
                                Tabs height sould be 400px, but is 432px in Firefox and 428px in Chrome.<br />
                                If I increase the window height in Firefox, the tabs height will also be increased. In Google Chrome, this behavior does not occur.
                            </div>
                            <div>
                                Second tab
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

July 29, 2013 at 2:56 pm Incorrect height of jqxTabs #25890

Peter Stoev

Keymaster

Hi Yuri Antipin,

The DIV tag of jqxTabs has width and height equal to 100%. That is what the debugger displays. The sizing of the DIV tag comes from the web browser, not from us.

Best Regards,
Peter Stoev

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

July 30, 2013 at 3:47 am Incorrect height of jqxTabs #25912

Yuri Antipin

Participant

Hi Peter Stoev!

Yes, DIV tag of jqxTabs has height 100%. But the increase of height is due to the content of the widget. Inner DIV’s have clearly established height: 33px and 399px instead of 33px and 366px (Firefox debugger). Because of this table structure is broken. Second DIV height should be reduced by 33px (the height of first DIV / tabs header).

July 30, 2013 at 11:49 am Incorrect height of jqxTabs #25953

Peter Stoev

Keymaster

Hi Yuri Antipin,

I confirm the increase of height in this scenario the window is resized in FF. The issue will be resolved in the next release.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.