jQWidgets Forums

Tagged: add, break, close, jqxTabs, line, scroll, tab, Tabs, wrap

This topic contains 3 replies, has 3 voices, and was last updated by Dimitar 10 years, 10 months ago.

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

Author

Tabs wrap to second line when length exceeds total length of tab bar Posts

May 19, 2014 at 2:58 pm Tabs wrap to second line when length exceeds total length of tab bar #54646

DaveyWavey

Participant

Good Afternoon,

I have encountered a problem with the jqxTabs component (Version 3.2.2) which causes tabs to wrap to a second line.

When dynamically adding tabs to the component they appear correctly and can I can use the arrows to scroll left and right through the listing. However, upon removing the final tab (only occurs when the tab list overflows and the scroll arrows shows) the next tab along is added to the second line of the tab listing.

Please see the attached screenshot for further clarification, if you require any further details please let me know.

May 20, 2014 at 5:10 am Tabs wrap to second line when length exceeds total length of tab bar #54660

Dimitar

Participant

Hello DaveyWavey,

We tested the demo Settings for the reported issue (the only difference being showCloseButtons: true), but we could not reproduce the erroneous behaviour. Do you experience the issue with it? If not, please provide us with your example.

Best Regards,
Dimitar

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

June 5, 2014 at 7:43 pm Tabs wrap to second line when length exceeds total length of tab bar #55445

silviorp

Participant

I had the same problem and it was happening because I was using ‘%’ or ‘auto’ width.

The only way I found to keep my app with ‘%’ values and prevent the problem was doing some workaround like setting the initial width and height values with 100%, capturing these values in pixels with:

width = $('#jqxTabs').width();
height = $('#jqxTabs').height();

and re-set them:

$('#jqxTabs').jqxTabs({
    width: width,
    height: height
});

After that, it worked as it should.

Just call this method after everything is set:

function setAttributes(){
    var width = $('#jqxTabs').width();
    var height = $('#jqxTabs').height();
	
    $('#jqxTabs').jqxTabs({
	width: width,
	height: height
    });
}

The example works because the values were set in a static way, with the pixel numbers. In my case, when I was adding a new tab, something was setting the tab panel width to ‘auto’, breaking the layout.

June 6, 2014 at 6:23 am Tabs wrap to second line when length exceeds total length of tab bar #55465

Dimitar

Participant

Hi silviorp,

Please check out the following modification of the demo Settings. We still do not experience the reported issue.

<!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.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxTabs').jqxTabs({ height: 'auto', width: '100%', showCloseButtons: true });

            // Create and initialize Buttons
            $('#Add').jqxButton({ width: '100px' });
            $('#Remove').jqxButton({ width: '100px' });
            $('#Disable').jqxButton({ width: '100px' });
            $('#Enable').jqxButton({ width: '100px' });
            $('#EnableAll').jqxButton({ width: '100px' });
            $('#DisableAll').jqxButton({ width: '100px' });

            // Add 
            $('#Add').click(function () {
                $('#jqxTabs').jqxTabs('addLast', 'Sample title', 'Sample content');
                $('#jqxTabs').jqxTabs('ensureVisible', -1);
            });

            // Remove 
            $('#Remove').click(function () {
                var selectedItem = $('#jqxTabs').jqxTabs('selectedItem');
                var disabledItems = $('#jqxTabs').jqxTabs('getDisabledTabsCount');
                var items = $('#jqxTabs').jqxTabs('length');
                if (items > disabledItems + 1) {
                    $('#jqxTabs').jqxTabs('removeAt', selectedItem);
                }
            });

            // Disable
            $('#Disable').click(function () {
                var selectedItem = $('#jqxTabs').jqxTabs('selectedItem');
                $('#jqxTabs').jqxTabs('disableAt', selectedItem);
            });

            // Enable
            $('#Enable').click(function () {
                var selectedItem = $('#jqxTabs').jqxTabs('selectedItem');
                $('#jqxTabs').jqxTabs('enableAt', selectedItem);
            });

            // EnableAll All
            $('#EnableAll').click(function () {
                $('#jqxTabs').jqxTabs('enable');
            });

            // DisableAll All
            $('#DisableAll').click(function () {
                $('#jqxTabs').jqxTabs('disable');
            });
        });
    </script>
</head>
<body class='default' style="width: 100%; height: 100%;">
    <div id='jqxTabs'>
        <ul style='margin-left: 10px;'>
            <li>Node.js</li>
            <li>JavaServer Pages</li>
            <li>Active Server Pages</li>
        </ul>
        <div>
            Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
            is intended for writing scalable network programs such as web servers. It was created
            by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
            Similar environments written in other programming languages include Twisted for
            Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
            Unlike most JavaScript, it is not executed in a web browser, but is instead a form
            of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
            includes a REPL environment for interactive testing.
        </div>
        <div>
            JavaServer Pages (JSP) is a Java technology that helps software developers serve
            dynamically generated web pages based on HTML, XML, or other document types. Released
            in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
            the perception that the Java programming environment didn't provide developers with
            enough support for the Web. To deploy and run, a compatible web server with servlet
            container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
            from Sun Microsystems and the JCP (Java Community Process) must both be met by the
            container.
        </div>
        <div>
            ASP.NET is a web application framework developed and marketed by Microsoft to allow
            programmers to build dynamic web sites, web applications and web services. It was
            first released in January 2002 with version 1.0 of the .NET Framework, and is the
            successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
            on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
            using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
            components to process SOAP messages.
        </div>
    </div>
    <div style='margin-left: 60px; float: left;'>
        <div style='margin-top: 10px;'>
            <input type="button" id='Add' value="Add" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Remove' value="Remove" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Disable' value="Disable" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Enable' value="Enable" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='EnableAll' value="Enable All" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='DisableAll' value="Disable All" />
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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.