Friday, January 10, 2014

Full Screen Tabs Styles

When using the tabs widget as a top-level container — as in there's nothing else on the outside of the tabs — it's a "full-screen" widget. If you're using the tabs widget this way, you may want to strip away some of the style properties from the tab navigation. Especially if you have a background on your page - this way it gets through to the user better.

Here's what I did. I'm simply adding a new ui-tabs-fullscreen class to the element, which just overrides some background and border properties. I'm also removing the ui-corner-all class from the tabs navigation ul.