We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Tab content full height

Thread ID:

Created:

Updated:

Platform:

Replies:

129030 Feb 22,2017 09:09 AM Mar 22,2017 12:15 PM Angular 5
loading
Tags: ejTab
Me
Asked On February 22, 2017 09:09 AM

Hey,

How to force tab content to use full height? At the moment it uses only a bit (purple color) and heightAdjustMode has no effect at all. I'm using splitter, lightBlue color represents splitter right content. As you can see it uses full available width and height, so I assume that tab component with heightAdjustMode set to Fill should see parent height/width? What I'm doing wrong?


Karthikeyan Viswanathan [Syncfusion]
Replied On February 23, 2017 03:44 AM

Hi Me,    
    
Thanks for contacting Syncfusion Support.    
   
Splitter within Tab control will be rendered initially. So, Tab control doesn’t take a proper height for parent element. You can resolve this issue by setting the heightAdjustMode in splitter create event. Please find the below code snippet:   
   
<code>   
   
<ej-splitter height="400" width="50%" orientation="horizontal" style="display:block; margin: 0 auto;" (create)="tabcreate($event)">   
        <div>   
           <div class="content"> Pane 1 created </div>   
        </div>   
        <div>   
            <ej-tab  id= "tab" [showCloseButton]="true">   
</ej-tab>    
        </div>   
    </ej-splitter>   
   
   
</code>   
<code>   
   tabcreate(args){   
  var inst = jQuery("#tab").ejTab("instance");   
  inst.option("heightAdjustMode","fill");   
    }   
</code>   
   

Regards,
Karthikeyan V.


Me
Replied On February 23, 2017 05:11 AM

Your solution does work, but it won't resize if window size has changed. How can I achieve that?  Moreover, if I have ejTab wrapped into angular component, when I should call that instance, in which lifecycle? (Looks like none of them works or has no effect, only after splitter creation it does work)

Karthikeyan Viswanathan [Syncfusion]
Replied On February 26, 2017 04:19 AM

Hi Me 
 
Tab control heightAdjustMode property assigned a pixel based on parent element. Splitter control within Tab doesn’t take corresponding parent height. Split pane will be create after Tab rendered. You can use _refresh private method to refresh the tab control when splitter resize and create event. Please find the code snippet: 
 
<code> 
 
<ej-splitter orientation="horizontal" height="400" [isResponsive]="true" (create)="splitterresize($event)" (resize)="splitterresize($event)"> 
 
             <div>    
           <div class="content"> Pane 1 created </div>    
        </div>    
        <div>    
            <ej-tab  id= "tab" [showCloseButton]="true" width="100%" heightAdjustMode="fill"> 
</ej-tab>     
        </div>    
    </ej-splitter> 
 
 
 
</code> 
<code> 
 
splitterresize(args){ 
      var inst = jQuery("#tab").ejTab("instance"); 
      inst._refresh(); 
    } 
 
</code> 
 
 
 
   
Regards,  
Karthikeyan V.  


Me
Replied On March 21, 2017 10:40 AM

Hi again,

Your solution works, but I have something a bit more complicated now: ejTab is wrapped into myTabComponent and your solution is not working anymore as ejTab component is created too late. Any hints?

<code>   
   
<ej-splitter height="400" width="50%" orientation="horizontal" style="display:block; margin: 0 auto;" (create)="tabcreate($event)">   
        <div>   
           <div class="content"> Pane 1 created </div>   
        </div>   
        <div>   
            <myTabComponent></myTabComponent>  
</ej-tab>    
        </div>   
    </ej-splitter>   
   
   
</code> 
@Component({
  selector: 'myTabComponent',
  template: `<ej-tab  id= "tab" [showCloseButton]="true></ej-tab>`

})

export class MyTabComponentComponent { }



Gopi Govindasamy [Syncfusion]
Replied On March 22, 2017 12:15 PM

Hi Me, 
 
We have prepared sample based on your requirement for multiple components in angular2. In the below sample tab heightadjustmode(“heightadjustmode:fill”) property not working, because the template (“<tab-component></tab-component>”) tag added extra. So We have find the parent control height minus tab control ul element height and set the height to tab content panel. Now tab control rendered fully based on parent control. We have attached code snippet and sample below link.  
 
  <ej-splitter id="splitter" orientation="horizontal" height="100%" [isResponsive]="true" > 
        <div> 
           <div class="content"> Pane 1 created </div> 
        </div> 
        <div> 
        <tab-component></tab-component>  
        </div> 
    </ej-splitter> 
 
export class TabComponent {   
     splitterresize(args){ 
      debugger 
      var inst = jQuery("#tab").ejTab("instance"); 
      var height=$(". ").height()-$('.e-tab ul').height() 
     $(inst.contentPanels).css('height', height); 
    } 
} 
 
 
 
Regards, 
Gopi G. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;