This is a migrated thread and some comments may be shown as answers.

RadTabStrip Liquid Tab Widths

4 Answers 197 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
jk
Top achievements
Rank 1
jk asked on 13 Jan 2012, 07:21 PM
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

4 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 17 Jan 2012, 05:10 PM
JK:

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!
0
Dimitar Terziev
Telerik team
answered on 18 Jan 2012, 01:45 PM
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
0
jk
Top achievements
Rank 1
answered on 03 Feb 2012, 03:56 PM
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
0
Jeanne
Top achievements
Rank 1
answered on 06 Feb 2013, 05:56 AM
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' );
  } );
} );
Tags
TabStrip
Asked by
jk
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Dimitar Terziev
Telerik team
jk
Top achievements
Rank 1
Jeanne
Top achievements
Rank 1
Share this question
or