Topic: tab-pane with tabs without a fixed height
ikan_nak priority asked 7 months ago
Expected behavior I have 2 tab panes that contain a c-detail-page-header component. One of these components is a default detail page header with a dynamic height, and the other component is a smaller version with a fixed height.
Actual behavior
The dynamic height tab doesn't render. I'd like it to render without it needing a fixed height.
Also, if possible I'd like to put the tabs below the tab container as we have in our current implementation using Dojo shown below, with the indicator that the tab is selected above the tab.
Note that in this case, it's not actually the content above the tab that gets swapped out: in our current dojo 1.16 project the tab content is actually static content that doesn't change when swapping tabs, and we overload the ContentPane loadContentsFunc() function for each separate tab to dynamically replace the content below the tabs with what we need instead of replacing the contents of the container the tab is connected to. this allows us to load in complex components like modals, selects and trees when needed instead of requiring them to be loaded and started on page load. I assume this will still be possible when using MDB, based on the mdb Tabs API, but if that's not the case, I would appreciate any advice on how to proceed.
Resources (screenshots, code snippets etc.)
Please find below a snippet showing the issue with the dynamic height tab not rendering.
https://mdbootstrap.com/snippets/standard/ikan_nak/6082577#css-tab-view
Kamila Pieńkowska staff answered 7 months ago
position: relative
in .c-detail-page-header__container
breaks styles needed for TABs to work properly.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: Desktop computer
- Browser: Edge
- OS: Windows 11
- Provided sample code: No
- Provided link: Yes