4 Replies Latest reply on Apr 10, 2018 9:13 PM by choss

    Drop-down menu overlay in Jive 7 HTML widget

    choss

      In our instance of Jive 7, I've created a drop-down menu with CSS and HTML and placed it in an HTML widget.  As you may have guessed, the drop-down menu does not overlay/extend past the widget itself.

       

          Here are the styles for my drop-down menu:

                  width: 100%;

                  text-align: left;

                  margin: 0;

                  padding: 0;

                  overflow: visible;

                  position: absolute;

                  top: 106%;

                  left: 0;

                  z-index: 2000;

       

      After reading Drop down menus in HTML widgets, I added this selector and properties to the styles in my HTML widget:

          .jive-widget DIV {

                  position: relative;

                  overflow: visible;

                  z-index: 500;

              }

       

      My results before adding ".jive-widget DIV" selector:

      The drop-down menu does not extend past the confines of the widget, but overlays content in the same widget.

      ddmenu_jive-widget_DivzOrig.jpg

      My results after adding ".jive-widget DIV" selector:

      The drop-down menu still does not extend past the confines of the widget, and does not overlay content in the same widget.

      ddmenu_jive-widget_Divz500.jpg

       

      Maybe I didn't place the ".jive-widget DIV" selector in the correct place?  I'd be grateful for any tips.  Thank you.