Skip to Content

Enhance Tabstrip Component Look with Custom CSS

There are number of thing I do not like about default Tabstrip Component look:
1) Tabs headers are not standing out from tab panel content;
2) There is padding between tab border and tab content;
3) Tab panel background color does not fit into overall design;
4) Tab panel border is visible outlining empty space between tab panel border and tab panel content.
All above can be easily fixed using Custom CSS.

Here is how Tabstrip Component is displayed by default:

After applying Custom CSS the same application looks way better:

All it takes is upload following CSS Enhanced Tabstrip.css file into Business Objects Server


and assign it application properties

You must be Logged on to comment or reply to a post.

    I am trying to display Checkfront in a tab and wonder if anyone else has had this issue and knows how to fix it :) see: [spam removed by moderator]
    It works fine on Chrome and Safari / Mac and PC.
    In Firefox, the tab content is contracted (only about 25% height) and there is a scrollbar.
    Is there some way to FORCE the tab to display the dynamic content at 100% height with no scrollbar?
    I have tried overflow: hidden !important; but this doesn’t work.
    Any help appreciated!
  • This is great guide to use custom CSS in SAP. Thank you so much for sharing this kind of article. I’m also an author, So if you have some time then visit my blog. [Spam removed by moderator]