CSS for IconTabBar

[#1]

Hi,

I would to add some custom CSS to change a few things in IconTabBar and basically to reduce the margin in the bottom.

XML View:

<IconTabBar id="SizeTabs">		   
       <items>		    		
         <IconTabFilter text="General" class="customStyle">

And on my CSS file:

.customStyle .sapMITBHead {	
     margin: 0;
}
.customStyle .sapUiMedia-Std-Phone .sapMITBHead {	
     margin: 0 !important;
}

And I call the CSS file from my index.html.

In general, it's working and the margin is really reduced but when I change it from desktop mode to mobile phone mode (with the mozilla debugging tools), it takes the default .sapUiMedia-Std-Phone .sapMITBHead class and for some reason I cannot overwrite it.

Any ideas of what I am doing wrong?

Thank you

[RaviKant_Ranjan]

IIiana, can you please share how your screen looks in desktop and mobile and how it is supposed to look.

[Fabrice]

Hi,

if you want to change the margin, i think it is better to use the SAP predefined classes

https://sapui5.hana.ondemand.com/#/topic/777168ffe8324873973151dae2356d1c

Regards

Fabrice

[Former Member]

Hi,

I am already using the sapUiSizeCompact class but it still remains a not-so-small margin and I think that the only way to reduce it, is through CSS. That's why I am trying this.

Thanks!

[Fabrice]

Hi,

there is classes to change directly the margin :

sapUiNoMargin, sapUiTinyMarginBottom,etc...

and you can use these on the IconTabBar. For exemple:

<IconTabBar 
  id="SizeTabs"
  class="sapUiTinyMarginBottom"
>	

[Former Member]

Hi,

I tried some different classes, but there still remains more space than I want. WIth CSS I have exactly what I want. My problem is to have it in both desktop and mobile phone mode.