jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 12 years, 11 months ago.

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

Author

Problem withHTML content within tabs Posts

May 20, 2012 at 6:06 pm Problem withHTML content within tabs #4256

Member

We have found that HTML content containing list in a tab panel is modified as though the list items where part of the tab list. Consequently, lists within a tab panel do not display correctly.

May 20, 2012 at 7:20 pm Problem withHTML content within tabs #4261

Peter Stoev

Keymaster

Hi arudmik,

We confirm the issue with UL/LI elements. To resolve it, as a workaround you can remove the class ‘jqx-reset’ from the nested LI elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({ width: 580, height: 200 });
            $("#tab1").find('li').removeClass('jqx-reset');
            $("#tab1").find('ul').removeClass('jqx-reset');
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTabs'>
        <ul>
            <li style="margin-left: 30px;">Tab 1</li>
            <li>Tab 2</li>
        </ul>
        <div id="tab1">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul>
        </div>
        <div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.