Skip to Content
Author's profile photo Uladzislau Pralat

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

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Marco Jehle
      Marco Jehle

      Would be nice to have this for Lumira 2.x CSS

      Author's profile photo Former Member
      Former Member

       

      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!
      Author's profile photo Dork Yark
      Dork Yark

      Css is the good option to make it more excellent [Spam removed by moderator]

      Author's profile photo sheryl brock
      sheryl brock

      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]

      Regards,

      Sherry