Theme 25 Responsive Grid Column Visualization

-
I have written a small CSS script that enables you to visualize the 12 column responsive grid in Oracle Application Express’s Theme 25. I used it during my presentation at KScope 13. You can download the CSS file here. Install the file on your webserver or upload it into your workspace and reference the file in your page template or page. You could reference the file directly from my server too using

<link rel="stylesheet" href="http://www.themes4apex.com/blog/grid_background.css" type="text/css">

 in your template, or just as URL in the template or page’s CSS URLs property.

(I uploaded an enhanced version of the CSS after the suggestion from Patrick Wolf, to only show the grid columns when the developer clicks the "Show Grid" option in the Developer Toolbar. Thanks, Patrick. I should have thought of this myself.)


grid-background

themes4apex

Comments

  1. Patrick WolfSeptember 30, 2013 at 1:02 PM

    Hi Christian,

    very nice! BTW, did you have a look at the "JavaScript Debug Code" in "Grid Layout" of the page template? The existing JS code currently sets the CSS class "showGrid" if a developer clicks the "Show Grid" option in the Developer Toolbar. This has the advantage that the grid will only be visible if the developer actually wants to see it. So you might want to change your CSS file to apply your styles to that showGrid CSS class.

    Regards
    Patrick

    ReplyDelete
    Replies
    1. Christian Rokitta ♠September 30, 2013 at 1:49 PM

      Hi Patrick,

      You are absolutely right. I changed the CSS selector to:

      #uBodyContainer>div>div.showGrid

      Like this, the grid columns only will be displayed with the "Show Grid"option enabled and for the content container only. Otherwise the header/tab design gets messed up.

      Thanks for your suggestion.

      Regards,
      Christian

      Delete
  2. Anantha NarayananOctober 18, 2013 at 5:16 PM

    Very nice one. Thanks

    ReplyDelete
  3. JoostMarch 27, 2014 at 11:17 AM

    Hi Christian,

    The images for the 1900px and de 2540px are the wrong size. I have recreated them:

    @media screen and (min-width: 1900px) {
    #uBodyContainer>div>div.showGrid {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ0AAAABCAMAAADzXFzcAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURf+ls////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANt2v0AAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjA76PVpAAAAE0lEQVQYV2NgBAOGwQZAjmJkBAAEUgAN8Twv+wAAAABJRU5ErkJggg==) !important;}
    }

    @media screen and (min-width: 2540px) {
    #uBodyContainer>div>div.showGrid {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMwAAAABCAMAAAClirGqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURf+ls////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANt2v0AAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjA76PVpAAAAE0lEQVQYV2NgBAOGIQ5AfmBkBAAFmwAN8XvDGwAAAABJRU5ErkJggg==) !important;}
    }

    ReplyDelete
    Replies
    1. Christian Rokitta ♠March 27, 2014 at 11:31 AM

      Hi Joost,

      Thanks a lot. You are a lucky person to have such large displays available to work with. I'll update my CSS file as soon as possible.

      Cheers,
      Christian

      Delete
  4. JoostMarch 27, 2014 at 12:12 PM

    Hi Christian,

    I am using regions with a background color. To see the grid through the background of these regions I added the following CSS:

    #uBodyContainer>div>div.showGrid section.uRegion{
    opacity:0.90;
    }

    Cheers,
    Joost

    ReplyDelete
  5. JoostMarch 27, 2014 at 12:29 PM

    Hi Christian,

    In Application Express 4.2.3.00.08 the "Show Grid" button is only working when there is a region with a custom span.

    (In the page template there is a "Javascript Debug Code" section. This code is only apearing in the source of the page if there is a region with a custom span. Bug?)

    So to use the grid I have added the code to a custom javascript which is included in de page template

    $(function() { //On document read
    apex.jQuery(document)
    .on("apex-devbar-grid-debug-on", showGrid)
    .on("apex-devbar-grid-debug-off", hideGrid);
    })

    Cheers,
    Joost

    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