I want horizontal overflow and when the screen width is not that wide the DIV starts scrolling right - left, but I want it to look not that ugly I have it right now (scrollbars in the bottom of the div).
.wrapper {
position: relative;
overflow-x: scroll;
overflow-y: hidden;
}
.content {
margin: 0 auto;
width: 1198px;
}
HTML
<div class=wrapper>
<div class=content">
My content here..
</div>
</div>
And the other question - is there setting for CSS what allows "swipe" for the div instead of "drag and move".. ?
For a pure CSS solution with browser support you could use the combination of ::-webkit-scrollbar and some padding like this:
.wrapper {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
overflow: auto;
padding-right: 17px; /* This hides the right scrollbar */
padding-bottom: 17px; /* This hides the bottom scrollbar */
}
.content::-webkit-scrollbar {
display: none;
}
<div class="wrapper">
<div class="content">
<img src="https://via.placeholder.com/1500x700" />
</div>
</div>
Better to play around with in JSFiddle: https://jsfiddle.net/thepio/pavb2hfy/
Related
I'm trying to understand why the div rendered by the below markup cannot be scrolled vertically with the scroll wheel. It can be scrolled by dragging the scrollbar, or even by using the scroll wheel while hovered over the scrollbar.
If I remove either the overscroll-behavior: none or the overflow-x: hidden, the scrolling works as expected.
Why is this the case? Is there part of the CSS spec I can look at to better understand this interaction?
* {
overscroll-behavior: none;
}
.container {
width: 300px;
height: 100px;
overflow: auto;
}
.content {
height: 2000px;
background: red;
overflow-x: hidden;
}
<div class="container">
<section class="content"></section>
</div>
https://codepen.io/dyancat/pen/eYyyaNr
I think the issue is, that you are tying to scroll the container with focus on the content which is not scrollable. This is not possible with overscroll-behavior: none.
Please see the modified snippet, where you are able to scroll the container (green), but not the content (red), since the content is not the element which is scrollable.
* {
overscroll-behavior: none;
}
.container {
width: 300px;
height: 100px;
background: green;
overflow: auto;
}
.content {
height: 2000px;
width: 200px;
background: red;
overflow-x: hidden;
overflow-y: scroll;
}
<div class="container">
<section class="content"></section>
</div>
There are multiple questions named this way, but I didn't find one that applies to my case, so here I am:
In this snippet:
#container:hover {
overflow-x: hidden;
}
#container {
position: relative;
width: 400px;
height: 40px;
background: red;
margin: 2em;
}
#child {
position: absolute;
bottom: 0;
}
<div id="container">
<div id="child">
a<br/>
b<br/>
hover<br/>
me
</div>
</div>
You can see that overflow-x, which is applied when you hover the red box, will also hide the overflow-y (at least on Chrome). This is annoying because I have a tooltip that I would like to be able to overflow above the red box, and in the meantime I have a menu that will slide from the right side and that should stay hidden.
Is this a bug? Is there a workaround?
You can't change the way overflow-x and overflow-y behave (it's the same in Firefox and other browsers), but you can change the way your HTML is organized.
Put everything that you want to hide when overflowing in a single wrapper. Put your tooltip in another wrapper.
Something like this may suit your needs:
#container {
position: relative;
width: 400px;
background: #f77;
margin: 3em 2em;
}
#child {
overflow: hidden;
position: relative;
}
#menu {
position: absolute;
left: 100%;
top: 0;
background: #dd2;
transition: .2s;
}
#child:hover #menu {
transform: translateX(-100%);
}
#tooltip {
position: absolute;
bottom: 100%;
}
<div id="container">
<div id="child">
hover<br/>
me
<div id="menu">
menu
</div>
</div>
<div id="tooltip">
a<br/>
b
</div>
</div>
Is the clipping behavior a bug?
No, the clipping is in accordance with the spec.
UAs must clip the scrollable overflow area of scroll containers on the
block-start and inline-start sides of the box (thereby behaving as if
they had no scrollable overflow on that side).
In your case, the "block-start" side is the top, and the "inline-start" side is the left. That's why you can put your tooltip below the content, and it will trigger a scrollbar.
#container:hover {
overflow-x: hidden;
}
#container {
position: relative;
width: 400px;
height: 40px;
background: red;
margin: 2em;
}
#child {
position: absolute;
/* bottom: 0; */
top: 0;
}
<div id="container">
<div id="child">
hover<br/>
me<br/>
a<br/>
b
</div>
</div>
So why is it possible to scroll to content overflowing below the box, but not possible to simply make it visible? The reason is that when any overflow property is set to hidden, the entire box becomes a scroll container.
[A scroll container] allows the user to scroll clipped parts of its
scrollable overflow area into view.
You can use overflow: clip, which does not turn the box into a scroll container. If you clip in both direction, you can also adjust the distance at which clipping occurs as well using overflow-clip-margin :
#container:hover {
overflow-x: clip;
}
#container {
position: relative;
width: 200px;
height: 40px;
background: red;
margin: 2em;
}
#child {
position: absolute;
bottom: 0;
}
<div id="container">
<div id="child">
aazkopekzapoekzapoekzapoekzapoekpozakepozakepozakeoza<br/>
b<br/>
hover<br/>
me
</div>
</div>
I'm looking to build a gantt chart with the days, months and years across the top and the tasks below them.
Here is what I have so far:
So in the image above, the scroll-x is working on everything including the blue, red and yellow divs and the grey div below them. This is to ensure that as you scroll across, the days stay with the contents of the grey div. scroll-y is only acting on the grey div with the blue campaign name div in it.
Here is the problem:
The problem is that when you move the scroll-x of parent, the scroll-y moves across the screen (so that it is sitting in the middle of the parent div). What I'm looking to do is have the scroll-x work on all of the parent's content and the scroll-y only work on the grey div but for the scroll bar to stay on the far right of the parent.
Any advice would be really appreciated and thanks in advance.
css:
.container {
position: relative;
}
.parent {
overflow-x: scroll;
overflow-y: hidden;
height: 100%;
width: 100%;
position: absolute;
}
.date {
width: 2000px;
height: 25px;
float: left;
}
.hold_content {
overflow-y: scroll;
overflow-x: hidden;
height: calc(100% - 50px)
}
.content {
height: 2000px;
width: 2000px;
float:left;
}
html
<div class="container">
<div class="parent">
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="hold_content">
<div class="content"></div>
</div>
</div>
</div>
So, the scrollbar is relative to whatever it's scrolling, which, here, is the hold-content div. And, unfortunately, when that's set to its full width of 2000px, that means the scroll-y scrollbar is not visible because it's offscreen, like so:
html {
box-sizing: border-box;
font-family: sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body,
.container,
.parent {
height: 100vh;
}
html,
body,
div {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.parent {
overflow-y: hidden;
}
.date {
height: 25px;
width: 2000px;
}
.date:nth-of-type(1) {
background: blue;
}
.date:nth-of-type(2) {
background: red;
}
.date:nth-of-type(3) {
background: yellow;
}
.hold_content {
background: silver;
height: calc(100vh - 75px);
overflow: scroll;
width: 2000px;
}
.content {
height: 2000px;
text-align: center;
width: 2000px;
}
<div class="container">
<div class="parent">
<div class="date">Year</div>
<div class="date">Month</div>
<div class="date">Date</div>
<div class="hold_content">
<div class="content">
<button>Campaign Name</button>
</div>
</div>
</div>
</div>
Not sure if that's ideal or what you were going for. If you want the scrollbar to always be connected to the window (as it is by default), you're probably better off not scrolling these individual divs and instead using position:fixed on your date divs.
Note that this solution uses both viewport units (http://caniuse.com/#feat=viewport-units) and calc (http://caniuse.com/#feat=calc). Also, my code doesn't perfectly mirror your CSS because the code you provided didn't match up with your screenshots.
My container is not touching my footer for the majority of cases and I'm not sure what's going on.
So here is my CSS code:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
section {
height: 100%;
}
#container {
overflow: auto;
width: 80%;
margin: 0 auto;
background: red;
height: 100%;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Here's my HTML:
<body>
<div id="container">
<section>
<p>Content goes here</p>
</section>
</div>
<div class="footer">Content</div>
</body>
So I have all of the heights set for parent elements,but there's still a big gap between the container and the footer. In cases where the content takes up the whole page, the footer and container ends up touching, but the content for some reason gets lost in the footer. How can I solve this issue?
Height based on percentage are tricky. vh is much better for such purposes.
Here is the solution: JSfiddle
#container {
overflow: hidden;
width: 80%;
margin: 0 auto;
background: red;
height: 100vh;
}
Make one adjustment to your CSS:
Add height: 100% to the html element.
html {
height: 100%; /* NEW */
min-height: 100%;
position: relative;
}
This will clear the way for all child elements to recognize their percentage heights, and the container will expand. Your min-height: 100% will still work because min-height overrides height.
DEMO: http://jsfiddle.net/au6tcodc/
(You'll notice a vertical scrollbar on the container in the demo. This is caused by the overflow: auto declaration in #container. If you want to remove the scrollbar switch to overflow: hidden (see all overflow values).
I have an exotic design that needs the following. The left side must scroll, while the right side + top head must stay put (fixed). See attached image.
I can accomplish this by position: fixed on the top and right side. The top & right hand side stays put while the left scrolls.... BUT then the PROBLEM is that there is NO scroll bar anymore if anybody zooms in and you also cannot scroll left to right to see whole page
How would one attack such a layout?
Thank You.
Could not post code before - let me try again:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exotic</title>
<style type="text/css">
#top {
background-color: #FF0;
width: 1800px;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
}
#sideLeft {
float: left;
width: 950px;
background-color: #9C0;
clear: left;
}
#sidebarLeft {
background-color: #0CC;
height: 800px;
width: 300px;
float: left;
}
.list {
float: left;
width: 600px;
margin-top: 100px;
}
#ordoner {
background-color: #F90;
float: left;
width: 640px;
height: 800px;
position: fixed;
top: 50px;
left: 950px;
}
#sidebarRight {
width: 210px;
height: 800px;
position: fixed;
top: 50px;
left: 1590px;
background-color: #0CF;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="sideLeft">
<div id="sidebarLeft"><!--end #sidebarLeft--></div>
<div class="list"><!--end .lisist--></div>
<!--end #sideLeft--></div>
<div id="ordoner"><!--end #ordoner--></div>
<div id="sidebarRight"><!--end #sidebarRight--></div>
<div id="footer"></div>
</body>
</html>
Clarification:
My css reflects 2 things in the right hand side but the point is that the right and the top should be static while the left scrolls... AND they should be horizontally scrollable IF a user zooms :)
Also, I've tried wrapping things in a container div, but that has its own problems - it scrolls but never reaches the right hand side if the window is not maximized.
Thanks again.
To clarify: As an example to get my point across... please resize the stackoverflow window to half your horizontal screen size... Now see how you can scroll left to right? If you zoom in, you can scroll left to right also to see the whole page. Well, in my layout, which works in full screen browser mode... once I resize that scroll bar at the bottom does not appear at all leaving the user with no ability to scroll horizontally. See picture below
Fiddle
http://jsfiddle.net/moby7000/tWb3e/
Its not very hard to create a layout like this.
I created one for you, see that Working Fiddle
HTML:
<div class="Container">
<div class="Header">
<p>The Header div height is not fixed (But he can be if you want it to)</p>
<p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
</div>
<div class="Content">
<div class="Wrapper">
<div class="RightContent">
<p>You can fix the width of this content.</p>
<p>if you wont, his width will stretch just as it needs to.</p>
</div>
<div class="LeftContent">
<p>this will scroll</p>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #6ea364;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: purple;
overflow: auto;
}
.RightContent
{
background-color: orange;
float: right;
margin-left: 10px;
}
Bonus:
with a little change in the CSS, you can create a beautiful scrolling.
See that Fiddle
Edit:
If you want to set a width value to the left side, that is actually bigger then the body size (and to have an horizontal scroll), do it that way.
<div class="LeftContent">
<div style="width:1200px;"> <-- better to aplly the width from the CSS
..<The content>..
</div>
</div>
you need to add overflow:auto; to the area you want to scroll.
Have you tried
overflow-y: scroll;
in body?