TabStrip does not work with float

[Chris]

How can you have two columns of content inside of one tab in a tabstrip?

Float - breaks the tabstrip control (the red box surrounding the tab closes and your content appears below it).

Inline container of block elements - This technique inside of a tab simply puts all to block.

You can see the problem by simply adding html elements to the sample.

UPDATE:  SOLVED.

I discovered that this, amongst other problems with the tabcontrol go away once you set the height.
You must set the height of tab for each tab seperately in the tabcontrol (note: you should also set the height of grid if using grid control) controls in order for the inner contents to render properly.

[Dimo]

Hi Chris,

Based on the provided information, I suspect the problem is caused by incorrect float styles setup, namely, lack of float clearing styles. This causes the TabStrip content containers to collapse, as floated elements do not expand their parents.

Setting a height to these containers hides the problem, but does not really resolve it. I recommend you to get familiar with float clearing techniques.

Regards,
Dimo
the Telerik team

[Chris]

Dimo - Thank you for replying and for providing that link. It was a good read.

However, the issue continues to occur as long as I do not provide an absolute height for each tab.
(float, inline-block, tables, whatever alignment of controls inside the tab control is now fine, so long as you have the height set big enough to fit all of the controls).
As with the grid, the tab-strip appears only to work if the height is specified (does not grow to fit the content).

That said, I am OK with this as it is sufficient for my solution.

[Dimo]

Hi Chris,

You can make a simple test - move the widgets and elements, which are now in a TabStrip content <div> to another regular <div> element, which is not related to Kendo UI. Set a visible border to that <div> and no height. If the same problem occurs, then there is still some uncleared float.

Regards,
Dimo
the Telerik team

[Chris]

What an excellent debugging tip for page alignment!
I rarely use the css borders on divs so I did not think of temporarily doing it to see what my divs are really doing.
I will use this technique elsewhere now as well :)

Have a good one
-Chris.

[james]

That is an excellent article on clearing floats, and following the advice in there fixed my problem where I also had 2 floating columns which appeared outside the tabstrip box. I just added <div style="clear: both;"></div> after my floating column divs and all was fine.

[Michael]

@Dimo: You didn't specify where the "clearfix" should go. I still have this same problem, and I have tried clearing in a bunch of places to no avail. So, can you please tell me where the clearfix div or whatever should go (my tabstrip below)? Thanks.

<script id="detailTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
        .Name("tabstrip_#=TaskID#")
        .SelectedIndex(0)
        .Items(items =>
            {
                items.Add().Text("Task Details").Content(@<text>
                    <dl style="float:left;">
                        <dt>Task ID:</dt><dd>#= TaskID #</dd>
                        <dt>Title:</dt><dd>#= TaskShortDesc #</dd>
                        <dt>Type:</dt><dd>#= TaskTypeDesc #</dd>
                    </dl>
                    <dl style="float:left;padding-left:20px;">
                        <dt>Status:</dt><dd>#= TaskStatusDesc #</dd>
                        <dt>Priority:</dt><dd>#= PriorityDesc #</dd>
                    </dl>
                </text>);
            }).ToClientTemplate()
    )
</script>

[Dimo]

Hi Michael,

Yes, I did not provide specific instructions or a copy-paste solution for several reasons -

+ I was not aware of the exact layout implementation
+ there are at least four different methods to clear floats, so the exact approach depends on the developer preferences
+ supporting scenarios, which require general knowledge and are unrelated to Kendo UI, falls in the scope of our premium support service

To simplify things, I suggest you the following - clear the float in the following jsFiddle, so that the red container expands and encloses the blue containers. If you do that successfully, but have troubles integrating the implemented approach in the Kendo UI TabStrip, let me know and I will help you do that.

http://jsfiddle.net/dimodi/qjmdh/

Regards,
Dimo
Telerik

[Michael]

@Dimo: Thank you for the reply. Yes, I'm aware of the various float clearing methods, but I was trying to figure our what the "wrapper" div was (i.e. the tabstrip) to apply the built-in "clearfix" class, but I couldn't figure it out. No worry though, I just added the standard blank clear div at the end and it works.