Loading ...
Sorry, an error occurred while loading the content.

Issue with Modal Panel and form in an overlay (IE)

Expand Messages
  • Rick
    I have a panel that is modal. On top of that I display an overlay that contains a form. The select items in the form are not being displayed (as they are in
    Message 1 of 4 , Apr 2 10:47 AM
    • 0 Attachment
      I have a panel that is modal. On top of that I display an overlay that
      contains a form. The select items in the form are not being displayed
      (as they are in FF). This issue does not occur when I set the panel to
      non-modal. The panel's z-index is 100 and the overlay's z-index is 5000.

      Any help would be much appreciated.
    • Todd Kloots
      Rick - When you display a modal Panel it adds a masked class to the element that hides all nodes. As the elements in your Overlay
      Message 2 of 4 , Apr 17 2:35 PM
      • 0 Attachment
        Rick -

        When you display a modal Panel it adds a "masked" class to the <body>
        element that hides all <select> nodes. As the <select> elements in your
        Overlay are children of the <body>, they are hidden. If you want to
        have your <select> elements remain visible, you need to add a new style
        rule to your stylesheet that has greater specificity than the default
        rule that hides them. Something like:

        * html body.masked div.ricksoverlay select {
        visibility:visible;
        }

        - Todd

        Rick wrote:
        > I have a panel that is modal. On top of that I display an overlay that
        > contains a form. The select items in the form are not being displayed
        > (as they are in FF). This issue does not occur when I set the panel to
        > non-modal. The panel's z-index is 100 and the overlay's z-index is 5000.
        >
        > Any help would be much appreciated.
        >
        >
        >
        >
        > Yahoo! Groups Links
        >
        >
        >
        >
        >
        >
        >
      • orlockblackraven
        ... your ... Why does this behaviour only bite in IE? I ve spent ages trying to work out why SELECT menus are disappearing in my dialog ... I gave up and just
        Message 3 of 4 , Oct 30, 2007
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
          >
          > Rick -
          >
          > When you display a modal Panel it adds a "masked" class to the <body>
          > element that hides all <select> nodes. As the <select> elements in
          your
          > Overlay are children of the <body>, they are hidden. If you want to
          > have your <select> elements remain visible, you need to add a new style
          > rule to your stylesheet that has greater specificity than the default
          > rule that hides them. Something like:
          >
          > * html body.masked div.ricksoverlay select {
          > visibility:visible;
          > }

          Why does this behaviour only bite in IE?

          I've spent ages trying to work out why SELECT menus are disappearing
          in my dialog ... I gave up and just made it non-modal in the end.
        • Satyen Desai
          ... Hi, your issue maybe a little different. Are you working with: a). Only a single modal Dialog? b). In 2.3.1? c). With Sam Skin? If so, you maybe hitting a
          Message 4 of 4 , Oct 30, 2007
          • 0 Attachment
            >
            > Why does this behaviour only bite in IE?
            >
            > I've spent ages trying to work out why SELECT menus are disappearing
            > in my dialog ... I gave up and just made it non-modal in the end.
            >

            Hi, your issue maybe a little different.

            Are you working with:

            a). Only a single modal Dialog?
            b). In 2.3.1?
            c). With Sam Skin?

            If so, you maybe hitting a bug in 2.3.1 The first known issue on the
            Container landing page provides a workaround:

            http://developer.yahoo.com/yui/container/#knownissues

            Let us know if that doesn't help.

            If your use case does not match the above (or the original post), can
            provide details about your code and we can pursue it a little further.

            Regards,
            Satyen
          Your message has been successfully submitted and would be delivered to recipients shortly.