TabStrip does not work with float

9 posts, 1 answers
  1. Chris
    Chris avatar
    22 posts
    Member since:
    Jun 2011

    Posted 06 Nov 2012 Link to this post

    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.


  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 07 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    22 posts
    Member since:
    Jun 2011

    Posted 08 Nov 2012 Link to this post

    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.
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 09 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Chris
    Chris avatar
    22 posts
    Member since:
    Jun 2011

    Posted 09 Nov 2012 Link to this post

    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.
  7. james
    james avatar
    1 posts
    Member since:
    Feb 2011

    Posted 04 Apr 2013 Link to this post

    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.
  8. Michael
    Michael avatar
    8 posts
    Member since:
    Jan 2009

    Posted 28 Aug 2013 Link to this post

    @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>
  9. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 29 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Michael
    Michael avatar
    8 posts
    Member since:
    Jan 2009

    Posted 29 Aug 2013 Link to this post

    @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.
Back to Top
Kendo UI is VS 2017 Ready