tabs wrap to next line instead of scrolling

[dflemingParticipant]

I’ve encountered a problem with jqxTabs. When tab titles change and become longer, pushing the tabs on the right off the side of the page, the tabs on the right side wrap instead of scrolling.

When the page opens, there is a jqxSplitter, with jqxTree in one pane and jqxTabs, with 12 tabs (Tab 1, Tab 2, … , Tab 12), in the other pane. On the page, selection of an item on the tree changes the title and content on a tab. Increasing the length of a title on a tab will cause the tabs on the right end to wrap to the next line.

HTML for the jqxSplitter, jqxTree, and jqxTabs in the screenshot:

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8
Tab 9
Tab 10
Tab 11
Tab 12

Code that initializes the controls
var splitter = $(\”#c132_splitter\”);
splitter.height(\”100%\”);
splitter.jqxSplitter({
theme: Globals.jqxTheme,
width:\”100%\”,
height:\”100%\”,
panels: [{size: 300, min:100}, {min:200, size: 400}]
});

// add a tree
$(\”#c132_tree\”).jqxTree({theme: Globals.jqxTheme, width: \”100%\”, height: \”100%\”})
.on(\”select\”, $.proxy(this.nodeClicked, this));

// add the tabs
$(\”#c132_tabs\”).jqxTabs({
theme: Globals.jqxTheme,
width: \”100%\”,
height: \”100%\”,
scrollable: true,
scrollPosition: \”both\”,
reorder: false});

Code that changes the title and content of a tab:

var tabs = $(\”#c132_tabs\”);
tabs.jqxTabs(\’setContentAt\’, tabIndex, \”

\"+text+\"

\”)
tabs.jqxTabs(\’setTitleAt\’, tabIndex, data.unit+\”:\”+data.database);

Is there a workaround for this problem?

[Peter StoevKeymaster]

Hi,

We are unable to reproduce that behavior with jQWidgets 2.8.2.
Please, send a sample which demonstrates your scenario with the latest version of jQWidgets to support@jqwidgets.com.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts