Theme 25 Responsive Tabs Enhancement: CSS Patch

-

rwdtabs_titleTheme 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.
rwdtabs_scroll_horz

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:
rwdtabs_closed   rwdtabs_touch

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.
  • Reference the CSS file in your page template in the Cascading Style Sheet setting.
rwdtabs_pagetemplate

Step 2 - A little modification in your page template

Add (exactly) this DIV around the unnumbered list element in your page template Header Source:
rwdtabs_html
<div class=”rwdnav”>…</div>

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.
rwdtabs_href

Enjoy!

themes4apex400

Comments

  1. Ahmad MaryukiDecember 4, 2013 at 12:23 PM

    cool. thanks for tutor.

    ReplyDelete
  2. Pat MillerApril 2, 2014 at 5:01 PM

    Hi,
    Very nice! Exactly a solution I was looking for. Much easier to implement than other ones I have seen that require plugins etc.

    Thanks,
    Pat

    ReplyDelete
  3. UnknownJune 8, 2014 at 4:14 AM

    Beautiful! Nice and simple. I developed a js / css menu that is not any better than this, and is much more complicated.

    I am presenting at Kscope14 and would love to use this in place of my js menu. Would you mind if I used this code in my presentation?

    Obviously I would credit you as the source.

    ReplyDelete
    Replies
    1. Christian Rokitta ♠June 8, 2014 at 2:56 PM

      Hi John,

      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 ;-)

      Cheers,
      Christian

      Delete
    2. UnknownJune 10, 2014 at 4:33 PM

      I will gladly buy you a beer! Thanks!!!

      See you in Seattle.

      Delete
  4. UnknownAugust 11, 2014 at 8:23 PM

    Hi, this is a very good solution, unfortunately nav_imgemb.css patch seems to be unavailable.

    It will be repaired to download.

    Thanks,
    Jose Vergara

    ReplyDelete
  5. AndreAugust 12, 2014 at 6:24 PM

    hi, the file is not available for download anymore, how can I get the css?

    ReplyDelete
  6. Christian Rokitta ♠August 20, 2014 at 12:42 PM

    Hi Jose and André,

    The link was broken due to a server migration. I fixed the URL and the CSS is available for download again.

    Cheers,
    Christian

    ReplyDelete

Post a Comment

Popular posts from this blog

Remember Me - APEX Autologin

-
Image
I promised to publish about this subject to one of the attendees during my presentation at KScope 12 in San Antonio. I used this functionality in my demo application ( FifApex ) and it seems there is interest in how to do this. Most of the public websites like Facebook, LinkedIn, Twitter, Amazon or OTN do have it: an option to stay logged in, even if you closed the browser, so you do not have to authenticate each time you visit the site again. I’m pretty used to it and would be surprised if a website didn’t offer this convenient feature. OK, it’s not entirely secure, but, as I said, very convenient. I’m working on a “consumer” site/application, I’m building it with APEX and I want to offer this “remember me” option too. I knew an APEX based website that does offer this feature ( www.plsqlchallenge.com ) and I had a chat with the developer that implemented it’s login mechanism, Paul Broughton from Apex Evangelists . So, here my thanks to him for the original inspiration.   Or...
Read more

Dynamic Date Range in APEX Datepicker - no Plugin required

-
Image
The build in jQuery UI Datepicker of Application Express is a very versatile component and it is very easy to configure the basic settings with the Page Item properties. One of the properties you can set, is the range of selectable dates by entering a Minimum and Maximum Date value. The “syntax” of these values is based on the jQuery UI Datepicker components date format capabilities, so this might be looking a bit awkward to us Oracle folks at first sight. Next to giving a static value or one of these Datepicker calculations you can reference an APEX Page Item to set the range values, which is a nice thing as we are able to calculate a range dynamically, based on some database value/calculations. The bummer is: the calculation only gets executed during the rendering phase of the page and changing the referencing Page Item’s value won’t change the Datepicker range. What you really want (yes, you do), is to be able to reference Page Items to control the Minimum and Maximum Date dynamica...
Read more

Tabular Forms on Complex Views - using INSTEAD OF Triggers

-
Image
Creating tabular forms in Apex is relative straight forward. One gets fully generated, instant insert/update/delete functionality. Unfortunately (for the form developer), tables are usually part of a more or less complex data model, which is optimized for data storage, rather then for form-layout. Well, Apex offers some possibilities to the developer to enable tabular forms beyond 1:1 table based. Collections One alternative is to create your tabular form using the Apex Collection API. There is a good article on Martin Giffy D'Souza’s blog describing this technique. This collection-approach basically pre-fetches data into a (PL/SQL) collection from a query/cursor. The “collected” data will be displayed in the form. An on-submit page process will store the data submitted from the form into the collection. After this you can perform some validation before submitting the data to table(s) in an on-submit page process. Database Views Well, I favor an approach that keeps the...
Read more