jQuery UI Widgets Forums Layouts Panel and Responsive Panel Scrollbar Problems (jqxTabs & jqxSplitter)

This topic contains 5 replies, has 2 voices, and was last updated by  ivailo 9 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • aknue
    Participant

    Hello!
    I have some issues with the jqxPanel Widget.
    At first, i want to add Tabs dynamicly, that works!
    The Content of the Tabs should be a jqxSplitter with a jqxPanel on the right side or just a jqxPanel.

    The first Problem comes when i try to generate Tabs with a jqxSplitter. When you click the Link “Test Link 1 (Add new TAB)” twice in the following Tabs the Scrollbar disappers…
    Next to this Problem, at the first click on “Test Link 1 (Add new TAB)” the Scrollbar is visible but when you hit “Test Link 2 (Change Content of current Tab)” the Scrollbar also disappers…

    The second Problem is when i want to add only a Tab with jqxPanel (no jqxSplitter), there are graphic issues when you try to resize the Window.
    To test that, simply set the the variable DEBUG=false;

    I hope, someone can help me!

    Kind regards,
    Andre.

    Here is my Test-Code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>TEST</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxtoolbar.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>	
    	
    	<script type="text/javascript">
            $(document).ready(function () {
    			var actualSelectedTab = 0;
    			var DEBUG = true;
    			$('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', min: 200 }, { size: '80%', min: 100}] });
    			$('#rightSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false, min: 100 }, { size: '20%', min: 100}] });
    			$("#tabswidget").jqxTabs({  height: '100%', width: '100%', showCloseButtons: true });
    			
    			 $('#tabswidget').on('selected', function (event) {
    				   actualSelectedTab = event.args.item;
    				   //var contentDIV = $("#tabswidget .jqx-tabs-content-element")[actualSelectedTab];
    				   //console.debug(contentDIV);
    			 });			
    					
    			$("#testlnk").click(function (e) {	
    				e.preventDefault(); 
    				result="TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TESTTEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST";
    				if(DEBUG)var code="<div class='jqx-hideborder' id='splitter'><div id='jqxpanel'>"+result+"</div><div>Right</div></div>"; 
    				else var code="<div id='jqxpanel' class='jqx-hideborder'>"+result+"</div>"; 
    				
    				$('#tabswidget').jqxTabs('addAt', ($('#tabswidget').jqxTabs('length')), ' Tab Title', code);
    				$('#tabswidget').jqxTabs('ensureVisible', ($('#tabswidget').jqxTabs('length'))); 
    
    				$("#tabswidget .jqx-tabs-content-element:visible #jqxpanel").jqxPanel({ height: '100%', width: '100%' });	
    				if(DEBUG)$("#tabswidget .jqx-tabs-content-element:visible #splitter").jqxSplitter({ height: '100%', width: '100%',  panels: [{ size: '80%', min: 210, collapsible: false}] });
    			});
    			
    			$("#testlnktwo").click(function (e) {	
    				e.preventDefault(); 
    				result="NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENTNEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT";
    				if(DEBUG)var code="<div class='jqx-hideborder' id='splitter'><div id='jqxpanel'>"+result+"</div><div>Right</div></div>"; 
    				else var code="<div id='jqxpanel' class='jqx-hideborder'>"+result+"</div>"; 
    				
    				$('#tabswidget').jqxTabs('setContentAt', actualSelectedTab, code);
    				$('#tabswidget').jqxTabs('ensureVisible', actualSelectedTab); 
    				
    				// Selector ":visible" to get the current Tab...
    				$("#tabswidget .jqx-tabs-content-element:visible #jqxpanel").jqxPanel({ height: '100%', width: '100%' });	
    				if(DEBUG)$("#tabswidget .jqx-tabs-content-element:visible #splitter").jqxSplitter({ height: '100%', width: '100%',  panels: [{ size: '80%', min: 210, collapsible: false}] });
    				
    			});			
    			
    			
    		});
    </script>
        <style type="text/css">
            html, body
            {
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
    			background-color: #cccccc;
            }
        </style>
    </head>
    <body>
    	<div id="jqxToolBar" class="jqx-hideborder"> </div>
    	<div id="mainSplitter">
    		<div>	
    				
    			<div id="tree" class="jqx-hideborder">Left Panel<br><br><a href="#" id="testlnk">Test Link 1 (Add new TAB)</a><br><br><a href="#" id="testlnktwo">Test Link 2 (Change Content of current Tab)</a></div>
    		</div>
            <div>
                <div id="rightSplitter">
                    <div>
    						<div class="jqx-hideborder" id="tabswidget">
    							<ul>
    								<li style="margin-left: 30px;" hasclosebutton='false'>First TAB</li>
    							</ul>
    							<div style='padding: 10px;'>HELLO</div>
    						</div>
    				</div>
                    <div id="unten" style='padding: 10px'>Bottom-Right Panel</div>
                </div>
            </div>
        </div>
    </body>
    </html>
    		

    ivailo
    Participant

    Hi Andre,

    Try to use unique ids about the new dynamically created splites and panels.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    aknue
    Participant

    Thank you for your quick reply!

    I changed my code as attached. The Link No.1 seems to be working.
    But i have the remaining problem with Link No.2… How do change the Content and reinitialise the jqxSplitter? The Scrollbar disappers when i set new Content. I have tried it with the same id as the dynamic generated Tab and with a complete new one like in my example “splitter999”.

    Thank you very much for all your help!

    Best Regards,
    Andre.

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>TEST</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxtoolbar.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>	
    	
    	<script type="text/javascript">
            $(document).ready(function () {
    			var actualSelectedTab = 0;
    			var DEBUG = true;
    			$('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', min: 200 }, { size: '80%', min: 100}] });
    			$('#rightSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false, min: 100 }, { size: '20%', min: 100}] });
    			$("#tabswidget").jqxTabs({  height: '100%', width: '100%', showCloseButtons: true });
    			
    			 $('#tabswidget').on('selected', function (event) {
    				   actualSelectedTab = event.args.item;
    				   //var contentDIV = $("#tabswidget .jqx-tabs-content-element")[actualSelectedTab];
    				   //console.debug(contentDIV);
    			 });			
    			
    			
    			var newid = 0;
    			$("#testlnk").click(function (e) {	
    				e.preventDefault(); 
    				result="TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TESTTEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST";
    				if(DEBUG)var code="<div class='jqx-hideborder' id='splitter"+newid+"'><div id='jqxpanel"+newid+"'>"+result+"</div><div>Right</div></div>"; 
    				else var code="<div id='jqxpanel"+newid+"' class='jqx-hideborder'>"+result+"</div>"; 
    				
    				$('#tabswidget').jqxTabs('addAt', ($('#tabswidget').jqxTabs('length')), ' Tab Title', code);
    				$('#tabswidget').jqxTabs('ensureVisible', ($('#tabswidget').jqxTabs('length'))); 
    				
    				$("#tabswidget .jqx-tabs-content-element:visible #jqxpanel"+newid).jqxPanel({ height: '100%', width: '100%' });	
    				if(DEBUG)$("#tabswidget .jqx-tabs-content-element:visible #splitter"+newid).jqxSplitter({ height: '100%', width: '100%',  panels: [{ size: '80%', min: 210, collapsible: false}] });
    				newid++;
    			});
    			
    			$("#testlnktwo").click(function (e) {	
    				e.preventDefault(); 
    				result="NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENTNEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT";
    				if(DEBUG)var code="<div class='jqx-hideborder' id='splitter999'><div id='jqxpanel999'>"+result+"</div><div>Right</div></div>"; 
    				else var code="<div id='jqxpanel999' class='jqx-hideborder'>"+result+"</div>"; 
    				
    				$('#tabswidget').jqxTabs('setContentAt', actualSelectedTab, code);
    				$('#tabswidget').jqxTabs('ensureVisible', actualSelectedTab); 
    				
    				// Selector ":visible" to get the current Tab...
    				$("#tabswidget .jqx-tabs-content-element:visible #jqxpanel999").jqxPanel({ height: '100%', width: '100%' });	
    				if(DEBUG)$("#tabswidget .jqx-tabs-content-element:visible #splitter999").jqxSplitter({ height: '100%', width: '100%',  panels: [{ size: '80%', min: 210, collapsible: false}] });
    				
    			});			
    			
    			
    		});
    </script>
        <style type="text/css">
            html, body
            {
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
    			background-color: #cccccc;
            }
        </style>
    </head>
    <body>
    	<div id="jqxToolBar" class="jqx-hideborder"> </div>
    	<div id="mainSplitter">
    		<div>	
    				
    			<div id="tree" class="jqx-hideborder">Left Panel<br><br><a href="#" id="testlnk">Test Link 1 (Add new TAB)</a><br><br><a href="#" id="testlnktwo">Test Link 2 (Change Content of current Tab)</a></div>
    		</div>
            <div>
                <div id="rightSplitter">
                    <div>
    						<div class="jqx-hideborder" id="tabswidget">
    							<ul>
    								<li style="margin-left: 30px;" hasclosebutton='false'>First TAB</li>
    							</ul>
    							<div style='padding: 10px;'>HELLO</div>
    						</div>
    				</div>
                    <div id="unten" style='padding: 10px'>Bottom-Right Panel</div>
                </div>
            </div>
        </div>
    </body>
    </html>
    

    ivailo
    Participant

    Hi Andre,

    Try this code with dinamicaly set of the actual id’s on change. Plus detection on(‘resize’).

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>TEST</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function () {
                var actualSelectedTab = 0;
                var selectedId;
                var DEBUG = false;
                $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', min: 200 }, { size: '80%', min: 100 }] });
                $('#rightSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false, min: 100 }, { size: '20%', min: 100 }] });
                $("#tabswidget").jqxTabs({ height: '100%', width: '100%', showCloseButtons: true });
    
                $('#tabswidget').on('selected', function (event) {
                    actualSelectedTab = event.args.item;
                    var selectedContent = $('#tabswidget').jqxTabs('getTitleAt', actualSelectedTab);
                    var selectedContent2 = selectedContent;
                    selectedId = /[0-9]+/.exec(selectedContent2);
                    //var contentDIV = $("#tabswidget .jqx-tabs-content-element")[actualSelectedTab];
                    //console.debug(contentDIV);
                });
    
                $(document).on("resize", function () {
                    $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', min: 200 }, { size: '80%', min: 100 }] });
                    $('#rightSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false, min: 100 }, { size: '20%', min: 100 }] });
                    $("#tabswidget").jqxTabs({ height: '100%', width: '100%', showCloseButtons: true });
                })
    
                var newid = 0;
                $("#testlnk").click(function (e) {
                    e.preventDefault();
                    result = "TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TESTTEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST";
                    if (DEBUG) var code = "<div class='jqx-hideborder' id='splitter" + newid + "'><div id='jqxpanel" + newid + "'>" + result + "</div><div>Right</div></div>";
                    else var code = "<div id='jqxpanel" + newid + "' class='jqx-hideborder'>" + result + "</div>";
    
                    $('#tabswidget').jqxTabs('addAt', ($('#tabswidget').jqxTabs('length')), ' Tab Title ' + newid, code);
                    $('#tabswidget').jqxTabs('ensureVisible', ($('#tabswidget').jqxTabs('length')));
    
                    $("#tabswidget .jqx-tabs-content-element:visible #jqxpanel" + newid).jqxPanel({ height: '100%', width: '100%' });
                    if (DEBUG) $("#tabswidget .jqx-tabs-content-element:visible #splitter" + newid).jqxSplitter({ height: '100%', width: '100%', panels: [{ size: '80%', min: 210, collapsible: false }] });
                    newid++;
                });
    
                $("#testlnktwo").click(function (e) {
                    e.preventDefault();
                    result = "NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENTNEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT";
    
                    if (DEBUG) {
                        var code = "<div class='jqx-hideborder' id='splitter" + selectedId + "'><div id='jqxpanel" + selectedId + "'>" + result + "</div><div>Right</div></div>";
                    } else {
                        var code = "<div id='jqxpanel" + selectedId + "' class='jqx-hideborder'>" + result + "</div>";
                    }
    
                    $('#tabswidget').jqxTabs('setContentAt', actualSelectedTab, code);
                    $('#tabswidget').jqxTabs('ensureVisible', actualSelectedTab);
    
                    // Selector ":visible" to get the current Tab...
                    $("#tabswidget .jqx-tabs-content-element:visible #jqxpanel" + selectedId).jqxPanel({ height: '100%', width: '100%' });
                    if (DEBUG) $("#tabswidget .jqx-tabs-content-element:visible #splitter" + selectedId).jqxSplitter({ height: '100%', width: '100%', panels: [{ size: '80%', min: 210, collapsible: false }] });
    
                });
    
            });
        </script>
        <style type="text/css">
            html, body {
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <div id="jqxToolBar" class="jqx-hideborder"> </div>
        <div id="mainSplitter">
            <div>
    
                <div id="tree" class="jqx-hideborder">Left Panel<br><br><a href="#" id="testlnk">Test Link 1 (Add new TAB)</a><br><br><a href="#" id="testlnktwo">Test Link 2 (Change Content of current Tab)</a></div>
            </div>
            <div>
                <div id="rightSplitter">
                    <div>
                        <div class="jqx-hideborder" id="tabswidget">
                            <ul>
                                <li style="margin-left: 30px;" hasclosebutton='false'>First TAB</li>
                            </ul>
                            <div style='padding: 10px;'>HELLO</div>
                        </div>
                    </div>
                    <div id="unten" style='padding: 10px'>Bottom-Right Panel</div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    aknue
    Participant

    Hello Ivailo,
    again, thanks for your fast reply!
    I have tested your code, but unfortunately when i set DEBUG=true, the problem remains.
    I would like to fill the selected Tab with jqxSplitter and some NEW CONTENT. So, when i click on Link 1 everything is fine for now, but if i click on Link 2, i’ve got the jqxSplitter with my NEW CONTENT but the scollbar disappers.

    Any ideas?

    All the best!
    Andre.


    ivailo
    Participant

    Hi Andre,

    You also have to set initTabContent to be sure that the nested widgets are loaded correctly.
    Here is an example.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.