F
Filament•12mo ago
neil.keena

Unwanted top padding on Tabs & Wizards in Minimal Theme

@Zep Fietje I'm noticing an odd issue with tabs and wizard steps when using the Minimal Theme. When you change tabs or move to the next step in the wizard, some padding or margin from the previous step is getting added to the top of the next tab or wizard. The problem seems to be the use of the invisible class. Changing invisible to hidden seems to fix the problem. I've included some screenshots of the wizard in my project so you can see the extra padding/margin that is being added. I added a top border and some additional padding to each step so you can see the issue more clearly.
No description
No description
No description
No description
Solution:
Thanks @Zep Fietje this has been fixed as of v3.2.2
Jump to solution
4 Replies
Zep Fietje
Zep Fietje•12mo ago
Thanks for reporting, @neil.keena! I can't reproduce the issue though. Are you sure this happens with just the Minimal Theme without your tweaks as well? If it's caused by your custom styling, be sure to add :not(.invisible). The invisible class is required in core for a couple of reasons Let me know if you do think it's caused by the theme though, then I can have another look
neil.keena
neil.keenaOP•12mo ago
Hey! Seems like it wasn't the invisible class. Sorry. I did confirm by disabling the minimal theme that everything works. The problem seems to be a 1.5 rem top margin that is applied to "contained" tabs. Here is the CSS that is being rendered in the theme.css. This is not my customization. I think it's either Filament core or Minimal Theme styling? 
.fi-fo-tabs.fi-contained .fi-fo-tabs-tab:not(.fi-fo-wizard-header-step-indicator){

    margin-top: 1.5rem;

    padding: 0px;
}
.fi-fo-tabs.fi-contained .fi-fo-tabs-tab:not(.fi-fo-wizard-header-step-indicator){

    margin-top: 1.5rem;

    padding: 0px;
}
When I explicitly use ->contained(false) on my tabs, I no longer get the extra margin. Should that be necessary? That doesn't seem right
Zep Fietje
Zep Fietje•12mo ago
Hmm the top margin is only applied on visible tabs in the theme Please DM me with the exact version of the theme you have installed the .fi-fo-wizard-header-step-indicator part here is weird as in the theme codebase it's .invisible
Solution
neil.keena
neil.keena•12mo ago
Thanks @Zep Fietje this has been fixed as of v3.2.2

Did you find this page helpful?