Changing the width of the tabs in Mobile theme

[Former Member]

Hello Experts,

In my application, I am trying to increase the width of tabs in the tab strip to make all the tabs of equal length. I am using an iPad layout with Mobile theme. By default, the width of each tab is automatically defined based on the text of the tab. In my case, I need to have fixed length for all the tabs, irrespective of their texts. I tried to add spaces in the tab text, but it didn't work.

Please advise if I can do this by using CSS code.I am attaching a screenshot of the tab strip for reference. Thanks in advance!

[Former Member · Accepted solution]

Hi,

You can adjust/add some new custom css to change the style of the tabstrip...

1. assign a custom css class to a tabstrip component in your design studio bi app (in this example the name of the css class is: tabstripMobileStyle1)

2. create a custom css file (if you do not have one yet) and add the following css to it

3. assign this custom css file to your design studio bi app (if not already done)

Tabstrip before custom css:

Tabstrip after custom css:

Not tested on a mobile device, but works on a desktop environment (IE10).

Regards,

David

[Former Member · Accepted solution]

Thank you David, this resolved my issue!

[TammyPowlas]

Take a look at this helpful work around by

[Former Member]

Hi Tammy,

Thank you for the response. The workaround mentioned is useful in the case of cross-tab when we are trying to change the width/formatting of result column, but I am trying to find out if there is a way to make all the tabs in the Tabstrip component of fixed width. Can you please provide more details on this if possible.

Thank you!