I’ve run into a problem with dynamically adding a tab that contains a splitter. When I add a new tab and configure the splitter in the new tab it seems to mess up the splitter in the previous tab. I reproduced the problem with a small sample (copied from one of the tab samples), here it is:
—-
$(document).ready(function () {
$(‘#jqxTabs’).jqxTabs({
height: 220,
width: 510,
theme: ‘energyblue’
});
// Set up splitter for tab one
$(“#tabSplitter1”).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘horizontal’,
panels: [{ size: ‘60%’ }, { size: ‘40%’}]
});
// Create and initialize utton
$(‘#Add’).jqxButton({ width: ‘100px’, theme: ‘energyblue’ });
// Add
$(‘#Add’).click(function () {
$(‘#jqxTabs’).jqxTabs(‘addLast’, ‘Tab Two’,
“
“);
$(“#tabSplitter2”).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘horizontal’,
panels: [{ size: ‘60%’ }, { size: ‘40%’}]
});
});
});
—-
After clicking the ‘add’ button it will (correctly) add the second tab with the splitter. However, switching to the first tab will show that the content is now only partly visible and splitter resize doesn’t work anymore. It seems that adding the second tab/splitter somehow messes up the first tab.
Hopefully you can give me some guidance how to fix this issue.
Best regards,
Ton
