Tab Header glitch

[Andrea Perazzolo]

Hi,

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.

$("#taskorderlist").ejTab({
    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;
            return;
        }
        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) {
        alert("error");
    })
    .always(function () {
        //alert("finished");
    });
 
    }
 
});

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 13.1.0.21

    Thanks in advance

   Andrea Perazzolo

Attachment: Pioneer_cc986fe.zip

[Sasikala Nagarajan]

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.

Sample

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

Regards,

Sasikala Nagarajan

[Andrea Perazzolo]

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]

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

Sample

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.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,

Sasikala Nagarajan