that's not where i want that!

JorgeRimblas@rimblas

enkitec.com

enkitec.com@enkitec

WeareanOracleconsultingpartnerfocusedonthe .

PlatinumLevelPartner

.TheHandsOnOracleExperts.

OracleApplicationDevelopmentOracleDatabaseAdministrationLab-basedEducationBusinessIntelligenceTechnologyStabilizationOngoingManagedServicesforOracleSystems

anecdotes,notasinglestory

howdoigetmorefromapex

MobileappHow-ToBleedingedgetechniques

SecretHandshakeResponsiveDesignTutorial?

ItemsThegridRegionsButtonsCSS

SomemoreCSSQ&A

MartinD'SouzaMon6/24@11:30am

ChristianRokittaWed6/26@8:30am

ChristianRokittaThu6/27@8:30am

DimitriGielisThu6/27@9:45am

Fieldsinone"column"AboutthesamelengthWedohaveagrid:

tablediv

SQL>descempNameType--------------------------EMPNONUMBERENAMEVARCHAR2(10)JOBVARCHAR2(9)MGRNUMBERHIREDATEDATESALNUMBERCOMMNUMBERDEPTNONUMBER

MaintainEMPMaintainEMP

Ename ADAMS

Job CLERK

Mgr 7698

Hiredate 12-JAN-83

Sal 1100

Comm 1

Deptno 20

Demo apex_public_user Logout

SetScreenReaderModeOn release1.0

APEX4.1andbefore

APEX4.2andbeyond


Employee ADAMS Job CLERK

Mgr BLAKE

HireDate 12-JAN-83

Salary 1100 Commision 1

Dept RESEARCH



tableforformelementscellforlabelcellforitemcellforitembuttons

widthbasedonelements

:table,tr,td

:colspanandrowspan

Inaworldofresponsivedesignsanddivlayoutstheymaybeobsolete(forsomeuses)

However,probablyALLyourapplicationsbuildbefore4.1usethem

<table><tr><td>R1C1</td><td>R1C2</td><td>R1C3</td></tr><tr>...R2...</tr><tr>...R3...</tr></table>

R1C1 R1C2 R1C3R2C1 R2C2 R2C3R3C1 R3C2 R3C3

<tableborder="1"><tr><td>R1C1</td><td>R1C2</td><td>R1C3</td></tr><tr>...R2...</tr><tr>...R3...</tr></table>


<tableborder="1"><tr><td>R1C1</td><tdcolspan="2">R1C2</td><td>R1C3</td></tr><tr>...R2...</tr><tr>...R3...</tr></table>


<tableborder="1"><tr><td>R1C1</td><tdcolspan="2">R1C2</td></tr><tr>...R2...</tr><tr>...R3...</tr></table>

R1C1 R1C2R2C1 R2C2 R2C3R3C1 R3C2 R3C3

<tableborder="1"><tr><td>R1C1</td><tdcolspan="2">R1C2</td></tr><tr><tdrowspan="2">R2C1</td><td>R2C2</td><td>R2C3</td><tr>...R3...</tr></table>

R1C1 R1C2R2C1 R2C2 R2C3

R3C1 R3C2 R3C3

<tableborder="1"><tr><td>R1C1</td><td>R1C2</td><td>R1C3</td></tr><tr><td>R2C1</td><td>Thisisalongvalue</td><td>R2C3</td></tr><tr>...R3...</tr></table>

R1C1 R1C2 R1C3R2C1 Thisisalongvalue R2C3R3C1 R3C2 R3C3

SQL>altertableempaddnotesvarchar2(2000);

Tablealtered.



Mgr BLAKE

HireDate 12-JAN-83


Dept RESEARCH

Notes



<tableborder="1"><tr><td>R1C1</td><td>R1C2</td><td>R1C3</td></tr></table><tableborder="1"><tr><td>R2C1</td><td>Thisisalongvalue</td><td>R2C3</td></tr><tr>...R3...</tr></table>

R1C1 R1C2 R1C3R2C1 Thisisalongvalue R2C3R3C1 R3C2 R3C3



Mgr BLAKE

HireDate 12-JAN-83


Dept RESEARCH

Notes



p5



Mgr BLAKE

Hiredate 12-JAN-83

Sal 1100 Commision 1

Dept RESEARCH

Address1

Address2

City

State

Zip

Notes




Employee ADAMS

Job CLERK

HireDate 12-JAN-83 Manager BLAKE


Dept RESEARCH

AddressAddress

Address1

Address2

City State Zip

AdditionalInfoAdditionalInfo

Notes



p12

In4.2justuse"ItemDisplayPosition"

ItemsBeforeItemsBefore

Search Display 15 GoGo ResetReset

DEPTNODEPTNO DNAMEDNAME LOCLOC

10 ACCOUNTING NEWYORK

20 RESEARCH DALLAS

30 SALES CHICAGO

40 OPERATIONS BOSTON

1-4



ItemsAfterItemsAfter



20 RESEARCH DALLAS

30 SALES CHICAGO


1-4




In<4.1(or4.2.x)useSubRegions

ContainerRegionItemSubRegionReportSubRegionItemSubRegion

ItemsBefore&AfterItemsBefore&After




20 RESEARCH DALLAS

30 SALES CHICAGO


1-4

After01



p17

Templatepositions

Recommendation:Useselectedpositionsonlyandbeconsistentinyourapplication

Inotherwords,don'toverdoit.

templatepositionhelpyouwithconsistency

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

Youcanusethesamepositionformanybuttons

UsetheSequencetodecidethefinalorder

Frustratingbecausesequenceisnotasintuitive

Button3Button3Button4Button4

ButtonsButtons

Button1Button1 Button2Button2Standardbuttonplacement.

Buttonsw/floatButtonsw/float

Button3isdefinedfirstwithseq10Button4followswithseq40

<style>#BUTTON_3,#BUTTON_4{float:right;}</style>



p25

floatcanaffecttheirparentelement(container)

Whentheparentelementcontainsonlyfloatedelements,it'sheightwillcollapsetonothing.

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

<divclass="uRegionContentclearfix"><divstyle="float:right;">awesomecontent!</div><div>

<divclass="mycontainerclearfix"><divclass="square">Box1</div><divclass="square">Box2</div></div>

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

Box1Box2

<divclass="mycontainer"><divclass="square">Box1</div><divclass="square">Box2</div></div>

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

Box1Box2

ButtonandFieldalignmentishard

YouneedextraCSStoalignbuttonstotheright

@mediaonlyscreenand(min-width:768px){.my-formdiv.fieldContainer{float:left;clear:left;}.my-form.uButton{float:left;margin-left:8px;}}

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

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

simplyusethenameofthetag

body{overflow:auto;}

label{font-weight:bold;}

useadot(.)andtheclassname

.alert{color:red;}

<pclass="warning">Valuerequiredfornamefield.</p><pclass="alert">Valuerequiredfornamefield.</p>

Valuerequiredfornamefield.Valuerequiredfornamefield.

useahash(#)andtheID

#P5_NOTES{outline:redsolid2px;}

#reportRegion{padding:5px;}

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

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

http://s.rimbl.as/PqUy

inlinestyle

ID

class

elements

mostspecific

leastspecific

!important

#logo{display:none!important;}

don'toverdoit

addingCSStoyourapplication1. elementinline2. pageinline3. file

filesystemAPEXhosted

<sectionclass="uRegion"style="width:500px;">

#BODY#

</section>

<pstyle="padding-top:5px;color:red;font-style:italic;">

loremipsum

</p>

<styletype="text/css">

</style>

type="text/css"mostlyoptionalinmodernbrowsers

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

directorywasmanuallymappedtowebserverc.csswasmanuallyaddedtotheoperatingsystem

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

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

#APP_IMAGES#and#WORKSPACE_IMAGES#arebuiltinsubstitutionstrings

c.csswasuploadedtoAPEXviaSharedComponents-Files

CascadingStylesheetsImagesStaticFiles

Expandedtousewwv_flow_file_mgr.get_file

#WORKSPACE_IMAGES#c.css

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

boxmodelfrequentlyusedcommands

width+padding-left+padding-right

+border-left+border-right

height

+padding-top+padding-bottom+border-top+border-bottom

<divclass="mycontainer"><divclass="box">Box1</div><divclass="box">Box2</div></div>

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

Box1 Box2

box-sizing:border-box;

padding:5px5px5px5px;

→top

left right

bottom

padding:5px;

5pxallaroundexactlythesameas

padding:5px5px5px5px;

padding:5px7px;

5pxtopandbottom7pxleftandright

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

padding:05px00;padding-right:5px;

Youarenowfreetoroamaroundthepage

staticabsoluterelativefixed

Thisisthedefault

thinkoffset

youneedapositionabsoluteorrelativeforz-indextotakeeffect

visible(default)hiddenscrollauto

anycontentthatextendstheheightofaboxwillbedisplayed

However,thecontentthatextendsdoesNOTaffectthedocumentflow.Ithasnoheight.

Anycontentthatextendspasttheheightofaboxwillsimplybeinvisible

contentthatoverflowstheboxwillbehidden, wewillgetscrollbarstogettotheoverflowcontent.

Chromehandlesthescrollbarsdifferently

overflow:scrolloverflow:scroll

Loremipsumdolorsitamet,consecteturadipiscingelit.Aeneanullamcorpervulputatenibh,velconguenibh.Doneclobortisnibhnonnuncblanditelementum.Suspendisseeleifendtempustempus.Aliquamidvelitaarcuadipiscingporttitor.Vivamusposuereturpisidfeugiatmattis.Classaptenttacitisociosquadlitoratorquentperconubianostra,perinceptoshimenaeos.Sedsedurnaegetquamvariustempus.Inidurnaeros.Vestibulumluctusegetnuncvitaepharetra.Vivamuscommodournasedscelerisquedapibus.Utvenenatistellusvestibulummattisvenenatis.Donechendreriteuanteidluctus.

Overflow apex_public_user Logout

release1.0

likeoverflow:scrollhoweveritsolvestheproblemofalwaysvisiblescrollbars.

thecellspushaswideasthecontentis

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

dataanddataAlt:alternatingrowswhite-space:pre-line;trimspacebeforeline

word-wrap:break-word;

UnfortunatelypartialIEsupportforbreak-word(requirescompatibilitymode)

MultipledevicesMultiplescreenresolutionsYoucangowiththe" "Handfulofitemsperpage...

(version8orbelow)

a.k.a.Youhave100+itemsperpage

dataintensive

slides rimblas.com/slides/kscope13sampleapp:http://s.rimbl.as/PrpV

appdownload:http://s.rimbl.as/PqnDreveal.jshttps://github.com/hakimel/reveal.js

http://css-tricks.com/http://caniuse.com/http://lmgtfy.com/

JorgeRimblas@rimblas

enkitec.com

that's not where i want that!

Software