Print Page - tab scroller for easyui-tabs not appear on windows resize

Title: tab scroller for easyui-tabs not appear on windows resize
Post by: klynix on September 21, 2013, 06:07:25 PM

Any way to allow tab scroller display after windows resize?
My experience was need to do page refresh which not what expected.
please advise

Title: Re: tab scroller not appear on windows resize
Post by: stworthy on September 21, 2013, 06:17:23 PM

What does the 'tab scroller' mean? Please provide some code snippets to demonstrate this issue.

Title: Re: tab scroller not appear on windows resize
Post by: klynix on September 21, 2013, 06:27:28 PM

sorry, i should explain more specific.
I enclosed image for reference.
I have 6 project name loaded as for each tab title. As i resize to smaller window size(enclosed image), the tab scroller never appear unless i refresh the windows.

Title: Re: tab scroller for easyui-tabs not appear on windows resize
Post by: stworthy on September 21, 2013, 07:36:42 PM

Try setting 'fit' property to true to let tabs component resize its size corresponding its parent container.

Code:

<body>
<div class="easyui-tabs" fit="true">
...
</div>
</body>

Title: Re: tab scroller for easyui-tabs not appear on windows resize
Post by: klynix on September 21, 2013, 08:33:05 PM

tried but not working.
look at resize.png, the red circle indicate the tabs-scroller left and right not appear until I perform a manual page refresh(F5).

i did tried:

Code:

    $(window).resize(function(){
        $(.tabsProject).tabs('resize',{});
    });

but it makes my datagrid appear at the bottom of my vertical tabs(bottom.png).

here is my whole code:

Code:

$(document).ready(function(){


	$tabsp = $('#tabsProject');

	var pselectedindex = -1;
	var mselectedindex = -1;
	
	
    $(window).resize(function(){
        $tabsp.tabs('resize',{});
    });

	title = $tabsp.tabs('getSelected').panel('options').title;
		
		$tabsp.tabs({
			onSelect: function(title, index){
				if (pselectedindex != index)
				{
				
					var p = $tabsp.tabs('getSelected');  // get the selected tab panel
					var  pid = p.panel('options').id.substr(4);
					pselectedindex = index;
					mselectedindex = -1;
				
					$("div.easyui-tabs").each(function() {
						if($(this).is(':visible'))
							if($(this).attr('id') != 'tabsProject')
								$(this).tabs({
									onSelect: function(title, index){
									
										if (mselectedindex != index){
												var mp = $(this).tabs('getSelected');
												var mid = mp.panel('options').id.substr(5);
											
												mselectedindex = index;
												mp.panel({
													href:'load.do.grid.php?ProjectId='+ pid + '&MaterialId='+ mid
													
												})
										}
									}
								})

								
								
								
					});

Title: Re: tab scroller for easyui-tabs not appear on windows resize
Post by: klynix on September 22, 2013, 01:45:33 AM

found the solution. But the datagrid still not resize as expected.
here is the code:

Code:

     $(window).resize(function(){
        $tabsp.tabs('resize',{});

		$("div.easyui-tabs").each(function() {
			if($(this).is(':visible'))
				if($(this).attr('id') != 'tabsProject')
					$(this).tabs('resize',{})
		})

		
    });

Title: Re: tab scroller for easyui-tabs not appear on windows resize
Post by: klynix on September 22, 2013, 05:46:32 PM

finally I have my issue solved.
The data grid need to call resize method.

Code:

    $(window).resize(function(){
		$("div.easyui-tabs").each(function() {
			if($(this).is(':visible'))
					$(this).tabs('resize',{})
		})
		
		$('table.easyui-datagrid').datagrid('resize');

		
		
    });

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: klynix on September 21, 2013, 06:07:25 PM