File Library


Common APEX Responsive Design Issues and How to Correct Them
Topic: Application Express
Owner: John Kozar
Date: 2014-05-27
Subtopic: Solutions

There are many tricky issues that pop up when developing responsive applications.

I am going to walk through how to deal with some of the common issues we have stumbled into during the course of our app development.

Obviously this is something Oracle is still coming to grips with and there are a few tricks of the trade that can help to make any responsive app smoother.

1. Laying out form elements side by side

I love that AEX has responsive temples built in. But we run into issues when we start trying to do some common form techniques. For example: laying out form elements side by side has some less then stellar results as you resize the screen. Commonly elements will overlap. I will teach you how to use templating to take back control and layout your forms however you like.


2. Creating Responsive Tables

Sometimes data is just plain long. And sometimes we don’t want an interactive report with a default view. Lets use a little JavaScript and templating to design a beautiful table that hides columns upon resize…as well as a dynamically generated lov that lets the user toggle columns at will.


3. Dealing with Responsive Menus

It’s not just me right? The tabbed menu structure is not exactly the perfect fit for responsive. Lets use a media querrie to build a nice looking LOV based menu that only shows the pages that respond.


4. How to write custom Media Querries when necessary

Sometimes we just need elements that are not “out of the box” APEX friendly. Lets dive in and actually see some custom media queries in action.


5. Why did my responsive template blow up when I added that extra container in the page template?

Lets make out page template bulletproof. I will teach you how to write HTML / CSS that is simple and responds. Sometimes you need to add extra elements and containers to really bring a design to life. I will teach you how to not get painted into the non-responsive corner.


Download File   jkozar.CommonAPEXResponsiveDesignIssues.presentation.pdf
Download File   Common.kozar-1.m4v

Become a member of ODTUG to gain access to more than 12,500 files in our technical database.

  • Not a member? Click through to the topic of interest to browse a list of available presentations.
  • Already a member? Log-in here to access the full database


Click here to see the Full Techincal Resource Database