Skip to Content

How to Include two different css styles in a single tab strip component

Hello SDN,

I have two Tab strip components in design studio,1st tab strip I want to apply two different css styles and in 2nd tab strip I want to keep default css.

To achieve this I created two different css styles for first and second tab strips and calls them respectively.

But in my 1st tab strip I want to change the background color of the selected tab and I know which css to use but how can i call both the css class on same component?

  • 1st tab strip

1. Increase the font size

. new1.sapUiTabStrip {border:solid 1px #96a8c3; font-f family:Tahoma,Arial,Helvetica,sans-serif; font-size:15px; -moz-box-sizing:border-box; - webkit-box-sizing:border-box;box-sizing:border-box; position:relative; }

2. Give a background color for select tab

.new13.sapUiTabSel{ background: #ffcc66; margin-right:15px; }

  • 2nd tab strip

Keep the default css style.

For the 1st tab strip if i call above css class "new1" then the font size is changing.

Along with that I want to change the background color of the selected tab.

So how can I include both the css styles in 1st tab strip component ?

Kindly advice.

Regards

Arjun KT


Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Jan 31, 2017 at 06:29 AM

    Hi,

    It is very simple. Try to use same class name for both(font size and background color changing) CSS.

    Please check the below CSS code,

    .new1.sapUiTabStrip {border:solid 1px #96a8c3; font-f family:Tahoma,Arial,Helvetica,sans-serif; font-size:15px; -moz-box-sizing:border-box; - webkit-box-sizing:border-box;box-sizing:border-box; position:relative; }

    .new1.sapUiTabSel{ background: #ffcc66; margin-right:15px; }

    Please let me know if you have issue.

    Regards,

    Vidhya.C

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 24, 2017 at 11:31 AM

    Hi Vidhya,

    Thank You for the reply.

    I tried it but not working and even if i give following css only that too not working in tab strip (with .new1 it is notworking).

    Looks like i need figure it out @ first.

    .new1.sapUiTabSel{ background: #ffcc66; margin-right:15px; }

    Regards

    Arjun KT

    Add comment
    10|10000 characters needed characters exceeded