11 Replies Latest reply: Nov 30, 2012 3:55 PM by sect55 RSS

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

    sect55
      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
      None
      Why 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
        • 1. Re: Next Button in a Hide and Show Region is not displayed correctly
          714270
          Your button uses the "PA Button" button template. Not sure if that has the trick (button CSS classes).
          • 2. Re: Next Button in a Hide and Show Region is not displayed correctly
            sect55
            Hi Rohit,

            The PA button is my our company standard button template. It is used throughout the application and other applications in our company. The template is below:
            *Normal Template:
            <button value="#LABEL#" onclick="#JAVASCRIPT#" class="button-gray" type="button" #BUTTON_ATTRIBUTES# id="#BUTTON_ID#">
              <span>#LABEL#</span>
            </button>
            
            Hot Template
            <button value="#LABEL#" onclick="#JAVASCRIPT#" class="button-alt1" type="button" #BUTTON_ATTRIBUTES# id="#BUTTON_ID#">
              <span>#LABEL#</span>
            </button>
            So therefore, the button template should not affect the placement of the button in a hide and show region.

            Any other thoughts would be valuable to me.

            Thanks

            Robert
            http://apexjscss.blogspot.com
            • 3. Re: Next Button in a Hide and Show Region is not displayed correctly
              sect55
              Gurus,

              Can should help with this issue. The button should display in the bottom of the region not to the right of the region.

              Robert
              http://apexjscss.blogspot.com
              • 4. Re: Next Button in a Hide and Show Region is not displayed correctly
                fac586
                sect55 wrote:
                Gurus,

                Can should help with this issue. The button should display in the bottom of the region not to the right of the region.
                It's much easier for us busy gurus to help when there is an example on apex.oracle.com we can play with...
                • 5. Re: Next Button in a Hide and Show Region is not displayed correctly
                  sect55
                  fac586 ,

                  I figured you were going to say that!!! I am currently working on copying it to apex.oracle.com. I will try to have something tomorrow morning.

                  Robert
                  http://apexjscss.blogspot.com
                  • 6. Re: Next Button in a Hide and Show Region is not displayed correctly
                    sect55
                    Gurus,

                    I put it on APEX.ORACLE.COM

                    Workspace: RGWORK
                    Application: 55702     CSRSR
                    Page : 11 (Just Run application and only 1 selection on the menu)
                    User: TESTER
                    Password: test123

                    Robert
                    http://apexjscss.blogspot.com
                    • 7. Re: Next Button in a Hide and Show Region is not displayed correctly
                      fac586
                      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.
                      • 8. Re: Next Button in a Hide and Show Region is not displayed correctly
                        sect55
                        fac586,

                        It seems to work for IE7, IE8 but not for Firefox (which is strange!!). Can you find a solution for both browsers since my users will be using IE7 and Firefox?

                        Thank you,
                        Robert
                        http://apexjscss.blogspot.com
                        • 9. Re: Next Button in a Hide and Show Region is not displayed correctly
                          fac586
                          sect55 wrote:

                          It seems to work for IE7, IE8 but not for Firefox (which is strange!!). Can you find a solution for both browsers since my users will be using IE7 and Firefox?
                          Sorry, got the CSS selector syntax mixed up. Fixed it now.
                          • 10. Re: Next Button in a Hide and Show Region is not displayed correctly
                            sect55
                            fac568,

                            It still doesn't work for Firefox 11.0

                            I did a workaround:
                            I created another subregion that contains only the button and it is seems to work. The region template I am using is Region no title. I still have to work with the CSS because the top is not rounded. But it is almost there.

                            Thanks for your valuable time trying to resolve it. I really appreciate it.

                            Robert
                            http://apexjscss.blogspot.com
                            • 11. Re: Next Button in a Hide and Show Region is not displayed correctly
                              sect55
                              I am closing this issue as answered.