diff --git a/src/myfasthtml/assets/myfasthtml.css b/src/myfasthtml/assets/myfasthtml.css index a141178..b7e38d6 100644 --- a/src/myfasthtml/assets/myfasthtml.css +++ b/src/myfasthtml/assets/myfasthtml.css @@ -327,7 +327,7 @@ align-items: center; width: 100%; - overflow: hidden; /* important */ + /*overflow: hidden; important */ } /* Individual Tab Button using DaisyUI tab classes */ diff --git a/src/myfasthtml/controls/TabsManager.py b/src/myfasthtml/controls/TabsManager.py index 74f4499..6d42d7b 100644 --- a/src/myfasthtml/controls/TabsManager.py +++ b/src/myfasthtml/controls/TabsManager.py @@ -272,6 +272,30 @@ class TabsManager(MultipleInstance): None, True)) + def _mk_tabs_controller(self): + return Div( + Div(id=f"{self._id}-content-controller", data_active_tab=f"{self._state.active_tab}"), + Script(f'updateTabs("{self._id}-content-controller");'), + ) + + def _mk_tabs_header(self, oob=False): + # Create visible tab buttons + visible_tab_buttons = [ + self._mk_tab_button(tab_id, self._state.tabs[tab_id]) + for tab_id in self._state.tabs_order + if tab_id in self._state.tabs + ] + + header_content = [*visible_tab_buttons] + + return Div( + Div(*header_content, cls="mf-tabs-header", id=f"{self._id}-header"), + self._mk_show_tabs_menu(), + id=f"{self._id}-header-wrapper", + cls="mf-tabs-header-wrapper", + hx_swap_oob="true" if oob else None + ) + def _mk_tab_button(self, tab_id: str, tab_data: dict, in_dropdown: bool = False): """ Create a single tab button with its label and close button. @@ -306,38 +330,6 @@ class TabsManager(MultipleInstance): data_manager_id=self._id ) - def _mk_tabs_header(self, oob=False): - # Create visible tab buttons - visible_tab_buttons = [ - self._mk_tab_button(tab_id, self._state.tabs[tab_id]) - for tab_id in self._state.tabs_order - if tab_id in self._state.tabs - ] - - header_content = [*visible_tab_buttons] - - return Div( - Div(*header_content, cls="mf-tabs-header", id=f"{self._id}-header"), - self._mk_show_tabs_menu(), - id=f"{self._id}-header-wrapper", - cls="mf-tabs-header-wrapper", - hx_swap_oob="true" if oob else None - ), - - def _mk_tabs_controller(self): - return Div( - Div(id=f"{self._id}-content-controller", data_active_tab=f"{self._state.active_tab}"), - Script(f'updateTabs("{self._id}-content-controller");'), - ) - - def _mk_tab_content(self, tab_id: str, content): - is_active = tab_id == self._state.active_tab - return Div( - content if content else Div("No Content", cls="mf-empty-content"), - cls=f"mf-tab-content {'hidden' if not is_active else ''}", # ← ici - id=f"{self._id}-{tab_id}-content", - ) - def _mk_tab_content_wrapper(self): """ Create the active tab content area. @@ -357,6 +349,14 @@ class TabsManager(MultipleInstance): id=f"{self._id}-content-wrapper", ) + def _mk_tab_content(self, tab_id: str, content): + is_active = tab_id == self._state.active_tab + return Div( + content if content else Div("No Content", cls="mf-empty-content"), + cls=f"mf-tab-content {'hidden' if not is_active else ''}", # ← ici + id=f"{self._id}-{tab_id}-content", + ) + def _mk_show_tabs_menu(self): return Div( mk.icon(tabs24_regular, @@ -365,6 +365,8 @@ class TabsManager(MultipleInstance): role="button", cls="btn btn-xs"), Div( + Div("content"), + Div("content"), Div("content"), tabindex="-1", cls="dropdown-content menu w-52 rounded-box bg-base-300 shadow-xl"