Materialize: Active tab indicator isn't displayed if tab panel was initially hidden
Suppose, we have a tab panel that is placed inside a container with display: none. The tab panel is initialized with $('ul.tabs').tabs();. Then we change container style to display: block.
Expected Behavior
It's expected for me that active tab should be marked with indicator.
Current Behavior
But it's not. The indicator appears only when we click on any tab or resize browser window.
Possible Solution
It looks like indicator is intentionally initialized with nonzero width only when tab panel is visible (here). I suppose it's required for something, but the result looks counterintuitive for me.
Environment
- Version used: 0.99.0
- Codepen: https://codepen.io/anon/pen/EXLxxV
flipp5b
All 2 comments
Yes, i also faced this issue, there are 2 solutions:
1- Create a callback for the showing of the container of the tabs (the element that is hidden), and in that callback, re-initialize the tabs (for example, if the parent element is a modal, you can use the built-in modal complete callback).
2- Hide Materialize's standard tab indicator manually in your CSS, and then edit the .tab.active class so that it has a border-bottom that replaces the tab indicator, if you go this way, you will lose Materialize's nice tab changing animation, but if you try a bit hard you should be able to replicate it. Or you just create another simple animation like i did (a combination of scaling and skewing on active, it looks great).
And this issue is a duplicate of another issue i have seen a hundred times over the past few months.
doubleOrt
on 3 Jul 2017
tomscholz
on 4 Jul 2017
Related issues
artur99
路
3Comments
lpgeiger
路
3Comments
SoproniOli713
路
3Comments
serkandurusoy
路
3Comments
alexknipfer
路
3Comments
Most helpful comment
Yes, i also faced this issue, there are 2 solutions:
1- Create a callback for the showing of the container of the tabs (the element that is hidden), and in that callback, re-initialize the tabs (for example, if the parent element is a modal, you can use the built-in modal
completecallback).2- Hide Materialize's standard tab indicator manually in your CSS, and then edit the
.tab.activeclass so that it has aborder-bottomthat replaces the tab indicator, if you go this way, you will lose Materialize's nice tab changing animation, but if you try a bit hard you should be able to replicate it. Or you just create another simple animation like i did (a combination of scaling and skewing on active, it looks great).And this issue is a duplicate of another issue i have seen a hundred times over the past few months.