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.
Syncfusion Feedback

Tab content full height

Thread ID:

Created:

Updated:

Platform:

Replies:

129030 Feb 22,2017 02:09 PM UTC Mar 22,2017 04:15 PM UTC Angular 5
loading
Tags: ejTab
Me
Asked On February 22, 2017 02:09 PM UTC

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 08:44 AM UTC

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 10:11 AM UTC

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 09:19 AM UTC

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 02:40 PM UTC

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 04:15 PM UTC

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.

Warning Icon 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.Close Icon

;