I need to have a div with one line of images, the amount of images inside the div can be changed at any time. So I want I horizontal scrollbar.
I have a structure like the following. I tried to achieve it with css, but unfortanetly it doesn't work.
<div id="scroll-wrapper">
<div id="thumbnails">
<div class="thumbnail-container active">
<img src="foobar" />
</div>
<div class="thumbnail-container">
<img src="bar" />
</div>
</div>
</div>
Code with CSS:
http://jsfiddle.net/c622c3w9/2/
Note that I do not want a solution with javascript.
I had to remove the float: left to get scroll to work
#thumbnails {
padding-bottom: 10px;
max-height: 50px;
min-width: 100px;
overflow-y: hidden;
overflow-x: scroll; /*add this so you get bottom scrollbar*/
white-space: nowrap; /*add this to stop images wrapping so thay stay on one line*/
}
.thumbnail-container {
display: inline-block;
position: relative;
line-height: 5px;
border: 2px solid steelblue;
margin: 3px;
display: inline-block;
/*float: left; remove this otherwise scroll will not work*/
margin-bottom: 15px !important;
}
http://jsfiddle.net/c622c3w9/3/
You only need to do two things. Fiddle.
.thumbnail-container {
.......
// float: left; <== Remove
}
#thumbnails {
.....
white-space: nowrap; // Add
}
Related
For reporting purposes I want a div report-canvas with a fixed height in mm:
.report-canvas {
height: 335mm;
min-height: 335mm;
max-height: 335mm;
}
A page has this structure:
<div class="a4">
<div class="header"></div>
<div class="report-canvas"></div>
<div class="footer"></div>
</div>
This works fine when .report-canvas doesn't have any child elements. But when I start to add h2's, table's and other div's, then the footer is pushed down outside of the page and the report-canvas is too big. How can I force report-canvas to always have the same size regardless of child elements?
This is the CSS of the other elements:
.a4 {
page-break-before:always;
clear: both;
margin: 0 auto;
border: 1px solid #888888;
width: 250mm;
height: 365mm;
}
.header {
padding-bottom: 10px;
height: 35px;
}
.footer {
padding-top: 10px;
height: 25px;
}
You can either use overflow: hidden or overflow: scroll on report-canvas
I've made a drop-down list which attaches to a text input, and the list which appears beneath has a header and footer row, and scrolling content in between. JS fiddle here:
https://jsfiddle.net/tpgjjh81/3/
It works great, except I'd like the drop-down to have a flexible height, depending on its content, up to a specified max-height. However, if I change:
DIV.dropdown {
...
height: 100px;
...
}
to:
DIV.dropdown {
...
max-height: 100px;
...
}
...then the "content" part of the list doesn't show at all when the drop-down appears, only the header and footer rows. The DIV's within have height: 100% so I would have thought these would push the outer DIV to its max-height but it doesn't appear to be working?
edit: I've also tried adding height: auto alongside the max-height but it doesn't have any effect.
See this fiddle here: https://jsfiddle.net/tpgjjh81/22/
The main issue was to do with the DIV.scroll_inner having absolute positioning with 0 edges (to fill the scroll_outer container).
Let the outer container control its own content, and limit the inner content's height to max-height: 100px.
Essentially, what you are looking for is something like this:
DIV.wrapper {
display: inline-block;
position: relative;
}
DIV.dropdown {
display: none;
position: absolute;
clear: left;
left: 0;
right: 0;
border: 1px solid black;
}
DIV.list_container {
display: table;
width: 100%;
height: 100%;
}
DIV.header,DIV.footer {
display: table-row;
background-color: lightgray;
}
DIV.scroll_outer {
display: table-row;
height: auto;
background-color: white;
}
DIV.scroll_inner {
overflow: auto;
max-height: 100px;
}
EDIT I've also removed some now unnecessary properties from the CSS, and updated this above, and in the fiddle. This should at least get you off the ground.
Best of luck in your project! :)
I cleaned up your css. Not sure why you were using display table and setting up the height etc. Just hide the parent overflow and set child overflow to scroll and that should do it.
Also I moved the border to outer container so it is not cut off.
is_visible = false;
function Toggle() {
is_visible = !is_visible;
document.getElementById("dropdown").style.display = (is_visible ? "block" : "none");
}
DIV.wrapper {
display: inline-block;
position: relative;
}
DIV.dropdown {
display: none;
position: absolute;
clear: left;
left: 0;
right: 0;
height: 100px;
border-bottom: 1px solid black;
overflow: scroll;
}
DIV.list_container {
display: block;
border: 1px solid black;
border-bottom: 0px;
}
DIV.header,DIV.footer {
display: block;
background-color: lightgray;
}
DIV.scroll_outer {
display: block;
position: relative;
background-color: white;
}
DIV.scroll_inner {
overflow: hidden;
}
<div class="wrapper">
<input type="text" size="50" value="Click me" onclick="Toggle()" />
<div class="dropdown" id="dropdown">
<div class="list_container">
<div class="header">Header</div>
<div class="scroll_outer">
<div class="scroll_inner">
Item 1<br />
Item 2<br />
Item 3<br />
Item 4<br />
Item 5<br />
Item 6<br />
Item 7
</div>
</div>
<div class="footer">Footer</div>
</div>
</div>
</div>
height: auto;
max-height: 100px;
overflow: auto;
Here is my fiddle,
HTML
<div id="wrapper">
<div class="notes">One</div>
<div class="notes">two</div>
<div class="notes">three</div>
<div class="notes">four</div>
</div>
CSS
#wrapper {
width: 300px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid black;
}
.notes {
color: red;
border: 1px solid green;
margin: 5px;
width: 200px;
height: 150px;
display: inline-block;
}
I have a wrapper div which has 300px width.
The inner divs are generated dynamically based on the server request and has the width of 200px each.
Now i need to set side by side in the wrapper and when it reach 300px it needs to be displayed in a scrolled mode..
Seems i have some issues in my code. Pls help...
You could give white-space: nowrap; to the wrapper, then reset it to white-space: normal; for each item.
Example Here
#wrapper { white-space: nowrap; }
.notes { white-space: normal; }
You might also want to remove the white-space between inline block elements. There are several approaches to achieve that, one of them could be setting font-size: 0 to the parent, then resetting it to font-size: 16px on the children.
Updated Example
How can I show only horizontal scroll bars in my div. I have images in the form of strip and I want to show only horizontal scroll bars for them. I do not want the vertical scroll bars to show up. Please help...
Here is my HTML
<div id="containersimg">
<div id="wrapper">
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
</div>
</div>
and here is my CSS
#wrapper {
width: auto;
height: 130px;
}
#containersimg {
background-color: #bbb;
width: 300px;
height: 130px;
overflow-x: scroll;
}
img {
float: left;
clear: none;
margin: 5px;
}
I have created a fiddle to demonstrate what I want to achieve
Fiddle Link
EDIT 1:
The only way I can think of doing it is by adding the width to the wrapper div, which I can't because the number and the widths of the images are dynamic
Try using overflow-x: scroll; overflow-y: hidden;
This CSS should be used on your div.
It will just show the x-axis scroll bar and hide the y-axis scroll bar. :)
If you want the images to come in one line then add display: inline; white-space: nowrap; to the div. See this.
Or use Lists. :) Like this.
Ok this is my submition.
Your code remains the same. I only added the overflow-y: hidden to the container img style
What i did is added about 6 lines of Javascript. Not Jquery, plain old Javscript and some clever math and this should work
I added a working fiddle .. Enjoy
http://jsfiddle.net/vUEYG/167/
var container = document.getElementById('wrapper');
var TW=0,Width=0; // TW=Total width of the images
for(var i=0;i<container.children.length;i++)
TW=TW+container.children[i].width;
Width=TW/container.children.length+10; // The 10= Margin i.e 5 *2
var width='width:'+container.children.length*Width+'px';
document.getElementById('wrapper').setAttribute("style",width);
You need a wrapping div inside your scrolling container to ensure that they are not constrained by width and then set overflow-x: scroll on the container.
Quick fiddle to demonstrate.
FIDDLE
CSS:
#wrapper {
width: 500px;
height: 110px;
}
#containersimg {
background-color: #bbb;
width: 300px;
height: 135px;
overflow-x: scroll;
}
.square {
background-color: #00b;
float: left;
height: 90px;
width: 90px;
margin: 5px;
}
try this code. Width of the #wrapper should be image width multiplied by the number of images
#wrapper {
width: 500px;
height:400px
}
#containersimg {
background-color: #bbb;
width: 340px;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
}
img
{
margin: 5px;
display: inline-block;
}
Demo: http://jsfiddle.net/vUEYG/162/
I have a <div id="content">, which contains <div id="sub-navigation> and <div id="main container">, which themselves are inline-blocks. I would like to be able to make the main container fill the rest of the available page width. Is that possible?
I need columns-strip to expand or shrink based on the number and width of column elements. If the width of the columns-strip exceeds the width of the main container, then a horizontal scroll bar should appear.
* {
margin: 0px;
padding: 0px;
font-size: 10pt;
white-space: normal;
}
#wrapper {
margin: 0px 20px;
background-color: red;
}
#header {
margin: 25px 10px 10px 10px;
height: 50px;
background-color: purple;
color: white;
}
#content {
margin: 10px;
padding: 10px;
font-size: 0pt;
white-space: nowrap;
overflow: hidden;
background-color: white;
}
#sub-navigation {
width: 200px;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
display: inline-block;
overflow: auto;
background-color: yellow;
}
#columns-strip {
padding: 10px;
font-size: 0pt;
white-space: nowrap;
background-color: mediumturquoise;
}
.posts-column {
margin: 0px;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
overflow: auto;
}
#footer {
margin: 10px 10px 25px 10px;
height: 50px;
background-color: navy;
}
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="sub-navigation"></div>
<div id="main-container">
<div id="columns-strip">
<div class="posts-column" style="background-color: lightgray;"></div>
<div class="posts-column" style="background-color: darkgray;"></div>
<div class="posts-column" style="background-color: gray;"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
You have to remove the inline-block styles and float the #sub-navigation div. inline-block is not suited for what you are trying to achieve. When you add no display styles, the div element will be the default value which is block, block elements take up all the available space by default. By floating the #sub-navigation element you make it only take up the space required for its contents.
#sub-navigation {
width: 200px;
height: 150px;
float : left;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
overflow: auto;
background-color: yellow;
}
make sure to add a clear: left element after the #main-container
That's not how inline-blocks are supposed to be used. Best thing to do here is make your navigation box float:left and leave the default display value alone.
If your header, footer and wrapper have specific widths, then yes, you can have your main-container fill the available space. But if you're not specifying widths in your CSS, then you need to determine how big your main-container CAN be based on the rendered width of the containing element (wrapper). The only way to determine that width after the page loads is with javascript. If you want your site to have a dynamic width but still have your content (sub-navigation and main-container) fill the screen, you would either need to use javascript or percentages, and percentages can get ugly when you start looking at varying resolutions of monitors, laptops, etc...
Ever heard of flex box model!!
It is made just for that.
Note in flexbox model all child elements act as flex box model you cant opt out certain things. Which mean if page has navigation and under it content div + side div. You can't make top navigation out of it. Which has implications. So solution is to have all things only that need flex box in one div.