Tabstrip borders troubles

[Sven]

So I've searched the forums down to page 7 .. sorry if I missed this being answered already.

I have a page in my app that I extended with a tabstrip. So far it it works - displaying what was formerly "there" in one of the tabs, second tab comes later.

My problem comes when dealing with the css surrounding tabstrips.

The tabstrip I first built shows the content that was already there - meaning 2 floated fieldsets containing a grid each. This seems to work "right out of the box" .. but when I look at my page in chrome (current version), I see a nice beautiful frame around the second tab (just a text replacement for the future content, which will also be 2 fieldsets containing a grid each).

Now my first tab shows only a small part of said "beautiful border". The border vanished as soon as I made those fieldsets float right next to each other (float: left; with a definded width). When I inspect the page with firebug or developer console the div created by tabstrip "ends" exactly where the fieldsets start (y-coordinate) hence the border is missing it seems.

Can you give me some hints how I can extend the div to surround the fieldsets (both have exactly the same height..) ?

 

[Neli]

Hi Sven,

From the provided information I am not sure I understand the issue correctly. Do you need to set the same height and width for all content elements of the TabStrip? If this is the case you use the .k-tabstrip-content class and apply the needed styles. In the Dojo linked here, there is a TabStrip that contains a Grid in each tab. The height of each content is the same using the following style:

 <style>
      .k-tabstrip-content{
        height: 300px !important;
      }
    </style>

As you will see in the Dojo linked above there are no unexpected borders rendered after switching between the tabs. 

If the above does not help resolve the issue could you please elaborate a little bit more on the configuration on your side? I will appreciate it if you could modify the Dojo example to replicate the appearance the way it is on your end and send it back for a review so we could take a closer look.

Looking forward to your reply.

Regards,

Neli

[Sven]

Thanks for your reply, Neli

 

but your css / code sample doesn't solve my problem.
Whether I use your css or without it, the visible content frame is always only like 7 px in height - at least that is where the border is drawn. 

The <fieldset> contained in both divs is displayed , but without the nice little border.

I assume this happens because at some other location in one of the css-files a matching css-selector gets implemented that forces the visuals I see. As such I'm not able to modify the dojo to make it look like "now" because I simply don't what could cause it.

I'm going to dig through the css-files and hope to find the offending css-stuff ...

 

found my problem and solution ...

div.k-content.k-state-active {
    display:inline-block !important;
}
.k-tabstrip-content {
    height: 280px !important;
    width: 1730px !important;
}

the inline-block did the "last" trick..

thanks for pointing me in the right direction

 

[Neli]

Hi Sven,

I am glad to hear you have managed to find a solution to the issue and thank you for sharing it with the community. I am sure it will be helpful to the other users in the forum.

Regards,

Neli