Topic: tab set - have one tab right-aligned?
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
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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.17.0
- Device: PC
- Browser: Chrome
- OS: W10
- Provided sample code: No
- Provided link: Yes