For a multiview using a tabbar at the bottom, there is only a thin colored line indicating which tab is the active one. This makes it hard to tell at a glance. It would be better if the inactive tabs could be dimmed or grayed it is easier to see which tab is the active tab.
If there is some css I can use, that would be helpful.
Daniel Ethier
There are no built-in style variants for tabs, though you can easily add your style to it like this: Code Snippet
That looks good. Thanks!
Is there also a way to remove the thin bar above the active tab? I think the combination of no line and dimmed inactive tabs may work best. Thanks!
Do you mean this line?
This is the overall tabbar border, so you’ll have to make the top border transparent (we do not advise to remove borders at all, because JS logic will not take that into account):
.webix_el_tabbar {
border-top-color: transparent;
}
Yes. Thanks! I will give that a try!
You are welcome. All in all, this white material skin allows for wide possibilities to coloring the UI. Sizing and positioning is not so easy at times, but changing colors is pretty easy indeed.
That actually didn’t do what I needed. I did find something that did though:
.webixtype_bottom .webix_item_tab.webix_selected { box-shadow: inset 0 2px transparent; }
.webixtype_bottom .webix_item_tab.webix_selected:focus { box-shadow: inset 0 2px transparent; }
Using both of those seems to do the trick.
Ah, so you wanted to remove the blue line? Yes, that’s the solution for this. I thought you were talking about the grey line (and removed it on the image).