Tab content full height

[Me]

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]

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>   

   

Sample link: http://www.syncfusion.com/downloads/support/forum/129030/TABHEI~1-1709250252.ZIP    

Regards,
Karthikeyan V.

[Me]

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]

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> 

 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/tabresponsive1161945002.zip  

 

   

Regards,  

Karthikeyan V.  

[Me]

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]

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); 

    } 

} 

 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/175411/ze/tabmultiplecomponentwithsplitter-1103465279.zip 

 

Regards, 

Gopi G.