Scrollbar Problems (jqxTabs & jqxSplitter) - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: jqxpanel, jqxsplitter, jqxTabs, problem, resize, scrollbar

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

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

Author

Scrollbar Problems (jqxTabs & jqxSplitter) Posts

May 25, 2015 at 3:30 pm Scrollbar Problems (jqxTabs & jqxSplitter) #71537

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>

May 26, 2015 at 1:34 pm Scrollbar Problems (jqxTabs & jqxSplitter) #71584

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

May 26, 2015 at 9:03 pm Scrollbar Problems (jqxTabs & jqxSplitter) #71593

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>

May 27, 2015 at 11:31 am Scrollbar Problems (jqxTabs & jqxSplitter) #71644

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

May 27, 2015 at 4:17 pm Scrollbar Problems (jqxTabs & jqxSplitter) #71676

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.

May 29, 2015 at 1:14 pm Scrollbar Problems (jqxTabs & jqxSplitter) #71796

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

Author

Posts

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

You must be logged in to reply to this topic.