Friday, October 18, 2013

Theme 25 Responsive Tabs Enhancement: CSS Patch

Theme 25 seems to be popular. I see a lot projects starting development with this theme. Not always because there is a need for enabling the application to be accessed on multiple different devices/screen resolutions, but because of the way you have more control of your region placement on the undelaying grid.
Apart from the grid, APEX/Theme 25 offers more responsive functionality, like form element/label adaption and the the responsive Interactive Report toolbar.
But there are components that are implemented less responsive, like the tab’s. Apart from the discussion, whether or not to use tabs, if you are using this (in my eyes convenient) feature, one would expect a user friendly responsive implementation of the tab’s.

A Little Bit Responsive

The way tab’s in Theme 25 currently react on smaller screens is: you have to scroll through the entries that are hidden outside your viewport.

Tab More Responsive

I wanted a different, more intuitive, yet still responsive implementation of the Theme 25 tabs, which is easy to implement in any application using the theme, even afterwards. The solution I came up with is, what I call, a CSS patch. Fortunately, Theme 25 is (almost) entirely based on CSS; no images involved for structural elements. By overwriting the theme’s CSS, I can change the visual layout, and in this case behavior of the tabs, when presented on smaller screens, using the same @media rule definitions as the Theme 25 responsive implementation.
This CSS patch transforms the tab’s into a drop down list on small screensizes. If the list/menu is closed, it shows the current tab’s name and an icon. Once tabbed, it opens and offers the whole list of tabs in the original sequence order, marking the current tab with an indicator:

How To Use

Step 1 - Download and include the CSS file in your page template

Download the CSS file here and copy it to a the location you prefer, either on the file system of your webserver or upload it into the workspace.

Step 2 - A little modification in your page template

Step 3 - A tiny modification in your standard tab sub template

Remove the href attribute from the Current Tab sub-template in your page templates Standard Tab Attribute setting. This is necessary, to prevent that the page is reloading as soon as you touch the responsive menu, which is showing the current tab entry.

Thanks! No problem. I demoed this at KScope last year, but I guess people will be interested in it anyway. Have a look at the reflow table solution I blogged about recently. Would fit nicely into your presentation too. This wasn't finished yet last year, so you still can have a primer on this.

See you in Seattle in two weeks. About the credits: no problem, I'll accept a beer from you, if you insist ;-)