Scrollbar dont show on Chrome - css

The matter is the following, I have a selector and I want to show the scrollbar (I am using ng-select). The point is that using Overflow-y: visible or scroll nothing appears, however in Firefox it does!
I already tried adding a specific height, also a max-height and I get no results. Someone who can tell me what I'm doing wrong?
HTML:
<ng-select class="ng-select form-control form-control-solid form-control-lg px-2.5 py-1 text-sm rounded"
[clearable]="false" [searchable]="false" placeholder="Select a Merchant"
(change)="storeSelectedMerchant($event)" [ngModel]="(activeMerchant$ | async)" *ngIf="merchants$ | async">
<ng-option value="all"><b>All Merchants</b></ng-option>
<ng-option *ngFor="let merchant of merchants$ | async" [value]="merchant.guid">
<p>
<strong class="block">{{merchant.dba}}</strong>
<span>MID: {{merchant.mid}}</span>
</p>
</ng-option>
</ng-select>
</div>
CSS:
.ng-dropdown-panel {
background: #eee;
left: 0;
margin-top: 10px;
border-radius: 3px 3px 6px 6px;
overflow: hidden;
-webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
.ng-dropdown-panel-items.scroll-host {
overflow-y: visible !important;
&::-webkit-scrollbar {
width: 6px !important;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px white(0, 0, 0, 0);
-moz-box-shadow: inset 0 0 0px white(0, 0, 0, 0);
box-shadow: inset 0 0 0px white(0, 0, 0, 0);
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
}
Chrome:
Firefox:


Please try replacing the overflow-y: visible !important
to overflow-y: scroll !important.

Related

Shadow over element with background image?

In the following example I have two elements. One has a background image for the content section and the other does not. Both headers have a box-shadow property. How can I make the shadow visible above the element with the background image set?
.testcontainer {
width: 200px;
display: inline-block;
border: 1px solid gray;
height: 120px;
}
.header {
height: 20px;
background-color: cornflowerblue;
color: white;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.content {
height: 100px;
}
#hasbgimage {
background-image: url("https://via.placeholder.com/200x100");
background-size: cover;
}
<div class="testcontainer">
<div class="header">test with no image</div>
<div class="content"></div>
</div>
<div class="testcontainer">
<div class="header">test with image</div>
<div class="content" id="hasbgimage"></div>
</div>

You may simply add z-index to the first element to make it above with its box-shadow also
.testcontainer {
width: 200px;
display: inline-block;
border: 1px solid gray;
height: 120px;
}
.header {
position:relative; /*And don't forget this !!!*/
z-index:2;
height: 20px;
background-color: cornflowerblue;
color: white;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.content {
height: 100px;
}
#hasbgimage {
background-image: url("https://via.placeholder.com/200x100");
background-size: cover;
}
<div class="testcontainer">
<div class="header">test with no image</div>
<div class="content"></div>
</div>
<div class="testcontainer">
<div class="header">test with image</div>
<div class="content" id="hasbgimage"></div>
</div>

You can simply define inset shadow for #hasbgimage
.testcontainer {
width: 200px;
display: inline-block;
border: 1px solid gray;
height: 120px;
}
.header {
height: 20px;
background-color: cornflowerblue;
color: white;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.content {
height: 100px;
}
#hasbgimage {
background-image: url("https://via.placeholder.com/200x100");
background-size: cover;
-webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
<div class="testcontainer">
<div class="header">test with no image</div>
<div class="content"></div>
</div>
<div class="testcontainer">
<div class="header">test with image</div>
<div class="content" id="hasbgimage"></div>
</div>

Add a child div and set your background image on it instead, so it is not overriding the box shadow.
.testcontainer {
width: 200px;
display: inline-block;
border: 1px solid gray;
height: 120px;
}
.header {
position:relative; /*And don't forget this !!!*/
z-index:2;
height: 20px;
background-color: cornflowerblue;
color: white;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.content {
height: 100px;
}
#hasbgimage {
background-image: url("https://via.placeholder.com/200x100/aabbcc/");
background-size: cover;
height:100%;
width:100%;
}
<div class="testcontainer">
<div class="header">test with no image</div>
<div class="content"></div>
</div>
<div class="testcontainer">
<div class="header">test with image</div>
<div class="content">
<div id="hasbgimage"></div>
</div>
</div>

inset box-shadow - same sides and bottom, top without visible shadow

How to make such a box-shadow?:
Sides and bottom is same, top is 1px border, without visible shadow.

I do this that:
div {
box-shadow:
inset 0px -10px 4px -10px rgba(0, 0, 0, 0.6),
inset 10px 0px 4px -10px rgba(0, 0, 0, 0.6),
inset -10px 0px 4px -10px rgba(0, 0, 0, 0.6);
background-color: white;
border-top: 1px solid #bebebe;
border-radius: 0 0 6px 6px;
padding: 5px;
width: 130px;
text-align: center;
}
div:hover {
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.6);
}
<div>dddddddddddd <br>dddddddddddd <br>dddddddddddd <br></div>

Blur the join of 2 borders of different colors?

I have a div with borders with different colors. The design that im working towards blends the point at which these 2 borders join. Can this be done with CSS?
<div class="panel">
dfds
</div>
body {
background: green;
}
.panel {
margin: auto;
width: 300px;
height: 300px;
background: white;
border-radius: 10px;
padding: 10px;
border-right: 6px solid #D7D7D7;
border-bottom: 6px solid #B9B9B9;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
http://codepen.io/anon/pen/XJEWqp
Below you can see the bottom right corner has a sharp diagonal join:
This is the same detail in the design that im creating:

Howsabout this:
body {
background: green;
}
.panel {
margin: auto;
width: 100px;
height: 100px;
background: white;
border-radius: 10px;
padding: 10px;
-webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
-moz-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
}
<div class="panel">
dfds
</div>
Used red and blue to highlight the overlapping

You can use a border-image for this purpose.
div {
margin: 30px;
width: 50px;
height: 50px;
background: #DDD;
border: 10px solid transparent;
-webkit-border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
-o-border-image: url(http://i.imgur.com/7qsGJvm.png'') 30 30 round;
border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
}
<div></div>

CSS - Variations of DIV settings?

I am using the same CSS sheet for all the html pages on our website.
This is the CSS container:
#Container {
position: relative;
top: 5px;
width: 1000px;
height: 600px;
margin: 0 auto 0;
background: #FFF;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
border-color: #CCC;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;
}
This is fine on all the pages except one, which needs the height to be 1000px.
How would I make a variation of the code for one page, instead of copying the entire container settings again for the one html page?

On the page in question give the body a class e.g. 'myPage' then add the below to your css
body.mypage #container{
height:1000px;
}

CSS3 PIE: same style, different presentation

I am using CSS3 PIE for make the box shadow property work in IE 8. As you can see in the image, I have 3 boxes with the same style, but only one of them (the first) is rendered as I want.
HTML
<div class="grid_22">
<div class="panel_third">
<!--WHATEVER-->
</div>
<div class="panel_third panel2">
<!--WHATEVER-->
</div>
<div class="panel_third panel3">
<!--WHATEVER-->
</div>
</div>
CSS
.panel_third{
float: left;
height: 317px;
width: 206px;
padding: 30px;
margin-right:31px;
background: #ffffff;
position: relative;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
/**http://css3pie.com**/
behavior: url(../../../../../dashboard/resources/main/js/libs/pie/PIE.htc);
}
.panel2{
background: url(../img/Box-2-BG.png) no-repeat;
}
.panel3{
background: url('../img/Box-3-BG.png') no-repeat;
margin-right: 0;
float: right;
}
http://jsfiddle.net/QV3GF/

give it like this
.grid_22>div
{
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
/**http://css3pie.com**/
behavior: url(../../../../../dashboard/resources/main/js/libs/pie/PIE.htc);
}
it gives the shadow to all direct child div of .grid_22

Resources