7 Replies Latest reply: Apr 10, 2013 10:33 AM by Joe Upshaw RSS

    Adjusting the Opacity of the Popup Date Picker

    Joe Upshaw
      We are using "Date Picker" for the "Display As" attribute of a column on a tabular form. When the page is rendered, this results in a div node with an id attribute of ui-datepicker-div. However, we also have the "Version" specified in the Application properties which results in the string's being displayed on all pages.

      The issue is that when someone clicks the control to popup the calendar, this div gets a z-index attribute of 1 which causes it to appear behind the "Version," i.e. the "Version" text appears across the calendar control.

      I have tried adding this to the "Execute when Page Loads" section:
      $('div#ui-datepicker-div').css('z-index', '2');
      This "works" in that it does set the z-index to 2 (and with a value of 2 (manually adjusting the dom to test), it is properly displayed , i.e. on top). However, when the calendar is displayed, the z-index always gets reset to 1.

      How can I inject the above, new z-index setting so that it is adjusted whenever the calendar popup is displayed (or alternately change this in the templates somehow)?

      Thanks,

      -Joe
        • 2. Re: Adjusting the Opacity of the Popup Date Picker
          Howard (... in Training)
          Hi Joe,

          An observation. I believe you can "bump" your post up to the top of the list (momentarily, of course) by just editing any of your entries. I often see folks have edited the initial thread post and added a line like:
          [Bump] No response since yesterday (or 2 days ago, last week, ...). {Oh, BTW more information about this ...} Can anyone give me a hand?
          I think this is preferable to "Reply" because it leave the "Replies" count at zero and lets everyone know that no one has responded yet. If one responds to one's own thread, the count suggests it has gotten at least some attention.

          [And, sorry, I know nothing about the Date Picker Opacity.]

          Kind regards,
          Howard
          • 3. Re: Adjusting the Opacity of the Popup Date Picker
            Joe Upshaw
            It can not be overridden with the inclusion of an additonal CSS "override" file. I have tried this with the following setting:
            #ui-datepicker-div
            {
                z-index: 2;
            }
            but, this doesn't fix the problem as something sets the z-index value from the css, aka style attribute directly, i.e. not via a class assignment. So, I am really stuck on this one. Obviously, I could use jQuery to change the value, i.e.
            $('#ui-datepicker-div').css('z-index', '2');
            but, I can't identify the right place, i.e. event trigger, to put in this code snippet.

            -Joe
            • 4. Re: Adjusting the Opacity of the Popup Date Picker
              Joe Upshaw
              Ah...good tip. Thanks, Howard.
              • 5. Re: Adjusting the Opacity of the Popup Date Picker
                Tom Petrus
                So, can you try in CSS:
                div#ui-datepicker-div
                or
                body div#ui-datepicker-div
                or add even more specificity. Look at the style properties of the div with an inspection tool such as firebug, and look at what styles are having an effect on the div. You can then try to override it.
                Or try with
                #ui-datepicker-div
                {
                    z-index: 2 !important;
                }
                • 6. Re: Adjusting the Opacity of the Popup Date Picker
                  Howard (... in Training)
                  Never mind! You beat me to it. (I was going to say, look at ! important here: {thread:id=2352915})

                  Howard

                  Edited by: Howard (... in Training) on Apr 10, 2013 10:56 AM
                  • 7. Re: Adjusting the Opacity of the Popup Date Picker
                    Joe Upshaw
                    Well, that's embarassing.

                    I was totally aware of "important" but, did not think this would override an explicit, i.e. not via class inheritence, style setting. Nonetheless, I did just try it. It did work. Problem solved. Thanks!

                    Tom,

                    I looked through all of the APEX supplied CSS and JS and the z-index just isn't getting set there. It is somewhere in the JS that actually generates the control but, I was not able to find it. I did find a JS file specifically for the date picker but, therein, it was setting z-index to -10 rather than to 1.

                    So, I never was able to find the point to make the change permananetly in the APEX supplied files. We have a custom CSS file that we include in the template header, apexOverrides.css, for just these sort of things. When APEX makes the assignment via class inheritence, "!important" just wasn't necessary.

                    -Joe