How to make text appear fully in IconTabBar?

问题

I am using IconTabBar in my application and the text (heading for the tab) is not displaying fully. Half of the text gets cut.

<IconTabBar class="sapUiResponsiveContentPadding">
  <items>
    <IconTabFilter
      icon="sap-icon://approvals"
      text="Set Values for Mass Change" design="Horizontal"
    >
      <mvc:XMLView viewName="abc.view.selectionPage"/>
    </IconTabFilter>
    <IconTabSeparator icon="sap-icon://open-command-field"/>
  </items>
</IconTabBar>

So here the text, which should be "Set Values for Mass Change", is output as "Set Values for Mass..."

回答1:

The text is cut in half due to two properties set in the classes :

sapMITBHorizontalWrapper ( for the Wrapper Div) and
sapMITBHorizontal.sapMITBFilter>.sapMITBHorizontalWrapper>.sapMITBText ( Max-width for the displayed Text )

Here, max-width is set to 7.5rem and text-overflow is set to : ellipsis.

Somehow, its not possible to add a class to IconTabFilter (bad) but you can add class to IconTabBar. So, to solve this I've increased the max-width to 10rem. You can increase and decrease max-width to suit your requirements.

Below is the css code:

.myWidth .sapMITBHorizontalWrapper {
    max-width: 10rem;
}

.myWidth .sapMITBHorizontal.sapMITBFilter>.sapMITBHorizontalWrapper>.sapMITBText {
    max-width: 10rem;
}

View:

<IconTabBar class="sapUiResponsiveContentPadding myWidth">
                    <items>
                        <IconTabFilter id='myId' icon="sap-icon://approvals" class='' text="Set Values for Mass Change" design="Horizontal">
                           <!--  <mvc:XMLView viewName="abc.view.selectionPage"/> -->
                        </IconTabFilter>
                        <IconTabSeparator icon="sap-icon://open-command-field"/>
                         <IconTabFilter  icon="sap-icon://approvals" class='' text="Short Text" design="Horizontal">
                           <!--  <mvc:XMLView viewName="abc.view.selectionPage"/> -->
                        </IconTabFilter>
                        <IconTabFilter  icon="sap-icon://approvals" class='' text="Shorter" design="Horizontal">
                           <!--  <mvc:XMLView viewName="abc.view.selectionPage"/> -->
                        </IconTabFilter>

                        <IconTabFilter  icon="sap-icon://approvals" class='' text="This is a Big text." design="Horizontal">
                           <!--  <mvc:XMLView viewName="abc.view.selectionPage"/> -->
                        </IconTabFilter>
                        <IconTabFilter  icon="sap-icon://approvals" class='' text="Lil" design="Horizontal">
                           <!--  <mvc:XMLView viewName="abc.view.selectionPage"/> -->
                        </IconTabFilter>
                    </items>
                </IconTabBar>

回答2:

If the text becomes too long, consider to display texts only aligning with Fiori Design Guidelines:

If your labels get truncated, consider using shorter labels or text tabs (without icons), as text tabs cannot get truncated. [source]

Internally, the IconTabHeader (the header control for IconTabBar) then applies the style class sapMITBTextOnly^src which excludes max-width.^src

<IconTabBar>
  <items>
    <IconTabFilter text="products" count="20"/>
    <IconTabFilter text="jkjlsdfjalkfak awfgvbf uwewrw fwkjfv dqw qlkwejqwklejdifsuvnvxdlcmeq" count="4"/>
    <!-- ... -->
  </items>
</IconTabBar>

Since the length is basically limitless, it's still recommended to ensure that the texts do not become too long.

回答3:

try below

.sapMITBFilter .sapMITBText {
  width: 10rem;
}

.sapMITBTab {
  width: 10rem;
}

来源：https://stackoverflow.com/questions/41423601/how-to-make-text-appear-fully-in-icontabbar

标签

sapui5