tab set - have one tab right-aligned?


Topic: tab set - have one tab right-aligned?

cdenby pro asked 4 months ago

Expected behavior I'd like to have 3 or 4 tabs aligned to the left normally and a single tab pushed to the right of the tab header. Actual behavior I have a workaround but it's not very elegant - see below. It uses a w-100 and then a negative top margin to lift the right tab upwards. Then I have to change the z-index so that the left-aligned tabs aren't underneath the right-aligned tab (which is 100% width).

Is there a better way to make this happen? Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/jquery/cdenby/2501542?action=forum_snippet Snippet


Krzysztof Wilk staff answered 4 months ago

Hi!

I made a snippet with a solution for you - https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/2504488?action=forum_snippet. All you have to do is add .ml-auto class to the first item you want to be on the right. You don't have to use your custom CSS or flexbox - this class will make it for you.

Best regards


cdenby pro answered 4 months ago

I think I just found the answer... If you add "flex-grow-1 text-right" classes to the right aligned tab, it takes up the remaining space and pushes the text to the right. It's close, anyway. The only concern is that it causes the tab itself to be really wide which looks strange when it is active. I've added this to the snippet


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.17.0
  • Device: PC
  • Browser: Chrome
  • OS: W10
  • Provided sample code: No
  • Provided link: Yes