cancel
Showing results for 
Search instead for 
Did you mean: 

Text of Icon Tab Filter is not displaying fully

nandishm
Participant
0 Kudos

Hi

I have used Icon tab filter in one of my view.

Text on Icon Tab filter is little bit lengthy, Only half is displaying is there any way to display fully

I have just used below code in view

<IconTabFilter icon="sap-icon://contacts" key="Visa" text="Visa and Insurance" id="IdIconTabFilter03" design="Vertical">

Its only displaying "Visa and Ins.."

Is any property to display full text

See attached screenshot for more details .

Accepted Solutions (0)

Answers (3)

Answers (3)

Private_Member_15166
Active Contributor

Hi,

Change this attribute in your CSS.

Click on text of your tab.

you will see a CSS like this in your chrome.

.sapMITBFilter .sapMITBText {

    position: relative;

    color: #666666;

    text-shadow: 0 0.0625rem 0 rgba(255,255,255,0.5);

    padding: 0.7rem 0.5rem 0.8rem;

    line-height: 0.9375rem;

    overflow: hidden;

    text-overflow: ellipsis;

    word-wrap: break-word;

    word-wrap: break-word;

    word-break: break-all;

}

Remove width from here and now you will be able to see the full text.

Regards

Dhananjay

Former Member
0 Kudos

Thanks. It worked.

Private_Member_15166
Active Contributor
0 Kudos

Hi,

Customize your CSS.

Go through this document(Method 3) and do the changes in your app.

Check for the attribute first as suggested by .

Regards

Dhananjay

santhu_gowdaz
Active Contributor
0 Kudos

You using class in IconTabBar,

<IconTabBar
  id="idIconTabBar"
  select="handleIconTabBarSelect"
  class="sapUiResponsiveContentPadding">.

former_member9607
Active Participant
0 Kudos

Hi Nandish,

You can also create a custom css class and apply it to your IconTabFilter.

Choose any one of the CSS attributes. "text-wrap:normal" or "word-wrap:break-word"

Rg,

KK