cancel
Showing results for 
Search instead for 
Did you mean: 

css class for Tab strip in 1.6

shlomi_weiss2
Participant
0 Kudos

Hi guys

The tabStrip element in 1.6 m version looks a bit strainge

It headre area is very tall and I couldn't find how to change that via CSS or any other way

Please see in the attached screenshot

Any suggestions will be appreciated

Shlomi

Accepted Solutions (1)

Accepted Solutions (1)

0 Kudos

Hi Shiomi,

If you are using the 'm' version, try applying the below css code.

.sapMITBHead {

height: 60px!important;

}

Hope this solves your problem.

Regards

Krish

shlomi_weiss2
Participant
0 Kudos

Hi Krish

Sorry for the last response but the CSS code that you have suggested didn't change anything

Shlomi

0 Kudos

Hi Shlomi,

I tried to change the css like this and I was getting the header resized as given below:

Before applying css:

After applying css

And the css I used here is :

.sapMITBHead {
height: 40px!important;
}

.sapMITH {
height: 40px!important;
}

.sapMITBTab {
height: 0px!important;
}

Please try applying this css.

Regards

Krish

shlomi_weiss2
Participant
0 Kudos

Perfect Krish

It works

Thanks

Marked as right answer

Shlomi

Answers (3)

Answers (3)

shlomi_weiss2
Participant
0 Kudos

Hi guys

Thanks for the answers

I'm familiar with using F12 to check classes and elements, buy I couldn't find the right class and style to change in order to change the height of the header.

Sree,

I tried your suggestion, but it didn't help

I set the top margin of the tabStarip to 0 through the gui anyway.

It should be something within the tabStrip class itself



Thanks

Former Member
0 Kudos

Hi Shlomi,

I investigated as well and indeed the header of the tabstrip header has a height of a greater value than previously. This is because this is a "m" version of the component. unfortunately the application renders the value of the height directly in the HTML, so an easy css fix for this can't be developed.

My suggestion would be to bring the tabstrip component before other elements in the Outline space to create a "go to back" feature like in word or powerpoint. So other components can stay on top of those additional pixels.

Regards,

Bogdan

0 Kudos

Hi Shlomi

I didn't find any such behavior but try this css class in your application it may clear your problem.

.sapUiTabBarCnt

{

  margin-top: 0px !important;

}

Thanks,

Sree Sailesh

former_member194504
Active Contributor
0 Kudos

Hi sholmi,

Just run it on chrome browser and press F12. Then right click on the portion you want to know the class name then give inspect element. There you can find the class.

Thanks,

Nithyanandam