Use 100% of height for tabs

[Developer]

I have modified your sample from your homepage a little bit.(http://jsplayground.syncfusion.com/ouglwip1)

In my new sample the background of the outer tab div is blue.

The background of the tools div is red.

I want to set the height of the red tools div to 100% of the free space of the outer div.

Is this possible with simple settings? e.g. heightAdjustMode: "fill"

Or have i todo more to set the height of the single tabs?

Greetings

Michael

Attachment: tabSample_5729c171.zip

[Prince Oliver]

Hi Michael, 

Thank you for contacting Syncfusion support. 

Yes, setting the heightAdjustMode to "fill" will set the tab content height to the parent element height. In the provided sample, parent element has to height set to it, so the height is not calculated for the tab item and default height it set. So, make sure that the parent element has static height set for the heightAdjusttMode to work. We have attached the modified sample for your reference, please find the sample at the following location: http://jsplayground.syncfusion.com/owzhqwf0 

Please let us know if you require any further assistance on this. 

Regards, 

Prince 

[Developer]

Thank you for your informations.

Then i think my problem is, that i would not set a static size to the parent div.

I would like to show the tab item in full browser window size.

Am i right that i have to do more coding to get a dynamically tabitem when i have no static parent size. (Listen to the events for oncreate and resize and set tabitem height to tab parent height without the height of the tab header)

Use of dynamic parent size can't be done by setting some simple properties?

Regards,

Michael

[Prince Oliver]

Hi Michael, 

Thank you for your update. 

Based on your requirement, we have got the document height and set the height to the container element in the initial load. Now when we resize window, it takes the document height and changes the container element accordingly. So there is no need to set static height for tab parent. Please refer to the following code snippet.  

 

<script> 

$(function () { 

    document.getElementById('containerEle').style.height = $(document).height().toString() + 'px'; 

    $( window ).resize(function() {  

        document.getElementById('containerEle').style.height = $(document).height().toString() + 'px'; 

    }); 

    $("#eventTab").ejTab({heightAdjustMode: "fill"});   

}); 

</script> 

 

Kindly refer to the following sample link: http://jsplayground.syncfusion.com/fr1sdrer  

 

Regards,
Prince 

[Developer]

Thank you for the sample.

I think instead of  ... = $(document).height; the better working for me solution is ... =$(window).height;

But it worked only in your sample and not in my environment.

The problem in my case is that i add the tabitems dynamically.

I have attached a sample based on your sample with a button to add a new tab item with the additem function.

If you click the button the tabitem will be added correct, but if i click the new tabitem i think i have two problems.

First problem: (Only in sample environment because of position:absolute at tab parent)

The tab moves in the next line but it would be enough space to show the tab in the current line. If i select an other tabitem all tabitems will be shown correct in one line.

Second problem:

The new tabitem content doesn't fill the tab parent content. The initial inserted tabitems work as expected.

Is it possible to refresh the tabs to get a correct behavior?

Regards

Michael

Attachment: dynTabSample_4bdfc601.zip

[Prince Oliver]

Hi Michael, 

Thank you for your update. 

For problem 1: 

The problem occurs due to the absolute positioned element. By default, absolute element without any content cannot set height inside the division and the height is auto. So, setting the content for all tab item will resolve the issue. We have prepared sample for your reference.  

Sample Link: https://jsplayground.syncfusion.com/n1cbnklt  

For problem 2: 

 

We have considered this as a bug in our end. The fix for the issue will be included in our upcoming Volume 3 SP 1 release. 

Please let us know if you require any further assistance on this. 

Regards, 

Prince