CODEWITHSUNDEEP
htmlcsstwitter-bootstrapz-index
Anton
Anton

Reputation: 796

z-index and overflow doesn't work at all

I was tried to set z-index, overflow, position absolute and rest css features but dropdown menu is still appearing in small square. thru console log, I figure out that some styles such as bootstrap-tabel.css and dropdown are conflicted between themselves and one style every time override other How could I fix it?

This my plunker

css

.dropdown-menu>li
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    z-index: 999;
    overflow: visible;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch;
    -ms-overflow-scrolling: touch;
    -o-overflow-scrolling: touch;
    overflow-scrolling: touch;
    height: auto;
    max-height: 500px;
    border-left: none;
    border-right: none;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
    border-radius: 0 !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;

}
.right-caret:after,.left-caret:after
{   content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}
.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

Upvotes: 0

Views: 1222

Answers (2)

Clomp
Clomp

Reputation: 3308

To display the sub-menus, add overflow:visible to a new .dropdown menu class... at the top of the style.css file.

Use only one of these two examples. They will both override the conflict that the bootstrap-table.min.css file is causing in Plunker, with the menu's code.

.fixed-table-toolbar .dropdown-menu {
    overflow: visible ! important;
}

Or be more specific with the CSS selector chain, to avoid having to use the ! important override:

.fixed-table-toolbar #toolbar .dropdown-menu {
  overflow: visible;
}

Upvotes: 1

Polynomial Proton
Polynomial Proton

Reputation: 5135

Its being caused by the a css rule in bootstrap. One way to solve this is below :(Tested on your link)

.fixed-table-toolbar .dropdown-menu{
  overflow:visible !important;
}

boostrap-table.min.css has overflow:auto. Either assign a new class or id and make it visible or use !important like above

enter image description here

Upvotes: 1

Related Questions