I use css infrequently, but I thought that the following should create a scrollable area. Instead, it seems to just hide all the text that doesn't fit but provides no way to scroll. Behavior seems the same in chrome/ie/firefox, so I'm guessing I'm just doing something wrong.
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Foo</title>
</head>
<body>
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
</div>
</body>
</html>
style.css
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: hidden;
}
Well you're using overflow-style which isn't supported in any major browser yet ..
Setting overflow to auto or scroll on .scroll-area will have the vertical scrollbar appear as expected
http://jsfiddle.net/kRcaR/1/
You should explicitly set overflow to auto (or to scroll if you need scrollbars appear all the time):
.scroll-area {
overflow: auto;
}
DEMO: http://jsfiddle.net/aNTHx/
You need to set overflow: auto or if you just want the y-axis to scroll overflow-y: auto; overflow-x: hidden;
Your div should have this overflow styling for vertical scrolling:
.scroll-area {
overflow-y: scroll;
}
Or if you want to scroll horizontal:
.scroll-area {
overflow-x: scroll;
}
Your hiding the scroll bar with overflow: hidden;.
If you change to:
.scroll-area {
overflow-style: auto;
overflow: auto;
}
HTML
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum place
</div>
CSS
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: scroll;
}
DEMO
http://jsfiddle.net/YxsLc/1/
EXPLANATION
If You want to scroll content in html elements You should use property overflow: scroll;
Goodluck in future code.
Related
I'm using shape-outside to give a "magazine" feel to a website. Each page has a new image of a person and the text wraps around that person. Shape outside works perfectly and easy! Only issue is that I can't figure out how to make it so the text in one column (left) sets the height not the image (right).
Take this example:
https://jsfiddle.net/kvzmw0sy/22/
Or the raw code
HTML:
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
CSS:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width:100%;
height:50px;
border: 2px solid green
}
What I get is this:
But, what I want is this (see how the image goes behind the footer):
Essentially I want it to work like a background image.
I tried position absolute but it breaks the text wrapping. I don't think i can do this with a background image. And so the only solution I have so far is to use JS to get the height on the left and apply it to the container with an overflow:hidden which I'd really like to avoid.
the new overflow:clip applied to the container will do the job
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
/* .text{
shape-outside: url(https://www.pngjoy.com/pngl/69/1501951_stars-star-images-birthday-png-hd-png-download.png);
} */
.container {
overflow: clip;
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
For better support you can rely on clip-path instead:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
.container {
clip-path: inset(0);
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
I want .content to scroll vertically and hide it's horizontal overflow, .preview and .editor should share the parent's width evenly.
.wrap {
display: flex;
background: gray;
}
.content {
overflow-x: hidden;
overflow-y: auto;
}
.editor textarea {
width: 100%;
height: 100%;
resize: none;
}
.editor {
flex: 1;
}
.preview {
flex: 1;
}
<div class='wrap'>
<div class='editor'>
<textarea></textarea>
</div>
<div class='preview'>
<div class='content'>
LongcontentLongcontentLongcontent
</div>
</div>
</div>
Some bad news for you:
Note: The overflow property only works for block elements with a specified height.
https://www.w3schools.com/cssref/pr_pos_overflow.asp
The 50% issue is caused by box-sizing and default styling of text-area elements; it is overflowing its .editor container, making it look larger than 50%;
Here is some code to do what I believe you're trying to do:
.wrap {
display: flex;
background: gray;
}
.content {
overflow-x: hidden;
overflow-y: auto;
/* without specifying a height, the content will never scroll vertically when using overflow-y:auto, because it will continue to grow to it's content's height otherwise */
max-height: 150px;
}
.editor textarea {
width: 100%;
height: 100%;
resize: none;
box-sizing:border-box; /* prevents drawing outside it's parent */
}
/* without forcing 50% width, flex will let a container's content grow to its content's size. Try with/without */
.editor, .preview {width: 50%}
.editor {
flex: 1;
}
.preview {
flex: 1;
}
<div class='wrap'>
<div class='editor'>
<textarea></textarea>
</div>
<div class='preview'>
<div class='content'>
THISCONTENTGETSCUTOFF_X_LongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontent
THIS CONTENT WRAPS AND SCROLLS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac fermentum nunc. In vestibulum suscipit quam, ac mattis velit convallis quis. Phasellus ut justo id nunc placerat varius. Curabitur feugiat vulputate facilisis. Nulla est leo, posuere aliquet ligula at, ultricies placerat felis. Curabitur nec tincidunt arcu, sit amet varius nunc. Cras varius risus a tellus auctor egestas. Pellentesque sagittis tortor ac massa facilisis porta. Proin arcu nisl, facilisis non orci ut, tempor tincidunt arcu. Aenean luctus lacinia sapien, at sagittis enim pharetra non. Phasellus blandit pharetra hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam at feugiat diam, ut porttitor quam.
</div>
</div>
</div>
If you go to youtube, you can see how their sidebar scrollbar becomes visible as soon as your mouse moves over it. I've been trying to replicate this, but my div only shows the scrollbar once I start actually scrolling.
I have overflow-y: auto;, but I've also tried it with overflow-y: scroll;, which had the same effect.
How can I make the scrollbar visible right away?
you can try this .. maybe it will help you..
it's not looking good but i think it should work..
i use scroll event . if you need use wheel event . set time delay as you need...
(function () {
var timer;
document.querySelector('div').addEventListener('scroll', function (event) {
if (event.type == 'scroll') {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: block; }";
document.body.append(addCSS);
}
clearTimeout(timer);
timer = setTimeout(refresh, 300);
});
var refresh = function () {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: none; }";
document.body.append(addCSS);
};
})();
.customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
margin: 10px;
}
::-webkit-scrollbar {
display: none;
}
.customized-scrollbar:hover::-webkit-scrollbar {
/* display: block; */
cursor: pointer;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 50px;
/* background-color: #aaa; */
background-color: transparent;
}
/* Add a thumb */
.customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
height: 100px;
}
<div class="customized-scrollbar hidden-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula
</div>
by mouseover and mouseleave event..
document.querySelector('div').addEventListener('mouseover', function (event) {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: block; }";
document.body.append(addCSS);
});
document.querySelector('div').addEventListener('mouseleave', function (event) {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: none; }";
document.body.append(addCSS);
});
html{
scroll-behavior: smooth;
}
.customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
margin: 10px;
}
::-webkit-scrollbar {
display: none;
position: fixed;
margin-right: -10px;
}
.customized-scrollbar:hover::-webkit-scrollbar {
/* display: block; */
cursor: pointer;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 50px;
/* background-color: #aaa; */
background-color: transparent;
}
/* Add a thumb */
.customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
height: 100px;
}
<div class="customized-scrollbar hidden-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula
</div>
by hover effect
.mostly-customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
margin:10px;
}
.mostly-customized-scrollbar::-webkit-scrollbar {
display: none;
}
.mostly-customized-scrollbar:hover::-webkit-scrollbar {
display: block;
cursor:pointer;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 50px;
/* background-color: #aaa; */
background-color: transparent;
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
height: 100px;
}
<div class="mostly-customized-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula
</div>
try this:
#container {
margin: 20px;
height: 100px;
border: solid 1px red;
background-color: #ddd;
overflow-y: hidden;
}
#container:hover {
overflow-y: scroll;
}
<body>
<div id="container">
<br> hello
<br> hello
<br> hello
<br> hello
<br> hello
<br> hello
<br> hello
</div>
</body>
I have a <div>. In it, there is a <p> that on the screen looks like the picture below
I need to have the horizontal rules under each line of the paragraph (horizontal rules marked in red in the picture). The most important thing is that the horizontal rules should take the whole width of the parent <div> so text-decoration: underline won't work here. I drew the lines using repeating linear gradient like this
p.text--underline {
line-height: 1.45;
background: repeating-linear-gradient(
to bottom,
transparent calc(1.5em - 1.5px),
black 1.5em,
transparent 1.5em,
transparent calc(3em - 1.5px)
);
box-shadow: inset 0 0.5em white;
}
But the problem is that the horizontal rules are visible in the browsers, but are not visible when printing. I need them to be visible on paper. How to do this?
You can wrap each word with <span> and draw lines with border of each word's :after. You will need to add some JavaScript if the text inside <p> is not fully under your control and you can't wrap words with spans on the server.
var p = document.querySelector('p');
var words = p.textContent.split(/\s+/gm);
p.classList.add('container');
p.innerHTML = words.map(function(w) {
return '<span class="word">' + w + '</span>';
}).join('\n');
.container {
position: relative;
}
.word:after {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
border-bottom: 1px solid black;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit diam justo, in vulputate massa sodales egestas. Aenean luctus sapien eleifend ipsum venenatis, nec pharetra sem congue. Quisque nec sem leo. Donec posuere nibh ut nibh vehicula, ut hendrerit mi sollicitudin. Proin sed sapien vel sem ultrices euismod eget quis urna. Nulla facilisi. Sed eu mi ac nulla consequat lobortis ac ac elit. Mauris sit amet ante ac ante pulvinar ultricies a ut ante. Suspendisse metus nulla, porttitor et augue quis, consectetur fermentum lorem. Phasellus metus est, ultrices quis enim porta, facilisis cursus ante. Ut justo quam, suscipit nec facilisis eget, elementum ac lectus. Nulla at auctor ipsum.</p>
</div>
Plunker: https://plnkr.co/edit/tJfLhixTTJ53FVe10ugw?p=preview
I've tested in Chrome, Firefox and Safari, and it worked fine in all of them.
you should check this
You can make an HR that's printable without changing browser settings like this:
hr {
display: block;
height: 1px;
background: transparent;
width: 100%;
border: none;
border-top: solid 1px #aaa;
}
I have some adsense ads displayed on a test page using sticky-kit v1.1.2.
When I scroll down the page (I am using Chrome browser), the ads flash/reload when the sticky-kit becomes sticky.
I have read this trouble shooting guide that does seems to address the exact issue that I am experiencing, but does not work for my code.
My code is displayed below. I have deliberately left out the two following div's, because I am unsure where they should be inserted (I have tried many scenarios, but none work for me):
<div class="sticky-parent">
<div class="sticky-spacer">
</div>
</div>
Here is my HTML code:
<div id="id_side_advert_container" class="side_advert col-md-2">
<div class="margin-bottom-20">
<div id="id_side_advert_wrapper">
{# google adsense code to display side advertiements #}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- zoodal-side-advertisement-responsive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890112987"
data-ad-slot="1234567890"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
Here is my JQ code:
// sticky-kit code for the side advertising sticky - with an offset of 15px when sticky.
$("#id_side_advert_container").stick_in_parent({
offset_top: 15,
parent: ".sticky-parent", // note: we must now manually provide the parent
spacer: ".sticky-spacer",
});
// the following code is the workaround so that the sticky element does not disappear when bottom -
// taken from: https://github.com/leafo/sticky-kit/issues/31 danxshap
$('#id_side_advert_container')
.on('sticky_kit:bottom', function(e) {
$(this).parent().css('position', 'static');
})
.on('sticky_kit:unbottom', function(e) {
$(this).parent().css('position', 'relative');
})
The following shows how that solution in your question should be set up to work (here I'm using an iframe to simulate your ads).
$("#sidebar").stick_in_parent({
offset_top: 15,
parent: ".content", // note: we must now manually provide the parent
spacer: ".sticky-spacer",
});
// the following code is the workaround so that the sticky element does not disappear when bottom -
// taken from: https://github.com/leafo/sticky-kit/issues/31 danxshap
$('#id_side_advert_container')
.on('sticky_kit:bottom', function(e) {
$(this).parent().css('position', 'static');
})
.on('sticky_kit:unbottom', function(e) {
$(this).parent().css('position', 'relative');
})
.content {
overflow: hidden;
}
.content .sidebar {
width: 200px;
margin: 10px;
margin-right: 0;
float: left;
overflow: hidden;
font-family: sans-serif;
}
.content .main {
margin: 10px;
margin-left: 222px;
border: 1px solid blue;
height: 2000px;
overflow: hidden;
}
.footer {
margin: 10px;
text-align: center;
font-size: 13px;
border-top: 1px dashed #dadada;
color: #666;
padding-top: 10px;
min-height: 233px;
}
.sub {
color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>
<h1>Example sticky flicker fix</h1>
<div class="content">
<div class="sticky-spacer">
<div id="sidebar" class="sidebar">
<em>Ads go here. <span style="color:maroon">Demo'ing with an iFrame instead.</span></em>
<iframe frameborder="0" scrolling="no" width="100%" height="100%" src="https://unsplash.it/200/200" name="imgbox" id="imgbox">
<p>iframes are not supported by your browser.</p>
</iframe>
</div>
</div>
<div class="main">
This is the main column
<p class="sub">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.
</p>
<p class="sub">
In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in
porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl.
</p>
<p class="sub">
Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In vel mollis dolor.
</p>
</div>
</div>
<div class="footer">
My very tall footer!
</div>
With this I don't notice any flickering in Firefox or Chrome.
I recommend, as a test, you try placing your ads in this JSFiddle (it is the same code as the above snippet): https://jsfiddle.net/2jkf4qcr/1/.
I had the similar issue with sticky-kit library. The solution was to not use the spacer (spacer: false):
<div class="sticky-parent">
</div>
$("#id_side_advert_container").stick_in_parent({
offset_top: 15,
parent: ".sticky-parent",
spacer: false,
});