that's not where

i want that!

Jorge Rimblas

@rimblas

enkitec.com

Enkitec

enkitec.com

@enkitec

We are an Oracle consulting partner

focused on the Oracle Tech Stack.

Platinum Level Partner

Enkitec. The Hands On Oracle Experts.

Oracle Application Development
Oracle Database Administration
Lab-based Education
Business Intelligence
Technology Stabilization
Ongoing Managed Services for Oracle Systems

Paella?

Recipe

Recipes & Techniques

anecdotes, not a single story

the goal

this is

how do i get more from apex

this is not

Mobile app How-To

Bleeding edge techniques

Secret Handshake
Responsive Design Tutorial

agenda

Items

The grid

Regions

Buttons

CSS

Some more CSS

Q&A

standard form wizard

Fields in one "column"

About the same length

We do have a grid:

table
div

emp

SQL> desc emp
Name             Type
---------------- ----------
EMPNO            NUMBER
ENAME            VARCHAR2(10)
JOB              VARCHAR2(9)
MGR              NUMBER
HIREDATE         DATE
SAL              NUMBER
COMM             NUMBER
DEPTNO           NUMBER

standard form wizard

begin on new line

APEX 4.1 and before

start new row

APEX 4.2 and beyond

first round

table grid

table for form elements

cell for label cell for item

cell for item buttons

width based on elements

Understand HTML Tables

HTML Elements:

table,
tr,
td

Attributes:
colspan and rowspan

something about tables

In a world of responsive designs and div layouts

they may be obsolete (for some uses)

However,
probably ALL your applications build before 4.1 use them

HTML Tables

<table>
<tr>
  <td> R1 C1 </td>
  <td> R1 C2 </td>
  <td> R1 C3 </td>
</tr>
<tr> ... R2 ... </tr>
<tr> ... R3 ... </tr>
</table>

R1 C1	R1 C2	R1 C3
R2 C1	R2 C2	R2 C3
R3 C1	R3 C2	R3 C3

HTML Tables

<table border="1">
<tr>
  <td> R1 C1 </td>
  <td> R1 C2 </td>
  <td> R1 C3 </td>
</tr>
<tr> ... R2 ... </tr>
<tr> ... R3 ... </tr>
</table>

R1 C1	R1 C2	R1 C3
R2 C1	R2 C2	R2 C3
R3 C1	R3 C2	R3 C3

HTML Tables

<table border="1">
<tr>
  <td>             R1 C1 </td>
  <td colspan="2"> R1 C2 </td>
  <td>             R1 C3 </td>
</tr>
<tr> ... R2 ... </tr>
<tr> ... R3 ... </tr>
</table>

R1 C1	R1 C2		R1 C3
R2 C1	R2 C2	R2 C3
R3 C1	R3 C2	R3 C3

HTML Tables

<table border="1">
<tr>
  <td>             R1 C1 </td>
  <td colspan="2"> R1 C2 </td>
</tr>
<tr> ... R2 ... </tr>
<tr> ... R3 ... </tr>
</table>

R1 C1	R1 C2
R2 C1	R2 C2	R2 C3
R3 C1	R3 C2	R3 C3

HTML Tables

<table border="1">
<tr>
  <td>             R1 C1 </td>
  <td colspan="2"> R1 C2 </td>
</tr>
<tr>
  <td rowspan="2"> R2 C1 </td>
  <td>             R2 C2 </td>
  <td>             R2 C3 </td>
<tr>... R3 ... </tr>
</table>

R1 C1	R1 C2
R2 C1	R2 C2	R2 C3
R2 C1	R3 C1	R3 C2	R3 C3

HTML Tables

<table border="1">
<tr>
  <td>             R1 C1 </td>
  <td colspan="2"> R1 C2 </td>
</tr>
<tr>
  <td rowspan="2"> R2 C1 </td>
  <td>             R2 C2 </td>
  <td>             R2 C3 </td>
<tr>... R3 ... </tr>
</table>

R1 C1	R1 C2
R2 C1	R2 C2	R2 C3
R2 C1	R3 C1	R3 C2	R3 C3

HTML Tables

<table border="1">
<tr>
  <td> R1 C1 </td>
  <td> R1 C2 </td>
  <td> R1 C3 </td>
</tr>
<tr>
  <td> R2 C1 </td>
  <td> This is a long value </td>
  <td> R2 C3 </td>
</tr>
<tr> ... R3 ... </tr>
</table>

R1 C1	R1 C2	R1 C3
R2 C1	This is a long value	R2 C3
R3 C1	R3 C2	R3 C3

alter emp

SQL> alter table emp add notes varchar2(2000);

Table altered.

start a new grid

start new grid

(a.k.a. Stop and start table)

If we have different tables, their cell widths are independent of each other.

two HTML tables

<table border="1">
<tr>
  <td> R1 C1 </td>
  <td> R1 C2 </td>
  <td> R1 C3 </td>
</tr>
</table>
<table border="1">
<tr>
  <td> R2 C1 </td>
  <td> This is a long value </td>
  <td> R2 C3 </td>
</tr>
<tr> ... R3 ... </tr>
</table>

R1 C1

R1 C2

R1 C3

R2 C1	This is a long value	R2 C3
R3 C1	R3 C2	R3 C3

start a new grid

p5

Regions

Sub Regions

p12

Ever needed items

after a report?

What about, before and after?

Items before or after report

In 4.2 just use "Item Display Position"

Items before and after report

In < 4.1 (or 4.2.x) use Sub Regions

Container Region

Item Sub Region
Report Sub Region
Item Sub Region

p17

Buttons

button placement

Template positions

button placement

Recommendation:

Use selected positions only and be consistent in your application

In other words, don't over do it.

template positions

template position help you with consistency


<span class="uButtonContainer">
#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#
</span>

button placement

You can use the same position for many buttons

Use the Sequence to decide the final order

unless...

You use float

Using float

Frustrating because sequence is not as intuitive

float: left;

float:right;

p25

the float collapse

float can affect their parent element (container)

When the parent element contains only floated elements,

it's height will collapse to nothing.

So now what?

clearfix to the rescue

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

<div class="uRegionContent clearfix">
  <div style="float: right;">awesome content!</div>
<div>

btw...
you probably already have clearfix defined

<div class="mycontainer clearfix">
  <div class="square">Box 1</div>
  <div class="square">Box 2</div>
</div>

.mycontainer {
  width: 600px;
  border: 1px solid red;
}
.square {
  width: 150px;
  height: 150px;
  color: white;
  background-color: #0bebf6;
  border: 7px dotted white;
  padding: 10px;
  margin-right: 20px;
  margin-top: 5px;
  display: inline-block;
  float: right;
}

Box 1

Box 2

<div class="mycontainer">
  <div class="square">Box 1</div>
  <div class="square">Box 2</div>
</div>

.mycontainer {
  width: 600px;
  border: 1px solid red;
}
.square {
  width: 150px;
  height: 150px;
  color: white;
  background-color: #0bebf6;
  border: 7px dotted white;
  padding: 10px;
  margin-right: 20px;
  margin-top: 5px;
  display: inline-block;
  float: right;
}

Box 1

Box 2

Theme 25

Button and Field alignment is hard

You need extra CSS to align buttons to the right

Buttons within items

Theme 25 recipe


@media only screen and (min-width: 768px) {
  .my-form div.fieldContainer {
    float: left;
    clear: left;
  }
  .my-form .uButton {
    float: left;
    margin-left: 8px;
  }
}

Example from Shakeeb

http://apex.oracle.com/pls/apex/f?p=13766:1:0:

https://forums.oracle.com/message/10914920#10914920

CSS selectors

class

use a dot (.) and the class name


.alert {color: red;}


<p class="warning">Value required for name field.</p>
<p class="alert">Value required for name field.</p>

Value required for name field.

ID

use a hash (#) and the ID


#P5_NOTES {outline: red solid 2px;}

#reportRegion {padding: 5px;}


<textarea name="p_t09" rows="5" cols="50" maxlength="4000" id="P5_NOTES" class="textarea">
</textarea>

<div id="reportRegion" class="stdReport"></div>

CSS Specificity

http://s.rimbl.as/PqUy

CSS Specificity

inline style

ID

class

elements

most specific

least specific

specificity hand grenade

!important

#logo {display: none!important;}

don't over do it

CSS

adding CSS to your application

element inline
page inline
file
- file system
- APEX hosted

element inline


<section class="uRegion" style="width: 500px;">#BODY#
</section>


<p style="padding-top: 5px; color: red; font-style: italic;">lorem ipsum</p>

document inline


<style type="text/css">label[for^=P11_ADDRESS],
label[for=P11_CITY],
label[for=P11_STATE],
label[for=P11_ZIP],
label[for=P11_NOTES] {
  outline: #ff5e99 dashed 2px;
}

</style>

type="text/css" mostly optional in modern browsers

file system


<link rel="stylesheet" href="/custom/c.css" type="text/css" />

custom directory was manually mapped to web server

c.css was manually added to the operating system

APEX hosted


<link rel="stylesheet" href="#APP_IMAGES#c.css" type="text/css" />


<link rel="stylesheet" href="#WORKSPACE_IMAGES#c.css" type="text/css" />

#APP_IMAGES# and #WORKSPACE_IMAGES# are

built in substitution strings

c.css was uploaded to APEX via

Shared Components - Files

Cascading Stylesheets
Images
Static Files

#WORKSPACE_IMAGES#

Expanded to use wwv_flow_file_mgr.get_file


    #WORKSPACE_IMAGES#c.css


    wwv_flow_file_mgr.get_file?p_security_group_id=2616712683471253&p_fname=c.css

CSS

box model

frequently used commands

The Box Model

Every element of web design is a rectangular box

Firebug

Chrome

Size of a Box

width:

width

+ padding-left + padding-right

+ border-left + border-right

Size of a Box

height:

height

+ padding-top + padding-bottom

+ border-top + border-bottom

<div class="mycontainer">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

.mycontainer {
  width: 600px;
  border: 1px solid red;
}
.box {
  width: 200px;
  height: 150px;
  color: white;
  background-color: #0bebf6;
  border: 7px dotted white;
  padding: 10px;
  margin-right: 20px;
  margin-top: 5px;
  display: inline-block;
}

Box 1

Box 2

easy sizing

cool tip!

box-sizing: border-box;

4 corners


padding: 5px 5px 5px 5px;

→
top

right

bottom

left

CSS short hand


padding: 5px;

5px all around

exactly the same as

padding: 5px 5px 5px 5px;


padding: 5px 7px;

5px top and bottom

7px left and right

or be specific

padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

exact same

padding: 0 5px 0 0;
padding-right: 5px;

height, width,

padding, margin,

border, float

position, display, overflow

position

You are now free to roam around the page

position

The position property specifies the type of positioning method used for an element.

static

absolute

relative

fixed

position: static

This is the default

Elements render in order as they appear in the document flow

position: absolute

The element is positioned relative to its first positioned (not static) ancestor element

We can place any page element exactly where we want

It will be relative to the next parent element with relative (or absolute) positioning.

If none exists then it goes all the way back to the <html> element

position: absolute

Elements with this positioning are removed from the flow of elements on the page

They don't affect other elements and they are not affected by other elements.

Caution: If overused it may limit the flexibility of your site.

position: relative

your friend

position: relative

think offset

The element is positioned relative to its normal position.

What it really means is "relative to itself"

position: relative

If no attributes are set (top, left, bottom or right) it will have no effect on positioning at all.

Limits the scope of absolutely positioned child elements

We'll have the ability to use z-index on that element

confused by z-index

you need a position absolute or relative

for z-index to take effect

If the element is position: static (default) z-index has no effect.

position: fixed

element is positioned relative to the viewport, or the browser window itself.

The viewport doesn't change when the window is scrolled

overflow

How to handle content that extends the size of a box?

visible (default)
hidden
scroll
auto

overflow: visible

any content that extends the height of a box will be displayed

However, the content that extends does NOT affect the document flow. It has no height.

overflow: hidden

Any content that extends past the height of a box will simply be invisible

overflow: scroll

content that overflows the box will be hidden, however we will get scroll bars to get to the overflow content.

You will get both horizontal and vertical scrollbars whether you need them or not.

overflow: scroll

Chrome handles the scrollbars differently

overflow: auto

like overflow: scroll however it solves the problem of always visible scrollbars.

scrollbars only show when needed.

wrap long lines

the cells push as wide as the content is

wrap long lines

td.data[headers="MESSAGE"],
td.dataAlt[headers="MESSAGE"] {
  max-width: 180px;
  white-space: pre-line;
  word-wrap: break-word;
}

data and dataAlt: alternating rows

white-space: pre-line; trim space before line

word-wrap: break-word;

Unfortunately partial IE support for break-word

( requires compatibility mode )

responsive design?

Use "Theme 25" if..

Multiple devices
Multiple screen resolutions
You can go with the "flow"
Handful of items per page
...

Stay away if...

You only need to support IE

(version 8 or below)

Your design is not flexible

Your designer said nothing about mobile devices

You need oodles of data on the screen

a.k.a.

You have 100+ items per page

data intensive

that's not where

i want that!

Enkitec

Paella?

Recipe

Recipes & Techniques

the goal

this is

this is not

agenda

Items

standard form wizard

emp

standard form wizard

begin on new line

start new row

first round

table grid

Understand HTML Tables

something about tables

HTML Tables

HTML Tables

HTML Tables

HTML Tables

HTML Tables

HTML Tables

HTML Tables

alter emp

start a new grid

start new grid

two HTML tables

start a new grid

Regions

Sub Regions

Ever needed items

after a report?

What about, before and after?

Items before or after report

Items before and after report

Buttons

button placement

button placement

template positions

button placement

Using float

float: left;

float:right;

the float collapse

So now what?

clearfix to the rescue

btw... you probably already have clearfix defined

Theme 25

Buttons within items

CSS selectors

tags

class

ID

CSS Specificity

CSS Specificity

specificity hand grenade

CSS

element inline

document inline

file system

APEX hosted

#WORKSPACE_IMAGES#

CSS

The Box Model

Firebug

Chrome

Size of a Box

width:

Size of a Box

height:

easy sizing

4 corners

CSS short hand

or be specific

exact same

height, width,

btw...
you probably already have clearfix defined