Fix dropdown shadow with max-height

nmocruz commented 6 years ago

Hi,

Tried to make a dropdown scrollable by set a max-height, but is doing a shadow wrongly

arivera12 commented 5 years ago

I just hit this issue as well. Shadows goes away and also the item loses the white background to transparent as show on the image below.

arivera12 commented 5 years ago

@nmocruz its been almost a year as I can see, did you found any fix for this?

djibe commented 5 years ago

Hi guys, shadow is set to the dropdown::before element. I'll try to look into it. Keep in touch

arivera12 commented 5 years ago

I just fix it. On the dropdown menu add the bootstrap built-in class pre-scrollable.

<div class="dropdown-menu pre-scrollable show">...</div>

I override 2 css class I added comments with what I changed and what was before. So you can apply fix more faster.

.dropdown-menu:before {
            border-radius: 2px;
            /*Was transparent before*/
            background-color: #fff;
            /*Was 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 3px rgba(0,0,0,.12), 0 4px 15px 0 rgba(0,0,0,.2); before*/
            box-shadow: none;
            content: "";
            display: block;
            /*Was absolute before*/
            position: relative;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            z-index: -1;
        }
        .dropdown-menu {
            border-radius: 2px;
            text-align: left;
            text-align: start;
            /*Was transparent before*/
            background-color: white;
            color: inherit;
            display: none;
            float: left;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5rem;
            list-style: none;
            margin: 0;
            min-width: 7rem;
            padding: .5rem 0;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 80;
            /*Added box shadow here*/
            box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 3px rgba(0,0,0,.12), 0 4px 15px 0 rgba(0,0,0,.2);
        }

This is an image on how its looks like now.

🥇

nmocruz commented 5 years ago

I stopped to use this library, I had many places where this shadow issue was happening,

arivera12 commented 5 years ago

@nmocruz I have used it for a while this is the first issue I found and just fix it with some overrides.

arivera12 commented 5 years ago

@djibe did you test my solution? It works as expected!

djibe commented 5 years ago

@arivera12 I'll try to look into it next week. Thx.

You had time to test my material build ? https://github.com/djibe/material/tree/master/css

Daemonite / material

Fix dropdown shadow with max-height #198