1 2 Previous Next 18 Replies Latest reply: Jun 11, 2014 9:30 AM by Richard Legge RSS

    My process message is behind my CSS dropdown menu (Theme 25)

    Richard Legge

      Hi All,

       

      Is anyone using the CSS pull down menu with APEX list that Scott Wesley gives a tutorial on how to get going?  As per this blog:  Grassroots Oracle: CSS pull down menu using APEX List

        Its originally from here: Ultimate Horizontal Drop-Down Menu Demo | Free CSS Drop-Down Menu Framework

      Im running APEX 4.2.4... Ive just taken the plunge and upgraded the application to Theme 25. Ive also successfully installed the CSS dropdown menu as per Scott's Tutorial.. All works great, and I got on with rebuilding the application to work with theme 25..

       

      However, Ive suddenly found that when I get a process or error message pop up on the page as the result of inserting/updating, or a validation error. , the dropdown menu is still on top of it.. (i.e. the message box and the content is behind the menu..)

       

      Ive tried changing the Regions for my menu list, without success. I'm assuming there is some CSS not quite right.

       

      Ill upload a test onto the Website, but is anyone using this, and hit the same error.. ?

       

      For reference the CSS for the template excluding the images is:

       

      <div id="navwrap">
      <ul id="nav" class="dropdown dropdown-horizontal" style="margin-bottom:10px;">

      <style>

      ul {

        list-style-type: none;

      }

      #navwrap {

        float:left;

        width:100%;

        margin-bottom:4px;

        background:#f6f6f6;

        border-style:solid;

        border-color:#d9d9d9 #d9d9d9 #d9d9d9;

        border-width:1px 1px 1px 0;

      }

       

      </style>

       

       

       

      Many Thanks

      Richard

        • 1. Re: My process message is behind my CSS dropdown menu (Theme 25)
          Sunil Bhatia

          Hi,

           

          Try giving highest z-index in the page level template "notification" portion. something as style="z-index:100"

           

          -- Sunil Bhatia

          • 2. Re: My process message is behind my CSS dropdown menu (Theme 25)
            scott.wesley

            As Sunil mentioned, z-index will layer HTML objects in that third dimension - so your message would always be on top of a menu.

             

            Alternatively/additionally, you can lower the error message on the vertical access.

             

            This is something I've done while using Enkitec's navbar plugin

            #uSuccessMessage, #uNotificationMessage {
              margin-top:43px;
              z-index:100;
            }
            

             

            Scott

            • 3. Re: My process message is behind my CSS dropdown menu (Theme 25)
              Richard Legge

              Hi Sunil, Scott... Thanks for this... As a relative newbie, I'm struggling to put either of these solutions in the right place, and with the right format to make them work.. Ive confirmed that im referencing the right page template..  my page template code notification is below... Id be grateful if you could tell me where exactly should the z-index or lower the message code go.

               

              By the way Scott, Ive spotted that the menu doesn't work on my IPAD, (I think you mentioned that on your guide).. Can it be made to work at all, otherwise Ill need to swap to another dropdown menu..    many Thanks.. Richard

               

              Notification

               

              <div class="apex_grid_container" >

                <div class="apex_cols apex_span_12">

                  <section class="uMessageRegion errorMessage clearfix" id="uNotificationMessage">

                    <div class="uRegionContent clearfix">

                      <a href="javascript:void(0)" onclick="apex.jQuery('#uNotificationMessage').remove();" class="uCloseMessage"><span class="visuallyhidden">#CLOSE_NOTIFICATION#</span></a>

                      <img src="#IMAGE_PREFIX#f_spacer.gif" class="uWarningIcon" alt="" />

                      <div class="uMessageText">

                        <h2 class="visuallyhidden">#ERROR_MESSAGE_HEADING#</h2>

                        #MESSAGE#

                      </div>

                    </div>

                  </section>

                </div>

              </div>

              • 4. Re: My process message is behind my CSS dropdown menu (Theme 25)
                fac586

                Richard Legge wrote:

                 

                Hi Sunil, Scott... Thanks for this... As a relative newbie, I'm struggling to put either of these solutions in the right place, and with the right format to make them work.. Ive confirmed that im referencing the right page template..  my page template code notification is below... Id be grateful if you could tell me where exactly should the z-index or lower the message code go.

                If you'd actually created the example on apex.oracle.com you mentioned above this would have been fixed on Tuesday. That is the most effective way to get help with UI issues. Reproduce the problem on apex.oracle.com.

                By the way Scott, Ive spotted that the menu doesn't work on my IPAD, (I think you mentioned that on your guide).. Can it be made to work at all, otherwise Ill need to swap to another dropdown menu..    many

                The site claims that it does, but I'm getting inconsistent results on the demos included there using an iPhone 5s running iOS 7.1:

                Does this menu work on iPhone OS or other mobile OS with no mouseover event?

                Yes, it does work on such OSes. In the advanced or ultimate versions of the menu the point is to leverage a hyperlink trigger inside a li item to make it open its child menu. In simple version you will need to use a workaround and add onmouseover="" to each li item containing a drop down menu in order to trigger and toggle its visibility.

                Create an example on apex.oracle.com so that we can actually investigate what you are doing on different devices.

                • 5. Re: My process message is behind my CSS dropdown menu (Theme 25)
                  scott.wesley

                  Place the provided CSS within the style tags.

                   

                  I've been meaning to try Touch Punch to see how that changes things, but another good alternative is the Enkitec Navbar plugin.

                  • 6. Re: My process message is behind my CSS dropdown menu (Theme 25)
                    Richard Legge

                    Thanks Scott.. Now onto the next challenge.. Speeding up the Enkitec Navbar load, as the unformated menu sits at the corner for a while sometimes... I spotted that you can move the supporting files to the file system, but Im running with EPG, so I don't believe I can reference external files..

                     

                    FAC586. Point taken. As always, its weighing up the odds of building the example on apex.oracle.com vs it being an easy answer....

                     

                    Thanks all..

                    • 7. Re: My process message is behind my CSS dropdown menu (Theme 25)
                      fac586

                      Richard Legge wrote:

                       

                      Thanks Scott.. Now onto the next challenge.. Speeding up the Enkitec Navbar load, as the unformated menu sits at the corner for a while sometimes... I spotted that you can move the supporting files to the file system, but Im running with EPG, so I don't believe I can reference external files..

                      What's important is not that the style sheet is stored in the file system but that it is referenced in the page head element (as required by the HTML specification) so it is available when the browser starts building the DOM. You can either use an external style sheet located in the APEX or XMLDB repository rather than the file system and reference this in the page templates or page CSS File URLs property, or put the rules in the page template Inline CSS property.

                       

                      Enkitec Navbar vertical list appears momentarily

                      FAC586. Point taken. As always, its weighing up the odds of building the example on apex.oracle.com vs it being an easy answer....

                      I've been using CSS for more than 15 years and find that when using theme 25 and other new APEX themes there are few easy answers. Mix in 3rd party components and multiple devices and user agents and the chance of any easy answer is remote. The people with the answers don't always have a spare half hour to reproduce a problem, but can spend 5 or 10 minutes looking at an existing example. When it's your problem surely the onus is on you to put the bulk of the effort into fixing it?

                      • 8. Re: My process message is behind my CSS dropdown menu (Theme 25)
                        Richard Legge

                        Got and I do appreciate the help you and others on here provide.. On that note: Im just about to post another question....  It has an example Ive created on apex.. So hopefully you or someone can help me..

                         

                        Many Thanks

                        Richard

                        • 9. Re: My process message is behind my CSS dropdown menu (Theme 25)
                          fac586

                          Is the information above on correctly locating the navbar style sheet clear and of use?

                          • 10. Re: My process message is behind my CSS dropdown menu (Theme 25)
                            Richard Legge

                            Yes thank you. Just this moment tried it..  I loaded it into me CSS space, and added a reference to it in my page template headers.. Im not getting the unformatted text any more.. 

                             

                            If this is the answer, I'm not sure the merits of putting the CSS in the file system as per the other thread.. Im assuming somewhere I mark this as answered...

                            • 11. Re: My process message is behind my CSS dropdown menu (Theme 25)
                              Richard Legge

                              checking further.. I am actually still seeing the unformatted menu list briefly on some screens....

                               

                              Ive added the css file into theShared Components/CSS   se

                              Under  #HEAD#   in each template Im using, Ive added the following as per the Oracle documentation.

                               

                               

                              <link rel="stylesheet" href="#APP_IMAGES#enkitec-navbar.min.css" type="text/css">

                              and I am still seeing the unformatted menu....

                              • 12. Re: My process message is behind my CSS dropdown menu (Theme 25)
                                Richard Legge

                                Hmm. Ive tried this on another device, and I've confirmed that this is still not working.. It must have been cached previously...

                                • 13. Re: My process message is behind my CSS dropdown menu (Theme 25)
                                  Richard Legge

                                  Hmm. I'm sure you spotted as did I when I checked.. It sgould be #APPLICATION_WORKSPACE#   Seems to be working nicely now.. Many Thanks

                                  • 14. Re: My process message is behind my CSS dropdown menu (Theme 25)
                                    fac586

                                    Richard Legge wrote:

                                     

                                    Hmm. I'm sure you spotted as did I when I checked.. It sgould be #APPLICATION_WORKSPACE#   Seems to be working nicely now.. Many Thanks

                                    I'm assuming you mean #WORKSPACE_IMAGES#?

                                    1 2 Previous Next