How do you align items neatly in Oracle Apex?

Question

I am having the hardest time aligning things in Oracle Apex...basically some pages look ok, but some look like this:

This is considering that all of my pages have the same template/region/col settings:

What am I doing wrong?!

EDIT:

I did get the positioning to become a little better:

Here's the template info:

Solution

It might be your page template. I've imported the Green Spring theme and tried it out. Since you're using tabs and only using the apex templates, you might've chosen the One level tabs - Left sidebar (fixed width / DIV based). That would explain why your 'Add New User' region is being 'pushed' to the right. When you add another region, it will probably too get pushed. Your menu region, which is not being set off, might be placed in another position in the template, before the sidebar.

• Check both regions' display point: are they the same?
• Has your page template a fixed width sidebar?

So here is the code for the body template of the One Level Tabs - Left Sidebar (fixed-width / DIV based) template:

<div id="header">
  <div id="logo"><a href="#HOME_LINK#">#LOGO##REGION_POSITION_06#</a></div>
  #REGION_POSITION_07#
  <div id="navbar">
    #NAVIGATION_BAR#
    <div class="app-user">#WELCOME_USER#</div>
    #REGION_POSITION_08#
  </div>
</div>
<div id="tabs">
  <div class="frame">
    <div class="bg">
      <div class="tab-holder">
        #TAB_CELLS#
      </div>
    </div>
  </div>
</div>
<div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
<div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div id="body">
  <div id="two-col-sb-left">
    <div id="left-sidebar">#REGION_POSITION_02#</div>
    <div id="main-sb-left">
      #BOX_BODY##REGION_POSITION_03#
    </div>
  </div>
</div>

So what you did after your edit, was probably putting the 'Add new user' region to Page Template Region Position 1, just like the Menu region, stacking them up. The default place would have been in <div id="main-sb-left">

I'd say that your actual problem still lies with the page template. You should try this: go to shared components > templates, and make a copy of the One Level Tabs - Left Sidebar (fixed-width / DIV based) template (done by clicking the 2 page icon next to it). Then edit this copy (just call it one level template test), and change the body div like this.

<div id="body">
   #REGION_POSITION_02##BOX_BODY##REGION_POSITION_03#
</div>

Then alter your page template, and set your 2 regions to position #03, and set the template to Reports Region. Your regions will be aligned all the way left, under eachother, and no whitespace to the left.

Honestly, that'd be the easiest way to solve the empty sidebar space. There are no other regions in the body that omit the sidebar. At least in this theme!

Comments

[antonpug]

See the edit on the question. I got it to work a little better, do I have to use CSS to play with the widths?

[Tom]

Edited aswell - check and try it out, see if that helps you out