trying to making scrollbar out of the layout as pic 2
is there any way with custom scrollbar or with any plugin?
.notification-container>div{
scrollbar-color: #CFD8DC #FFFFFF;
scrollbar-width: thin;}
.notification-container>div::-webkit-scrollbar-track
{
background-color: #FFFFFF;
}
.notification-container>div::-webkit-scrollbar
{
width: 4px;
background-color: #FFFFFF;
}
.notification-container>div::-webkit-scrollbar-thumb
{
background-color: #CFD8DC;
}
You can fake it, not sure how crossbrowser-safe this solution is.
.container {
width: 400px;
height: 400px;
border: 2px solid black;
}
.scroller {
height: 100%;
width: calc(100% + 20px);
overflow: auto;
}
.content {
height: 800px;
width: 400px;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
<div class="container">
<div class="scroller">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi hic pariatur a sed quas, accusantium laudantium nisi aliquid voluptatibus corrupti illo corporis optio illum non minima debitis, eaque labore vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi hic pariatur a sed quas, accusantium laudantium nisi aliquid voluptatibus corrupti illo corporis optio illum non minima debitis, eaque labore vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi hic pariatur a sed quas, accusantium laudantium nisi aliquid voluptatibus corrupti illo corporis optio illum non minima debitis, eaque labore vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi hic pariatur a sed quas, accusantium laudantium nisi aliquid voluptatibus corrupti illo corporis optio illum non minima debitis, eaque labore vel.
</p>
</div>
</div>
</div>
.notification-container{
position: relative;
margin-bottom: 25px;
overflow-y: hidden;
padding-right: 15px;
margin-right: -15px;}
.notification-container>div{
scrollbar-color: #CFD8DC #FFFFFF;
scrollbar-width: thin;
padding-right: 15px;
margin-right: -15px;}
solved with this code
.notification-container>div have the scrollbar. Giving margin-padding for just this element is enough for chrome and safari. But firefox not working
if the ".notification-container" also has the same margin padding. It works for FireFox too
Related
I'm making a modal where the show modal button when clicked will display the modal right in the middle of the screen and has the exact same width as the main page. but the modal is not as right in the middle as I expected. I think it's because of the overflow style which adds scroll on the right side. how do I solve this?
<body>
<main>
<h1>THIS IS MAIN PAGE</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
mollitia, repellendus, ratione modi saepe iste ea id qui quia autem nisi
distinctio maxime! Repellat, consequatur. Possimus delectus perferendis,
illo vero perspiciatis tenetur debitis provident itaque rem laborum sint
esse temporibus officia reprehenderit nesciunt laudantium, aspernatur
consectetur quia sapiente exercitationem odit. Molestiae necessitatibus,
dolorem illum expedita minus obcaecati dicta distinctio minima?
</p>
<button>show modal</button>
</main>
<div class="modal-container">
<div class="modal-wrapper">
<h2>THIS IS MODAL PAGE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
nobis nulla iure consequuntur provident? Laborum, suscipit. Aut
similique dolor unde tempora laborum voluptates at cupiditate,
deserunt voluptate illum cum explicabo magnam quibusdam quam facere
consectetur aspernatur adipisci. Magnam, inventore harum.
</p>
</div>
</div>
<script>
document.querySelector("button").addEventListener("click", ()=> document.querySelector(".modal-container").classList.add("show"));
</script>
<script src="script.js"></script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: min(calc(100% - 3.125rem), 45.625rem);
height: 200vh;
position: relative;
left: 50%;
transform: translate(-50%, -5%);
background-color: aqua;
}
.modal-container {
position: fixed;
inset: 0;
padding: 20vh 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
overflow: scroll;
pointer-events: none;
transition: 200ms;
}
.modal-container.show {
opacity: 1;
}
.modal-wrapper {
width: min(calc(100% - 3.125rem), 45.625rem);
height: 150vh;
margin: auto;
padding: 1.75rem 1.25rem;
pointer-events: none;
transition: 200ms;
border-radius: 0.5rem;
background-color: aquamarine;
}
Here is a revised example (scroll and centered).
We didn't have the JS 'close' script so that part is left as provided.
There are a few CSS lines we turned off to resolve the issue, and a few of those lines can be switched back on if needed for you main content. Non-scrollable text in popup will need minor further CSS changes.
document.querySelector("button").addEventListener("click", ()=> document.querySelector(".modal-container").classList.add("show"));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
/*-- xwidth: min(calc(100% - 0.1rem), 45.625rem); --*/
height: 80vh;
position: relative;
/*-- xleft: 25%; --*/
/*-- xtransform: translate(-0%, -0%); --*/
background-color: aqua;
}
.modal-container {
position: fixed;
/*-- xinset: 0; --*/
/*-- xpadding: 20vh 0; --*/
background: rgba(0, 0, 0, 0.6);
opacity: 0;
/*-- xoverflow: scroll; --*/
pointer-events: none;
transition: 200ms;
/*--add all below--*/
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.modal-container.show {
opacity: 1;
}
.modal-wrapper {
/*-- width: min(calc(100% - 3.125rem), 45.625rem); --*/
/*-- height: 150vh; --*/
margin: auto;
padding: 1.75rem 1.25rem;
pointer-events: auto;
transition: 200ms;
border-radius: 0.5rem;
background-color: aquamarine;
/*--add all below--*/
height: 50%;
width: 50%;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
<main>
<h1>THIS IS MAIN PAGE</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
mollitia, repellendus, ratione modi saepe iste ea id qui quia autem nisi
distinctio maxime! Repellat, consequatur. Possimus delectus perferendis,
illo vero perspiciatis tenetur debitis provident itaque rem laborum sint
esse temporibus officia reprehenderit nesciunt laudantium, aspernatur
consectetur quia sapiente exercitationem odit. Molestiae necessitatibus,
dolorem illum expedita minus obcaecati dicta distinctio minima?
</p>
<p> </p>
<button>show modal centered</button>
<p> </p>
<button id="myBtn">W3 Open Modal</button>
</main>
<div class="modal-container">
<div class="modal-wrapper">
<h2>THIS IS MODAL PAGE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
nobis nulla iure consequuntur provident? Laborum, suscipit. Aut
similique dolor unde tempora laborum voluptates at cupiditate,
deserunt voluptate illum cum explicabo magnam quibusdam quam facere
consectetur aspernatur adipisci. Magnam, inventore harum.
</p>
</div>
</div>
Here's a good explanation and examples of an absolute centered modal:
codepen
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
.content {
width: 200px;
height: 150px;
padding: 20px;
background: yellow;
overflow: scroll;
box-sizing: border-box;
}
http://jsfiddle.net/v6yjLdnp/
Why doesn't the padding-bottom work in this case when scrolling? And how do I make this possible?
I suppose you mean the padding at the bottom of the scrolled content. This seems to be a browser issue - see the comments. But with the following code it should work properly in all browsers.
Transfer some of the settings to the container, then it works as desired:
body {
margin: 0;
}
.container {
width: 200px;
height: 150px;
overflow: scroll;
}
.content {
padding: 20px;
background: yellow;
}
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
The problem is probably be caused by the scroll bars.
This is a workaround with using pseudo elements in css, but it might solve your problem:
.content::after { content: ''; display: block; width: 100%; height: 20px; }
EDIT: Remove the padding bottom of the content element to make it work in all browsers:
.content { padding-bottom: 0px; }
Total beginner here, learning HTML and CSS (not yet grid and flexbox). I am trying to make a section with two horizontal blocks consisting of an image/icon to the left and text on the right. Very simple, yet I somehow can't get the icon to float to the left of the text. It is stuck on the line below. What am I doing wrong? or what should I add?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="fas fa-chess-pawn fa-3x"></i>
</div>
<br><br>
<div class="primary">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="far fa-play-circle fa-3x"></i>
</div>
</div>
</section>
Bad idea to use float. I suggest you look into flexbox asap.
But if you really want to use it, you should change the HTML a little bit.
Think of it this way. You want the icon to be a 'column' and the title together with the text to be another column.
The best way to achieve that is to wrap the text and title inside a HTML element ( most probably a div )
Then you should specify the width used inside their parent .primary. So for example the icon has 5% and the title and text 95% - 20px which is the margin of the icon.
Also add float:left to the primary div. Because adding float:left to an element ( the icon and text ) gets that element out of the normal flow of the document. ( similar to position:fixed/absolute ) and so, for them to remain ' a part ' of the primary div , you need to add float:left on that div also.
See below
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
float:left;
width:100%;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
width:5%;
}
#strengths .primary .wrapper {
float:right;
width: calc(95% - 20px);
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="fas fa-chess-pawn fa-3x">icon</i>
</div>
<br><br>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="far fa-play-circle fa-3x">icon</i>
</div>
</div>
</section>
I need to display a collection of tiles (laid out using flexbox), where each tile has an "expando" child that - on hover - is supposed to expand beyond the parent limit. This part works, except for z-index. This doesn't surprise me after all, as every tile make its own z-index stacking context. I am just lost of ideas how to solve it.
I would really need to make these tiles and their children self-contained (to be later extracted into an angular component).
HTML
<div class="row">
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
</div>
CSS
.row {
display: flex;
padding: 3em;
}
.holder {
position: relative;
height: 100px;
width: 100px;
background: red;
margin-right: 30px;
z-index: 1;
}
.plate {
display: none;
border: 1px solid limegreen;
background: rgba(255, 255, 255, 0.6);
width: 190px;
color: green;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
padding: 1em;
box-sizing: border-box;
z-index: 1000;
}
.holder:hover .plate {
display: flex;
}
jsfiddle
You have to set z-index on .holder:hover.
.holder:hover {
z-index:10;
}
https://jsfiddle.net/hk149512/3/
You may need to change the z-index for the holder element on :hover, just add to your code:
.holder:hover {
z-index:10
}
.row {
display: flex;
padding: 3em;
}
.holder {
position: relative;
height: 100px;
width: 100px;
background: red;
margin-right: 30px;
z-index: 1;
}
.plate {
display: none;
border: 1px solid limegreen;
background: rgba(255, 255, 255, 0.6);
width: 190px;
color: green;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
padding: 1em;
box-sizing: border-box;
z-index: 1000;
}
.holder:hover {
z-index:10
}
.holder:hover .plate {
display: flex;
}
<div class="row">
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
</div>
fiddle
.chrome-frame {
border-width: 80px 120px 1px 324px;
border-image: url(http://i.imgur.com/m7QqzJi.png) 80 120 1 324 stretch;
border-image-outset: 0;
box-sizing: border-box;
}
<div class="chrome-frame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!</div>
border-image requires me to set huge borders to render my image border correctly, but I don't want my content nudged in that far.
How can I get my content to ignore the borders so that I can use paddings to position it how I want?
Put the border image in the ::before pseudo element and put it behind the text. The text itself can be positioned using padding.
.chrome-frame {
position: relative;
padding: 90px 10px 10px 10px;
}
.chrome-frame::before {
display: block;
left: 0;
top: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
content: "";
border-width: 84px 120px 1px 324px;
border-image: url(http://i.imgur.com/m7QqzJi.png) 84 120 1 324 fill;
border-image-outset: 0;
box-sizing: border-box;
}
<div class="chrome-frame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!</div>
I went with a bit of a different solution. This is a bit more flexible, and I think has better browser compat.
.chrome-frame {
background: #f7f7f7 url(http://i.stack.imgur.com/jNvtF.png) top left repeat-x;
position: relative;
padding: 85px 6px 6px 6px;
border: 1px solid #c2c2c2;
}
.chrome-tl {
background: url(http://i.stack.imgur.com/TVQ3z.png) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 326px;
height: 81px;
}
.chrome-tr {
background: url(http://i.stack.imgur.com/wWuRT.png) top right no-repeat;
position: absolute;
top: 0;
right: 0;
width: 123px;
height: 81px;
}
<div class="chrome-frame">
<div class="chrome-tl"></div>
<div class="chrome-tr"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis ducimus excepturi laudantium quam, quod repellat? A aperiam corporis dicta dolore doloremque explicabo inventore laboriosam molestiae pariatur, perferendis, reiciendis sed.
</div>
Resize it on JS Fiddle to see how it behaves.
If you want to do it in a less hacky way, you can just wrap your text in another div, and then apply negative margin to it, like this:
<div class="chrome-frame">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!
</div>
</div>
.chrome-frame {
border-width: 80px 120px 1px 324px;
border-image: url(http://i.imgur.com/m7QqzJi.png) 80 120 1 324 stretch;
border-image-outset: 0;
box-sizing: border-box;
}
.chrome-frame div {
margin-left: -300px;
}
However, the most elegant way would be to just use the image as a background image instead of a border image.