In the code below I have 3 images. I want to confine the width of the container to 300px. When the total number of images exceeds this width, I want to let the user scroll horizontally to vew the images. My code however is causing the images to wrap. Here is the fiddle:
http://jsfiddle.net/AndroidDev/Asu7V/10/
<div style="width:300px; overflow-x: scroll">
<div style="">
<div class="x">
<img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
</div>
<div class="x">
<img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
<img src="http://playgo.ro/wp-content/themes/play3.0/play.png" style="position:absolute; left:0; top:0" />
</div>
<div class="x">
<img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
</div>
</div>
</div>
Use white-space: nowrap; on the parent element which will force the elements not to wrap up if they fall short of parent width. And I've changed overflow-x: scroll; to overflow-x: auto; so that it doesn't show unnecessary scrollbar if the images are not exceeding the parent element. Just a tweak for a better UI, if not, you can use overflow-x: scroll; as well..
<div style="width:300px; overflow-x: auto; white-space: nowrap;">
Demo
Also, don't use inline styles, consider using class and id instead.
Related
I have write below code :
<body>
<div class="navbar" id="navbar">
</div>
<div id="container">
<div class="row">
<div class="col-2">
<div id="nav_drawer">
</div>
</div>
<div class="col-10" id="table_container">
<div class="div_table" data-url="/getDevice">
</div>
</div>
</div>
</div>
I want to scroll only id : table_container
Is there any solution.
Thanks in advance!
You haven't given much additional context around what you're trying to do, but if you're simply after the relevant CSS to make an element display it's overflow in a scrollable area it would be:
div#table_container {
overflow: scroll;
}
However, this will only take effect if the content within #table_container actually overflows the height or width set on the container. You'd likely need to specify such a set height or width, but again without seeing your existing CSS it's hard to comment further.
You can also specify scroll in only the x or y dimension using the overflow-x and overflow-y properties respectively. Read up on the overflow property:
https://www.w3schools.com/cssref/pr_pos_overflow.asp
Try to set overflow-y property for vertical scroll.
#table_container{
width:500px;
height: 110px;
overflow-x: hidden;
overflow-y: auto;
}
I have some text content and few images inside a div. the Div have fixed width. So, in the css I have added overflow:scroll for the div. It is enabling the scroll bar for the entire div.
But I need to enable the scroll bar only for the images.
for ex:
<html>
<body>
<div class="panel">You can use the overflow property when you want to have better control of the layout.
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
The default value is visible.You can use the overflow property when you want to have better control of the layout.
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" >
The default value is visible.You can use the overflow property when you want to have better control of the layout.
</div>
</body>
</html>
The above code have two images and text content. I need to enable the scroll bar for the two images and not for the entire div. how can I achieve this
Sample code:
https://jsfiddle.net/Dhanapas/qvs3ef0r/15/
<html>
<head>
<style>
.panel {
width: 200px;
overflow: scroll;
}
.scroll{
overflow-x: scroll;
}
</style>
</head>
<body>
<div class="panel">You can use the overflow property when you want to have better control of the layout.
<div class="scroll">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
The default value is visible.You can use the overflow property when you want to have better control of the layout.
<div class="scroll">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
The default value is visible.You can use the overflow property when you want to have better control of the layout.
</div>
</body>
</html>
Here's what I propose:
<html>
<head>
<style>
.panel {
width: 200px;
overflow: hidden;
}
.image-container {
overflow: scroll;
}
</style>
</head>
<body>
<div class="panel">You can use the overflow property when you want to have better control of the layout.
<div class="image-container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
The default value is visible.You can use the overflow property when you want to have better control of the
layout.
<div class="image-container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
The default value is visible.You can use the overflow property when you want to have better control of the
layout.
</div>
</body>
</html>
You can use this code
.googleimages {
width: 100%;
float: left;
}
.panel {
width: 200px;
height: 110px;
overflow: scroll;
}
p {
width: 100%;
float: left;
}
<div class="main">
<p>You can use the overflow property when you want to have better control of the layout.</p>
<div class="googleimages">
<div class="panel">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
</div>
</div>
<p>The default value is visible.You can use the overflow property when you want to have better control of the layout.</p>
<div class="googleimages">
<div class="panel">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
</div>
</div>
<p>The default value is visible.You can use the overflow property when you want to have better control of the layout.</p>
</div>
I have to show 2 adjacent boxes, both have a dynamic content (rendered using angular). The Container must have the height of Box1. Box2s heigth may vary due to the dynamicity and it should not be higher as Box1. If higher a scroll should be shown.
I started with the following code using tables:
<table id="Container">
<tr>
<td valign="top" id="Box1">
<dynamic rendered html code/>
<td>
<td> <td>
<td valign="top" style="position: relative; id="Box2">
<div style="position: absolute; top:0; bottom:0; overflow-x: hidden">
<dynamic rendered html code/>
</div>
<td>
</tr>
</table>
Unfortunately it does not work in IE, since (as I'v read on the web) position is not defined for tables (not HTML standard);
So I decided to switch to divs:
<div id="Container">
<div style="display: inline-block; vertical-align:top" id="Box1">
<dynamic rendered html code/>
<div>
<div style="display: inline-block;"> <div>
<div style="display: inline-block; vertical-align:top" id="Box2">
<dynamic rendered html code/>
<div>
</div>
Box1 should always wrap its content. Box2 should not be heigher than Box1, IF then scroll overflow.
Is it possible in CSS? No JQuery and no Javascript.
I believe you want #Box2's height equal to #Box1's height.
There is no way to align there height within the same parent. Therefore, I suggest you to wrap #Box2 with #Box1 like below.
<div id="Box1">
<div id="Box2">
</div>
</div>
And that you can set max-height: 100%; to #Box2 so that the maximum height of #Box2 will not be larger than #Box1.
Adding overflow-x: auto; to #Box2 can show scrollbar automatically when text overflow.
https://codepen.io/blackcityhenry/pen/LMVoZd
so I checked other posts, but no answers helped me. So I have an image inside a div. I put a specific height/width size of the div to show the ratio of the div, and the image inside is higher, so it always goes outside of the div.
I want to make the image smaller so that it is vertically as high as the div, and the width would adjust accordingly. Can anyone help??
<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
<div>
<img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="width: 100%;" />
</div>
</div>
Try this:
<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
<img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="height: 100%;">
</div>
the extra div is also preventing the img to use its parent's css properties. It is unnecessary.
http://jsfiddle.net/2q94nfq6/1/
<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
<img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="height: 100%;width: 100%;" />
</div>
If you are defining your div in pixels then you should use max-width property of css under style. The max-width property is used to set the maximum width of a given element.
<h1>Window width:</h1>
<div style="display: flex">
<img src="https://unsplash.it/400/225?image=10" alt="1">
<img src="https://unsplash.it/400/225?image=11" alt="2">
<img src="https://unsplash.it/400/225?image=12" alt="3">
</div>
<h1>Wrapped in 500px wide div:</h1>
<div style="width: 500px; overflow: auto">
<div style="display: flex">
<img src="https://unsplash.it/400/225?image=10" alt="1">
<img src="https://unsplash.it/400/225?image=11" alt="2">
<img src="https://unsplash.it/400/225?image=12" alt="3">
</div>
</div>
This is what the result looks like in Firefox:
This is what the result looks like in Chrome:
As you can see, in Firefox, the images have been nicely shrunk and resized, so that all there images fit in one line without wrapping or cropping. On Chrome, the images remain in their original sizes, which causes cropping in small windows or divs.
Is this expected? Am I doing something wrong? How can I get the same result in both Firefox and Chrome?
These are initial settings in a flex container:
flex-grow: 0
flex-shrink: 1
flex-basis: auto
The shorthand would be:
flex: 0 1 auto
Therefore, even though you haven't specified these rules in your code, they apply to the images.
The images cannot grow, they can shrink (equally and just enough to avoid overflowing the container), and they are initially sized to their natural width (400px).
This is what you're seeing in Firefox. The images are shrinking to fit nicely within the container.
In Firefox, flex rules are overriding the natural dimensions of the image.
In Chrome, however, the reverse is true. The dimensions of the images are prevailing.
The simple cross-browser solution is to wrap the images in another element, so this new wrapper becomes the flex item and takes on the default flex: 0 1 auto, and nothing needs to be overridden.
img {
width: 100%;
}
<h1>Window width:</h1>
<div style="display: flex">
<span><img src="https://unsplash.it/400/225?image=10" alt="1"></span>
<span><img src="https://unsplash.it/400/225?image=11" alt="2"></span>
<span><img src="https://unsplash.it/400/225?image=12" alt="3"></span>
</div>
<h1>Wrapped in 500px wide div:</h1>
<div style="width: 500px; overflow: auto">
<div style="display: flex">
<span><img src="https://unsplash.it/400/225?image=10" alt="1"></span>
<span><img src="https://unsplash.it/400/225?image=11" alt="2"></span>
<span><img src="https://unsplash.it/400/225?image=12" alt="3"></span>
</div>
</div>
In terms of which browser is adhering to spec guidance, it appears that would be Firefox. In a flex container, flex rules should prevail:
7.1. The flex
Shorthand
When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.
The flex item’s main size property is either the width or height property.
I say Firefox "appears" to be correct because the spec is saying that flex rules should prevail over the CSS width and height properties.
Of course, the dimensions of the images in this case are not defined in CSS. They are the natural dimensions of the image. So this scenario may be left open for interpretation, and Chrome may not be violating any guidelines.
However, in another scenario, where the height property was a factor, Firefox stuck with flex, while Chrome went with height: Why is Firefox not honoring flexed div's height, but Chrome is?
I this case, add align-items: flex-start to the flex container, and then this rule to the images
img {
min-width: 0;
width: 100%;
}
As align-items defaults to stretch, so they stretches, then min-width defaults to auto which again tell them to be their original size, and finally, give them width: 100% so they fit horizontally and adjust its height to maintain aspect ratio.
Note, after quick browser test, this won't work on IE11 (but works on Edge), so bugs exists little bit everywhere, based on the used code. The second option, where one wraps the image's, works on IE11 though.
Stack snippet
img {
min-width: 0;
width: 100%;
}
<h1>Window width:</h1>
<div style="display: flex; align-items: flex-start;">
<img src="https://unsplash.it/400/225?image=10" alt="1">
<img src="https://unsplash.it/400/225?image=11" alt="2">
<img src="https://unsplash.it/400/225?image=12" alt="3">
</div>
<h1>Wrapped in 500px wide div:</h1>
<div style="width: 500px; overflow: auto">
<div style="display: flex; align-items: flex-start;">
<img src="https://unsplash.it/400/225?image=10" alt="1">
<img src="https://unsplash.it/400/225?image=11" alt="2">
<img src="https://unsplash.it/400/225?image=12" alt="3">
</div>
</div>
Another option is to wrap the images, and set the img to width: 100%
img {
width: 100%;
}
<div style="display: flex;">
<div>
<img src="https://unsplash.it/400/225?image=10" alt="1">
</div>
<div>
<img src="https://unsplash.it/400/225?image=11" alt="2">
</div>
<div>
<img src="https://unsplash.it/400/225?image=12" alt="3">
</div>
</div>
This post, css3-flexbox-maintain-image-aspect-ratio, has links together with a good explanation, about how/why the browsers render differently