Question Re: CSS for IconTabBar in Technology Q&A

CSS for IconTabBar

Former Member — Tue, 05 Mar 2019 08:51:17 GMT

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

Re: CSS for IconTabBar

Fabrice — Tue, 05 Mar 2019 08:57:15 GMT

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

Re: CSS for IconTabBar

Former Member — Tue, 05 Mar 2019 09:08:52 GMT

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!

Re: CSS for IconTabBar

Fabrice — Tue, 05 Mar 2019 09:15:47 GMT

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"
>

Re: CSS for IconTabBar

Former Member — Tue, 05 Mar 2019 14:05:35 GMT

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.

Re: CSS for IconTabBar

RaviKant_Ranjan — Tue, 05 Mar 2019 14:31:55 GMT

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