RadTabStrip Liquid Tab Widths

5 posts, 0 answers
  1. jk
    jk avatar
    4 posts
    Member since:
    Jul 2007

    Posted 13 Jan 2012 Link to this post

    Hello. I do not know if this is covered in any of your online documentation, but I could not find my answer anywhere on your site.

    I am trying to have "liquid" tab widths in our implementation of your RadTabStrip component (i.e., conforming ONLY to the width that the text in the tab takes up, so not a fixed width, but with the same padding, alignment, etc. for each tab) not utilizing the components pre-existing skins but utilizing a background image of our own creation. It seems like this liquid type of layout that expands or contracts based on text in the tab occurs automatically when using Telerik skins in the demos. What styling information do I have to give the tabs (either for the strip itslef and/or the <ul>, <li>, etc.) so that it can achieve this liquid width for each tab.

    Thank you for your prompt attention. jk
  2. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 17 Jan 2012 Link to this post


    The Adding Images to Tabs documentation states:
    Each RadTab has a set of properties you can use to add images to the tab. You can simply add a single image to each tab, or you can add separate images that reflect the state of the tab.

    The image appears to the left of the tab's text (unless you are using a right-to-left orientation, in which case it appear to the right of the tab's text). By setting the Text property to an empty string, you can create tabs that are labelled solely with images

    So, to use an image as abackground, it would need to include any required text.

    The "Appearance and Styling" folder of the RadTabStrip documentation includes all required resources, summarized on the Controlling Appearance page.

    Hope this helps!
  3. Dimitar Terziev
    Dimitar Terziev avatar
    1266 posts

    Posted 18 Jan 2012 Link to this post

    Hi James,

    You could also check the following forum thread discussing the possible approaches to define the width of the RadTabStrip tabs client-side.

    All the best,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  4. jk
    jk avatar
    4 posts
    Member since:
    Jul 2007

    Posted 03 Feb 2012 Link to this post

    jumpstart & Dimitar -- Thanks very much for your replies, although I don't know if I've described my issue accurately enough. Adding images to the tabs is indeed very basic, as is declaring fixed widths in CSS for the tabs themselves. No issues with adding a different background image, that done. My issue is that I don't want to set fixed widths, but have the widths be liquid-ly (!) determined based on the length of the text in each tab. This is a pretty conventional UI approach to components: ususally you have a left and right image to "bookend" your content and between them you place that content and simply use a 1-pixel wide image fill in behind however much space is taken up by the text. Is something like that possible? Note that I cannot use the RadTabStrip Item Builder for this project so I am trying to declare styles directly in code/CSS.

    I have attached a "normal" fixed width example and a preferred "liquid" wireframe example to this reply. Let me know if this makes more sense and if you have other suggestions. Thanks again for your replies. jk
  5. Jeanne
    Jeanne avatar
    58 posts
    Member since:
    Sep 2011

    Posted 05 Feb 2013 Link to this post

    This seems to work. Besides setting the left and right padding on the tabs to a smaller amount, for some reason it also makes the tabs width "liquid"

    $( 'document' ).ready( function () {
      $find('<%= rtsTabs.ClientID %>').get_tabs().forEach( function( oTab ) {
        $( oTab.get_element ).find( '.rtsLink' ).css( 'padding-left', '2px' ).find( '.rtsOut ').css( 'padding-right', '2px' );
      } );
    } );
Back to Top