Next Button in a Hide and Show Region is not displayed correctly

Question

I created a new button at the bottom of the region in a Hide and Show Region called [Next >]. The button is displayed to the right of the region. I want it displayed at the right end of the bottom of the region. The following is the button properties
Name
Button Name : NEXT_SIGNS
Text Label/Alt: Next >
Displayed
Sequence            130
Display in Region: Signs and Nameplates (1) 100
Button Position:    Bottom of Region
Button Alignment: Right
Attributes
Static ID:          
Button Style:      Template Based Button
Button Template: PA Button
Button Type:       Hot
Button Attributes:
Action When Button Clicked
Action:                 Submit Page
Execute Validation: Yes
Database Action:    No Database Action
Conditions
None
Security
None
Configuration
NoneWhy is this occurring and how can I resolve the issue?
The following is the template of the hide and show region:
<div class="hide-show-region" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
  <div class="hide-show-top">
    <div class="hide-show-title">
<div class="rounded-corner-region">
<div class="rc-blue-top">      
<div class="rc-blue-top-r">
          #TITLE#</div>
</div>
</div>
       <a style="margin-left:5px;" href="javascript:hideShow('region#REGION_SEQUENCE_ID#','shIMG#REGION_SEQUENCE_ID#','#IMAGE_PREFIX#themes/theme_2/rollup_plus_dgray.gif','#IMAGE_PREFIX#themes/theme_2/rollup_minus_dgray.gif');" class="t1HideandShowRegionLink"><img src="#IMAGE_PREFIX#themes/theme_2/rollup_plus_dgray.gif"
  id="shIMG#REGION_SEQUENCE_ID#" alt="" />Click on arrow to enter/hide  information for signs and/or nameplates</a></div>
    <div class="hide-show-buttons">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
  </div>
  <div class="hide" id="region#REGION_SEQUENCE_ID#">#BODY#</div>
</div>APEX version 4.1
DB version 10g Rel 2
PLEASE HELP!!
Robert
http://apexjscss.blogspot.com

Answer 1

I created a new button at the bottom of the region in a Hide and Show Region called [Next >]. The button is displayed to the right of the region.I only see it displayed to the right of the region in Firefox (Safari and IE8 showed it above the sub-regions). Not obvious to me why this is the case (it's usually IE that does it's own thing).
I want it displayed at the right end of the bottom of the region.Button position Bottom of Region causes an anonymous HTML table containing the button(s) to be generated after the <tt>#BODY#</tt> placeholder in the region template. Your Hide/Show region template didn't have a <tt>#SUB_REGIONS#</tt> placeholder so by default the sub-regions were rendered after the <tt>#BODY#</tt> and the "Bottom of Region" button container (don't know if this is the intended behaviour or a bug). Adding <tt>#SUB_REGIONS#</tt> before <tt>#BODY#</tt> in the template gets things in the right order (button after sub-regions):
<div class="hide-show-region" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
  <div class="hide-show-top">
    <div class="hide-show-title">
<div class="rounded-corner-region">
<div class="rc-blue-top">      
<div class="rc-blue-top-r">
          #TITLE#</div>
</div>
</div>
       <a style="margin-left:5px;" href="javascript:hideShow('region#REGION_SEQUENCE_ID#','shIMG#REGION_SEQUENCE_ID#','#IMAGE_PREFIX#themes/theme_2/rollup_plus_dgray.gif','#IMAGE_PREFIX#themes/theme_2/rollup_minus_dgray.gif');" class="t1HideandShowRegionLink"><img src="#IMAGE_PREFIX#themes/theme_2/rollup_plus_dgray.gif"
  id="shIMG#REGION_SEQUENCE_ID#" alt="" />Click on arrow to enter/hide  information for signs and/or nameplates</a></div>
    <div class="hide-show-buttons">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
  </div>
  <div class="hide" id="region#REGION_SEQUENCE_ID#">
    #SUB_REGIONS#
    #BODY#
  </div>
</div>Firefox is still showing the button to the right of the sub-regions. I'm assuming that this has something to do with everything in this theme being floated left (for reasons that escape me), so we'll try to clear the button container using CSS. The table doesn't have an ID or class so try an adjacent sibling selector using the ID of the preceding sub-region:
#nameplates-name+table {
  clear: both;
}Finally, the button alignment was set to "Left", so I changed it to "Right".
Seems to be working in IE8 (all I have access to at present).
Edited by: fac586 on 30-Nov-2012 20:10
Fixed CSS selector syntax.