EasyUI Forum
April 29, 2024, 09:13:59 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > tab scroller for easyui-tabs not appear on windows resize
Pages: [1]
« previous next »
  Print  
Author Topic: tab scroller for easyui-tabs not appear on windows resize  (Read 15533 times)
klynix
Newbie
*
Posts: 14


View Profile Email
« 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
« Last Edit: September 21, 2013, 06:32:44 PM by klynix » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: September 21, 2013, 06:17:23 PM »
What does the 'tab scroller' mean? Please provide some code snippets to demonstrate this issue.
Logged
klynix
Newbie
*
Posts: 14


View Profile Email
« Reply #2 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.
« Last Edit: September 21, 2013, 06:29:49 PM by klynix » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 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>
Logged
klynix
Newbie
*
Posts: 14


View Profile Email
« Reply #4 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
													
												})
										}
									}
								})

								
								
								
					});
« Last Edit: September 21, 2013, 08:35:18 PM by klynix » Logged
klynix
Newbie
*
Posts: 14


View Profile Email
« Reply #5 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',{})
		})

		
    });
Logged
klynix
Newbie
*
Posts: 14


View Profile Email
« Reply #6 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');

		
		
    });
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!