How to make the div become a container with scroll bar? - javascript

This is the simple code:
<div id="container">
<div id = "information">
</div>
</div>
When I change the "information" to width 1000, and container width 100, the "information" become very long, but I would like to let the information div inside the div...I means, I want the container have a scroll bar, if the information's width is longer than the container. How can I do so? Thank you.

#container {
overflow: auto;
}

This should do the trick:
#container
{
overflow: auto;
}

Set overflow: auto in the stylesheet.
That said, it is almost always better to make use of the available space and not introduce small regions with their own scrollbars (which are harder to deal with with AT, and require scrolling more frequently to read)

Or use overflow-x and overflow-y to limit the scrolling to just vertical or horizontal.
#container { overflow-x: auto; } /* Horizontal scrolling only */
or
#container { overflow-y: auto; } /* Vertical scrolling only */

Related

How to remove scrollbar on web page, while it isnt required?

I have a popup menu and i want scrollbar to appear only when it can scroll ("when overflow").
But if i apply
.popup-window {
overflow-y: scroll;
}
It appears like this (dont care about text):
Screenshot
On real page it looks worse
It's simple, you shouldn't add overflow-y: scroll, you need default property
.popup-window {
overflow-y: auto;
}
Scroll will appear if block overflow by y. Probably you need to add overflow-x: hidden;
Use overflow:auto to make it work with overflow-x and overflow-y .
It will only add scrollbar if it is needed.
.popup-window {
overflow: auto;
}
Use
.popup-window {
overflow-y: hidden;
}

How to set 100 % height without having a vertical scrollbar?

Context
I have a navbar with a fixed height. I want the space underneath to fill the rest of the screen vertically. I also need to have a fixed height because I have a container inside the page that has a list that is scrollable but without scrolling the whole page overflow: hidden
The Problem
When I set a height on all parent elements of 100% I get a vertical scrollbar. I found some answers on SO about "margin collapse" but nothing that could solve my problem.
100vh also won't work without having a scrollbar.
Here is the css for setup the height (#__next is just a div where next.js renders the page):
html,
body,
#__next {
height: 100%;
width: 100%;
}
The navbar is just a fixed pixel height, and the space below has height: 100%
Here is a screenshot that shows the vertical scrollbar:
I can't find any problems on the chrome inspector.
This is how it should look (design file):
Do you know how to solve this? I need to have both containers from screen "SippetPanel" and "SnippetContent" to take the remaining height without adding a scrollbar. It should also work to have a inner scrollbar with overflow hidden (later on when there are many items in the list like from design file)
Be aware that percentual heights refer to the height of the parent.
You can use calc() to solve your issue:
#__next{
height: calc(100% - navbarpx);
...
}
calc()
For the padding issue you can look into border-box.
I usually just try different vh values, that means 90vh, 95.5vh etc. so it all sits perfectly. You can try to meddle with body position: absolute etc., but that would push everything into the navbar, so then you would need to fix it with additional margin-top.
So the best solution I see is to try different vh values for the height and find the sweet spot. You will need to do the same for different phone types as well with media queries, but it shoudn't really be hard.
One of the ways is to use flex-box, it allows you to explicitly say(take all available height.
.body {
display: flex;
flex-direction: column;
}
.navbar {
flex: 30px 0 0;
/* 30px height and do not grow or shint */
background: red;
}
.content {
flex-grow: 1;
/* take all available space */
background: blue;
}
.body, html, body {
width: 100%;
height: 100%;
}
<div class="body">
<div class="navbar"></div>
<div class="content"></div>
</div>

Hide horizontal off-screen overflow of a div that has a large width

How do I hide the horizontal, off-screen overflow of a <div> that has a large width set on it? For example:
HTML:
<div class="example">
</div>
CSS:
.example {
height: 100px;
width: 10000px;
background-color: black;
position: absolute;
overflow: hidden;
}
Here is an example fiddle that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.
Edit: Adding hidden overflow-x on the parent element does not work on small width iOS devices.
You can set overflow: hidden on the elements container. In this case it's the body.
body {
overflow: hidden;
}
You're nearly there!
Setting the overflow of the .example class is only hiding any overflowing content inside of it, though.
You would need to set the overflow of the parent container of .example, for this to work - i.e. whatever container it is inside of.
As you mentioned in your OP, you want to hide horizontal scrollbars.
For this, you would need to set
overflow-x: hidden
But (as mentioned), be sure this is on the parent container of .example.
This could be the body, or another div etc. HTH.
e.g.:
body, .parent-container {
overflow-x: hidden;
}
You can use overflow-x: hidden in CSS to hidde only horizontal scroll.

Align center when element width < viewport, align right + scroll when element width > viewport

I'd like to have an element centered inside a viewport as long as it is smaller than the viewport and scrollable + aligned right as long as it is bigger than the viewport. Like this:
First I tried without Javascript, but float and overflow are knocking each other out. Then I tried putting a div with float:right next to the element and setting it's width programatically through Javascript. But the element wouldn't stick to the right when it's smaller than the viewport.
I'm out of ideas now, any suggestions would be very welcome.
I have a solution, which works if it's possible for you to replace the regular spaces inside the text with non-breaking-space entities :
http://codepen.io/anon/pen/vKgydN
Here is the essential part of the settings:
.x1 { /* wrapper for text container */
display: flex;
flex-direction: row-reverse;
overflow: hidden;
}
.x2 { /* text container */
flex: 0 0 auto;
display: inline-block;
align-items: flex-start;
margin: 0 auto;
}
So it's a reverse flex container with only one flex item which is not allowed to grow or shrink, has margin: 0 auto for centering and align-items: flex-start for right alignment when it's becoming narrower than the parent element/viewport.
EDIT/additional remark: I forgot about the scrolling ability, and right now I can't find a solution for it. Nevertheless, I leave this "half answer" here - maybe someone else comes up with the rest....
Meanwhile I have achieved the desired behaviour by utilizing JQuery. It's not perfect and I still wish there would be a solution without Javascript.
Here's what I've done to make it work.
HTML:
<div class="breadcrumb-scroller-container">
<div class="breadcrumb-scroller">
scroller content
</div>
</div>
CSS:
.breadcrumb-scroller-container {
text-align: center;
}
.breadcrumb-scroller {
overflow: auto;
white-space: nowrap;
}
Javascript (JQuery):
$(document).ready(function() {
// scroll left to a maximum of 10000px just to be sure
$(".breadcrumb-scroller").scrollLeft(10000);
});
If you have timing issues with $(document).ready() firing too early and before the scroller has been initialized by the browser, give it a short delay:
$(document).ready(function() {
setTimeout(function() {
$(".breadcrumb-scroller").scrollLeft(10000);
}, 500);
});

CSS to span column height to window height?

I want to make the left and right column span to the window height and give the user a scrollbar to independently scroll the two columns. How can I do this?
I've been trying min-height: 100% and height: 100% but it doesn't seem to work no matter where I use it.
I setup a JSFiddle here: http://jsfiddle.net/Legend/t5cUA/1/
EDIT: I don't want to add position: fixed. I still want the columns to align if the user reduces the width of his browser window.
You need to make sure all the previous wrappers are set to height: 100% and overflow: hidden. Something like this fiddle shows (may need some tweaks depending on what exactly you want):
html, body, .container-fluid, .container-fluid > .row-fluid {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar {
height: 100%;
overflow: auto;
}
Update from Clarification
You just need to continue the process deeper. The point is that you need to set the scroll on the actual column element(s) you want to scroll, and have everything else explicitly set to the height: 100% and overflow: hidden that wrap that column. Probably this for you:
html, body, .container-fluid, .container-fluid > .row-fluid, .span-fixed-sidebar {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar > div {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
It you want to scroll content of left and right column independently you have to add
overflow: auto;
to it's CSS. Also, note, that 100% height can be set to children of relative or absolute block, or to children of block with defined height.
I'm not sure if I understand the question but if you want to span to the window height and put a scroll if the column is higher than the window:
.column {
overflow: auto /* scroll */;
height: 100%;
}
EDIT: Yes, overflow: auto will be a better option if you don't want to show a scroll if the column is not high enough.

Categories

Resources