Removing tab container

8 posts, 0 answers
  1. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 04 Jan 2012 Link to this post

    How does one go about removing the outer container that houses a tab control. I don't want it but don't know the right CSS property to change?

    By 'container', I mean the gray box with square corners like: http://demos.kendoui.com/web/tabstrip/api.html 

    Also, I'm trying to remove the left, right and bottom border from a selected tab (the border around the content housed within tab)
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 05 Jan 2012 Link to this post

    Hello Gabriel,

    Please use the following CSS rules to override the default TabStrip wrapper styles:

    div.k-tabstrip
    {
        background: none transparent;
        border-width: 0;
    }
     
    div.k-tabstrip .k-tabstrip-items
    {
        padding: 0;
    }
     
    div.k-tabstrip .k-content
    {
        margin: 0;
    }


    Greetings,
    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. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 05 Jan 2012 Link to this post

    Thanks.
  5. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 06 Jan 2012 Link to this post

    The answer you gave Dimo worked perfectly but I would like to go even further and remove the inner tab containers. The image here: http://imgur.com/4NX7J shows what I'm referring too.

    The top image is current, the bottom is what I'd like.
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Jan 2012 Link to this post

    Hello Gabriel,

    You can use:

    div.k-tabstrip  .k-content
    {
             border-width: 1px 0 0;
    }

    These customizations can easily be implemented if you inspect the TabStrip HTML output with Firebug and see which CSS rule is responsible for a given style. Then use a similar CSS rule (with higher specificity, e.g. add a "div" to the selector) to override it.

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 09 Jan 2012 Link to this post

    Thanks again Dimo - perfect.
  8. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 31 Mar 2015 Link to this post

    This no longer works.  As soon as you change tabs, the box comes back.
  9. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 31 Mar 2015 Link to this post

    Never mind, I worked it out:

    div.k-tabstrip:focus {box-shadow: none;}
Back to Top
Kendo UI is VS 2017 Ready