Topic: tab-pane with tabs without a fixed height

ikan_nak priority asked 2 weeks 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. enter image description here

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 2 weeks ago


position: relative in .c-detail-page-header__container breaks styles needed for TABs to work properly.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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
Tags