search

Dogfalo / materialize

Materialize, a CSS Framework based on Material Design
https://materializecss.com
MIT License
38.87k stars 4.74k forks source link

How Can I Make the Scrollable Tab Width Adjust to the Text Content? #2795

Open masterpowers opened 8 years ago

masterpowers commented 8 years ago

I hope there is a way to avoid truncating the tab content/text/lable/title coz if the title in the tab is long it will truncate for example How to Order....

Instead i want the full text to show How to Order Online

Without Truncating the text... Is there a way to do this? Can Anyone share a trick to do this

pingec commented 8 years ago

Unfortunately I do not have a solution but I would like to say that this is indeed a problem. The scrollable tabs example on the demo page gives a false impression on how scrollable tabs work because all tab captions are relatively short and do not get truncated.

One dirty hack would be to change the min-width of a tab a a value that is large enough like so:

.tabs .tab {
  min-width: 250px;  
}

But then all tabs will have this large size which might not be optimal.

fega commented 7 years ago

I guess it should be added to follow the official guidelines, but not is in the way as @masterpowers proposed

https://material.io/guidelines/components/tabs.html#tabs-content