Perspective tabsSize dynamic width

image

I am wondering if there is a way to make tabs in Perspective automatically resize based on the length of the header name. My current tab group is 21 tabs long, and the tab names get cut short based on a static tabsize. I am new to perspective and can't find any helpful information on this.

If you use a view to render the tab, you can pass an individual width as part of the config object. This doesn't appear to be in the documentation, but is supported by the code. I'm not sure why you can't override an individual tab width with regular text rendering, but e.g. @victordcq might have a convenient way to hack in a width with CSS.

I solved it here before :slight_smile:
You can use the new css editor if you use the newest version too :wink:

[data-component="ia.container.tab"] .tab-menu .tab-menu-item { min-width: 6rem; max-width: 46rem; flex: 0 1 auto !important; }
2 Likes

image

Thanks for the tip with the CSS style. Doing this helped so that it doesn't all try to fit within the page. There is now a scroll bar, which is nice but it still doesn't allow for longer tab names to fit within the headers. They get cut off and still do not show the entire name. Do you know a way to adjust this or another workaround?

1 Like

What do you want to happen instead of a scrollbar?
a scroll over all the tabs?

[data-component="ia.container.tab"] .tab-menu .tab-menu-item { min-width: 6rem; max-width: 46rem; flex: 0 0 auto !important; }
image

1 Like

That one worked for me. Changing the flex property from 1 to 0 seemed to do it. Thanks!

2 Likes