Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TabStrip > RadTabStrip Liquid Tab Widths

• jk

  Posted on Jan 13, 2012 (permalink)

  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

  Reply

• jumpstart Master

  Posted on Jan 17, 2012 (permalink)

  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!

  Reply


• Dimitar Terziev Dimitar Terziev

  Posted on Jan 18, 2012 (permalink)

  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

  Reply

• jk

  Posted on Feb 3, 2012 (permalink)

  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

  Attached files

  • tabsnorm.gif
  • tabsliquid.gif

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TabStrip > RadTabStrip Liquid Tab Widths