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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tab Header glitch

Thread ID:





119326 Jun 4,2015 10:01 AM UTC Jun 9,2015 12:13 PM UTC JavaScript 3
Tags: ejTab
Andrea Perazzolo
Asked On June 4, 2015 10:01 AM UTC

I am using a tab control with 2 levels as shown in the video attached.
The first level is  horizontal and the second level is vertical inside one specific tab.
The Header Heights are positioned to the left,
and done with this javascript.

    headerPosition: "left",
    heightAdjustMode : ej.Tab.HeightAdjustMode.Fill,
    heigth: "800px",
    showCloseButton: canDelete,
    beforeItemRemove: function(args) {
        var tabObj = $("#taskorderlist").data("ejTab");
        if (tabObj.getItemsCount() == 1) {
            args.cancel = true;
        if (!confirm("Do you want to delete the Task Order?"))
            args.cancel = true;
    itemRemove: function(args) {
        var model = args.model;
        var itemToRemove =  $(args.removedTab.find("a")[0]).attr("rel='nofollow' href").replace("#taskorder","");
        var objData = {
            idStudy: @(Model.Study.Id),
            idTaskOrder: itemToRemove
        var jqxhr = $.post("@Url.Action("DeleteTaskOrder")", objData)
    .done(function (data) {
        var tabObj = $("#taskorderlist").data("ejTab");
        if (tabObj.getItemsCount() == 1) {
            tabObj.showCloseButton = false;
    .fail(function (data) {
    .always(function () {

The result as shown in the video is that at first the header are more larger than when I clickon one of them, and then tey resize to the content.
Maybe there is something I am doing wrong.
This time I have used directly the javascript item and not the MVC Helpers
I'll add in the zip the pages.
Could you help me with this glitch?
The version used is the

    Thanks in advance

   Andrea Perazzolo

Attachment: Pioneer_cc986fe.zip

Sasikala Nagarajan [Syncfusion]
Replied On June 5, 2015 12:28 PM UTC

Hi Andrea,

We have analyzed your query. We are unable to reporoduce the reported issue in our side.This issue may be caused due to any css overriding (margin-top, line-height properity values may overrided).

We have prepared the simple sample based on your query.Please get the sample from below location.


Please check with the provided samples and let us know if it helps. If still you are facing the problem, please provide more details about the css that are using in your project or else reproduce the issue in given sample and revert us. This will be easy for us to provide the exact solution


Sasikala Nagarajan

Andrea Perazzolo
Replied On June 5, 2015 01:04 PM UTC

Following your example I moved the definition of the property headerPosition : "left" after the creation of the Tab (using the setmodel method).
The headers now displays correctly.
I have tried to leave the property  even in the first definition of the control, but in that case the headers have the height not set correctly.
Maybe the problem can be in the load of teh tabs that is defined in a Partial View

   Thanks for all

    Andrea Perazzolo

Sasikala Nagarajan [Syncfusion]
Replied On June 9, 2015 12:13 PM UTC

Hi Andrea

Thanks for the update,

We have analysed your query. In that sample, height adjust mode property is sets to fill. Height adjust mode “fill” is used to set the height of tab control based on its parent element height (consider parent element height as max height and render based on this height).

In that sample for inner tab the parent node is “Essential tools” (tab item of outer tab). So inner tab is rendered based on “Essential tools” tab item’s height and fill the control within that item.

If you want to set height of inner tab control based on the content of particular tab item then set height adjust mode property value as content.

We have prepared the sample based on this please get the sample from below location


Also, currently we have issue in “height” property of tab control. So we have consider this as an issue “height property is not working properly in tab control” and logged an issue report for this.

A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.



Sasikala Nagarajan


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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