Tuesday, August 12, 2014

Telerik Rad Tab cutoff issue





vs









There is a known limitation of RadTabStrip's overlapping tabs rendering. Since parts of the tabs are rendered inside the next/previous tabs. What can be done with a custom skin if the overlapping effect is done with changing the selected tab position to relative in order to get it on top. This however will have some undesired issues in IE6/7 if RadTabStrip is placed in a scrolling container without set position: relative.
I managed a solution to this issue through a simple CSS which handles the tabs to their desired width and wrap where necessary -

 .rtsLI,  
 .rtsLink,  
 .rtsLast,  
 .rtsFirst,  
 .rtsAfter,  
 .rtsOut,  
 .rtsIn  
 {  
        width: auto !important;  
 }  

Add above code anywhere inside the <style> tag or in any of your CSS file that you are using on the site with tab cutoff issue.
I hope this helps many of you facing same issue.

No comments:

Post a Comment