I have a div with the overflow-y: scroll; property I need to remove this property when user execute the print (Ctrl+P)
<div id="taskList" class="uk-padding-small">
</div>
<style>
#taskList{
overflow-y: scroll;
min-height: 400px;
height: 400px;
}
#media print {
#taskList{
overflow-y: auto;
min-height: auto;
height: auto;
}
}
</style>
This work fine with other properties like width, margin, padding. But I can't overwrite the overflow-y property and my document don't show the full content.
You can try this runnable.
https://jsfiddle.net/atsuya007/j3f6d8ht/
be sure to make the media print at the end of the CSS.
By reversing the logic, it works
.fullheight{
min-height:100%;
height:fit-content;
}
#media screen {
.fullheight{
height:100%;
overflow:auto
}
}
Related
I have this code:
html,
body,
#container {
width: 100%;
height: 100%;
}
#container {
display: flex;
background: #ddd;
}
#width {
width: 200px;
height: 100%;
resize: horizontal;
overflow: hidden;
background: #eee;
}
#remaining {
flex-grow: 1;
overflow: scroll;
}
#resize {
width: 200px;
height: 200px;
resize: both;
overflow: hidden;
background: #ccc;
}
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div id="width">Width</div>
<div id="remaining">
<div id="resize">Resize</div>
</div>
</div>
</body>
</html>
Here is what I am trying to make:
You can resize #width
You can resize #resize
The issue is that when I resize #resize, #width shrinks to make room for it.
What I am looking for is when I resize, #remaining shows a scroll bar, and doesn't resize anything else.
I believe that this is happening because #remaining doesn't have a width property, but instead flex-grow. And so it allows it to vary in width, because it doesn't have a set width.
I am looking for a pure HTML/CSS answer, but JavaScript would work too. (of course as long as it is reliable, won't break, and doesn't massively slow down execution using methods such as setInterval)
I also do want to say that I am using a flex layout on #container only for the purpose of making #remaining take up all of the remaining space, and if display: flex is removed, it would still work with the full code that I have.
If you abandon the flex:grow and instead calculate the width of remaining in the css it works.
.remaining{
width: calc(100% - 200px);
overflow-x: auto;
}
With a fiddle
I am having a problem with scrolling on the mobile version (1299px #media defined rule) of the vertical menu on my website. Link is: https://my-digital.ro/wp/
Video explaining problem: https://youtu.be/K9fQJPb6WMI
So basically, my issue is that I am trying to make the whole menu scrollable on mobile. It worked fine when I added overflow: scroll property to the elements, except that it does not work when a sub-menu is expanded. It just gets stuck, as it was overflow: hidden and I can not scroll further.
Actual CSS is:
.clearfix {
display:block;
clear: both;
position: sticky;
}
#media only screen and (max-width: 1299px) {
#content {
position:absolute;
padding-left:0px;
z-index:102
}
#main-nav {
overflow: scroll;
}
.clearfix {
overflow: scroll;
}
header {
position:fixed;
min-height:100%;
height:auto; }
I have tried adding overflow:scroll even to the header elements inside #1299px rule and others too, including ul> li .submenu but nothing works :(.
give some relative height to the main_nav:
#main-nav {
overflow-y: auto;
height: 90vh;
}
where vh is relative to 1% of the height of the viewport.
And please use overflow: auto; instead of overflow: scroll;
Just make these changes in your style.css
#media only screen and (max-width: 1299px)
#main-nav {
overflow-y: auto;
height: 400px;
}
I have an error using overflow:auto.
The error: http://cl.ly/image/0K1W3t151T0S
The code I used http://codepen.io/sebazelonka/pen/pDGin
Even when the height of the content has the same height than container, the scrollbar is visible. I tried different options, but the error persist.
I tried it in different browsers, including FF, Chrome, Safari and Opera, and always have the same error.
HTML
<div class="image-viewport portrait" style="width: 100%; height: 400px;">
<div class="image-wrapper" style="width: 100%; height: 400px;">
<img src="http://www.hdwallpapersview.com/wp-content/uploads/2013/05/landscape_7.jpg">
</div>
</div>
CSS
body {
background: #999;
}
.image-viewport {
overflow: auto;
}
.image-wrapper {
background: #333;
text-align: center;
}
.image-viewport.portrait img {
height: 100%;
}
Here are 2 different solutions:
Add vertical-align:top to the img element. (default is vertical-align:baseline)
Change the img to a block level element.
Updated Codepen example using vertical-align:top
.image-viewport.portrait img {
height: 100%;
vertical-align:top;
}
Updated Codepen example using display:block
Note: For horizontal centering, use margin:0 auto, as text-align:center will no longer work, as the element is not an inline element anymore.
.image-viewport.portrait img {
height: 100%;
display:block;
margin:0 auto;
}
Also, don't be confused with the scrollbar added on the body if the window is too small. The scrollbar on the img wrapper has been removed.
Just change your .image-viewport class to this:
.image-viewport {
overflow: hidden;
}
I am trying to prevent the scroll bar from appearing when the div .boxB overflows and I am unsure why my code is not working. In other words, I am trying to remove the horizontal scroll bar only when the browser width is less then the width of boxB. This way, the scroll bar will only appear when the browser width is less then .boxA.
http://imgur.com/yQDFG
The light blue represents the screen. The yellow is a background div, and the aqua is the foreground div where its width exceeds the screen width. In this case, I do not want the scroll bar to appear. I have used overflow-x:hidden but that did not do the trick.
HTML:
<div class="boxA">boxA
<div class="boxB">boxB</div>
</div>
CSS:
.boxA {
background: yellow;
width: 800px;
height: 600px;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
overflow-x: hidden;
}
May be, overflow-x: hidden; must be uses for .boxA?
You just need to write
overflow: hidden
Try this css:
.boxA {
background: yellow;
width: 800px;
height: 600px;
overflow-x: hidden;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
}
overflow must be on a tag which wraps too large content (in your case - boxA wraps boxB). So, if you do not want something to go outside wrapper - you must put overflow on wrapper
In your HTML code, boxeA is the parent and Box B is the child.
CSS property overflow used like this :
.boxeA
{
overflow: hidden;
}
will prevent a part of the boxeB (which is the child of boxeA) to be displayed when it is more bigger than it's own parent.
boxeA is like a mask on boxeB.
in the url you have given, to prevent the aqua boxe to be entirly displayed, you have to put the aqua boxe as a child of the light blue one,
and give the light blue box a css property like this :
.light_blue
{
overflow: hidden;
}
Now that I understand what you want, here is a possible solution:
http://jsfiddle.net/dy8g5/3/
Parameters:
.boxB must be visible outside of .boxA, with no horizontal scrollbar.
The browser should not have a horizontal scrollbar, if the browser width is smaller than the width of .boxB
The solution was to use a media query to hide the horizontal scrollbar, IF the browser width is smaller than the width of .boxB
#media all and (max-width: 1001px) {
body {
overflow-x: hidden;
}
}
#media all and (max-width: 801px) {
body {
overflow-x: visible;
}
}
.boxA {
background: yellow;
width: 800px;
height: 600px;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
overflow-x: hidden;
}
I have div (#child) which won't expand to the full height of it's parent (#parent). I've set the height for both html and body. It works if I set the parent's height as 100%, but I want the parent to have a minimum height, and the child to expand to the parent's full height.
HTML:
<html>
<body>
<div id="parent">
<div id="child">
<p>This area should be have the same height as it's parent.</p>
</div>
</div>
</body>
</html>
CSS:
html, body, header, h1, p { margin: 0; padding: 0; }
html { background-color: #DDD; height: 100%; }
body { background-color: #DAA; height: 100%; }
#parent {
min-height: 70%;
height: auto !important;
height: 70%;
background-color: #AAD;
}
#child {
height: 100%; /* why isn't this working ? */
width: 80%;
margin: auto;
background-color: #ADA;
}
JSFiddle: http://jsfiddle.net/nxVNX/11/
It works when you remove the !important; property. Maybe that's the problem?
I tried several other methods, but they didn't work, so the solution above could be the only one, I guess.
height: auto !important;
Don't ever use !important, because it cannot be overriden, work with it is harmfull.
It didn't work because it always used height: auto; not height: 70%;
A rule that has the !important property will always be applied no
matter where that rule appears in the CSS document.
So i recommend to you remove this line and it will works.
Have look for more information about What does !important mean in CSS?.
Am not sure why this is not working , but this will work
#parent {
min-height: 70%;
height: 100% !important;
height: 100%;
background-color: #AAD;
}