I am using CSS to skin a scroll bar that is created using JavaScript.
.scrollbar-track{
background: black;
height: 10px;
}
.scrollbar-thumb{
cursor: default;
border: 1px red solid;
width: 50px;
padding: 0;
}
.scrollbar-thumb-first{
display: inline-block;
background: green;
width: 5px;
height: 10px;
}
.scrollbar-thumb-middle{
display: inline-block;
background: red;
height: 10px;
width: 20px;
}
.scrollbar-thumb-last{
display: inline-block;
background: blue;
width: 5px;
height: 10px;
}
<div class="scrollbar">
<div class="scrollbar-track" style="width: 970px;">
<div class="scrollbar-thumb">
<span class="scrollbar-thumb-first"></span>
<span class="scrollbar-thumb-middle"></span>
<span class="scrollbar-thumb-last"></span>
</div>
</div>
</div>
And this is the fiddle: http://jsfiddle.net/w27wM/8/
Why is the inner div somehow larger than the parent div? Even with margin and paddings set to 0, the issue still remain.
Issue resolved by changing all the display: inline-block to float: left.
The problem may be related to this question, but removing all the whitespace didn't fix it for me. This might be due to the node being created in javascript.
Its a simple problem. By default the span line-height is 20px. An inline-block element read line-height to vertical-align.
So solution is either specify
line-height: 10px; or float: left;
Eg:
.scrollbar-thumb span{
line-height: 10px;
}
or
.scrollbar-thumb span{
float: left;
}
The .scrollbar div is not given an explicit width so it assumes the default = 100% of the width given by its parent.
The .scrollbar-track is given an explicit width of 970px which is beyond the width of the parent and the parent's parent. Thus, .scrollbar ends up thinner than its wide child .scrollbar-track.
Why are you setting the scrollbar-track explicitly but not doing the same for the .scrollbar (parent)?
Related
I want to make P to be able to take more text than the height can contain, just so the text can be scrolled down to be read. DIV CLASS="others" has the right height I want. (500px)
The problem is, when I use the overflow: scroll function it goes all the way to the bottom of the page.
EDIT: Forgot to mention I want the titles "News" and "Products" to be without the scroll bar.
Thanks.
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: 0px;
padding: 40px 15% 20px 15%;
display: flex;
justify-content: center;
}
.others div {
width: 400px;
display: inline-block;
float: left;
margin: 0px 15px;
}
.others #news {
background-color: black;
color: white;
text-align: center;
}
.others #products {
background-color: black;
color: white;
text-align: center;
}
.others a {
color: white;
text-decoration: none !important;
}
.others #newsfeed, #productsfeed {
margin: 0px;
padding: 10px 0px;
background-color: lightgreen;
}
.others p {
margin: 0px;
padding: 10px 10px;
vertical-align: middle;
height: 800px;
overflow: scroll;
}
<DIV CLASS="others">
<DIV ID="news">
<H3 ID="newsfeed">News</H3>
<P>News will come here.</P>
</DIV>
<DIV ID="products">
<H3 ID="productsfeed">Products</H3>
<P>Cool photos here.</P>
</DIV>
</DIV>
As I mentioned in my comment, the issue is caused by specifying an explicit height to the inner paragraphs.
Besides, in order to make the inner paragraphs respect the height of their parents (#news and #products flex items which have the same height of their flex container, the .other) you could change the display type of the parents to flex as well and set their flex-direction to column.
And then give flex: 1; to the paragraphs as follows:
Example Here
#news, #products {
display: flex;
flex-direction: column;
}
#news p, #products p {
flex: 1;
overflow: auto; /* up to you */
}
As a side-note: make sure you have included the old (prefixed) syntax of flexbox as well for the sake of browser support. You could use tools like Auto Prefixer to achieve that.
You need a containing div on the paragraphs, then set overflow: scroll; and height: 460px; on that container (or whatever height you need to have it contained within the 500px tall .others block).
You'd also need to make sure your .others div styling doesn't apply to that container - in my example below, I changed that selector to .others > div to only select immediate children of .others. And you should remove the height: 800px; from the inner paragraphs, as mentioned by Hashem Qolami.
jsfiddle example
I have a 5x5 grid and when i add content to the div, it is shifted down. Can anyone explain why this is happening?
codepen example: Risk Matrix
You need to add this to vertical-align: top and margin-top: 3px;
.r5 > div, .r4 > div, .r3 > div, .r2 > div, .r1 > div {
border: 1px solid #000000;
display: inline-block;
height: 50px;
line-height: 50px;
margin: 4px 0 0;
text-align: center;
vertical-align: top;
width: 50px;
}
I believe its because content pushes the dom out of empty space.
HERE is the answer why this happends.
In a inline-level (inline-block) you have to specify the vertical alignment of text. So in essence without setting where the vertical alignment is content is placed in its default which is baseline. This is why your text offsetted your layout.
If you set:
.r5, .r4, .r3, .r2, .r1 {
margin-left: 40px;
> div {
display: inline-block;
vertical-align: top; <-- this
width: 50px;
height: 50px;
border: 1px solid black;
line-height: 50px;
text-align: center;
}
}
It aligns properly.
Setting overflow:hidden on the <div /> elements should fix it as it will make the elements ignore any margin or padding that inner-nodes create that overflow the containing element.
Here is a demo: http://codepen.io/anon/pen/mDonw
I am looking to overlay a caption on to an image. I have managed to do this, but the image is expanding out of the parent div.
I have the containing div set to inline-block, as I want it to 'auto size', not take up width: 100%. If you look at the current output, you'll see the image could be within the black bordered box.
It only needs to work in Chrome, if you encounter cross-browser issues.
Thanks in advance!
LIVE DEMO
CSS:
#body_content {
border: solid 1px blue;
display: inline-block;
padding: 5px;
}
#body_header {
border: solid 1px red;
font-size: 25px;
padding: 5px;
}
#body_image {
position: absolute;
}
#body_image_caption {
color: white;
line-height: 30px;
margin-left: 10px;
}
#body_image_container {
background: white;
border: solid 1px black;
margin-top: 3px;
padding: 10px;
}
#body_image_overlay {
background-color: black;
bottom: 5px;
display: block;
height: 30px;
opacity: 0.85;
position: absolute;
width: 100%;
}
HTML:
<div id="body_content">
<div id="body_header">
Heading
</div>
<div id="body_image_container">
<div id="body_image">
<img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" />
<div id="body_image_overlay">
<div id="body_image_caption">
Some Text
</div>
</div>
</div>
</div>
</div>
The #body_image element is escaping from the #body_image_container because its position is set to absolute. Absolutely positioned elements are removed from the document's flow, causing parent elements to collapse as though the child element wasn't there. If you change it to relative, then it becomes contained within the black box:
#body_image{
position: relative;
}
http://jsfiddle.net/AaXTm/2/
Try this css in parent div.
Overflow:auto
Check this fiddle. You need to set the position of the child element of the image to be absolute and the parent element to be relative. Change the width of the caption accordingly.
child-element {
position:absolute;
}
parent-element {
position:relative
}
http://jsfiddle.net/AaXTm/4/
I'm trying to vertically center text in a div using the method outlined in this article : http://css-tricks.com/vertically-center-multi-lined-text/
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>
JSFiddle here : http://jsfiddle.net/Vc88w/2/
The div must not go bigger than the specified height of 60px, and any overflowing text should be hidden. The CSS table trick works fine when there is not enough text to make the div overflow, but when there is too much it forces the div to go larger than 60px (the first example), which is not what I want.
Is there a CSS rule besides height and max-height that lets me override the height of a CSS table? Alternatively, how else could I achieve the vertical centering while enforcing a maximum height of 60px on the container div?
yes you must change in ".container" the "display:table" with a "display:block"
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}
Please Check out the fiddle on http://jsfiddle.net/Qu63T/1/
What I want is The green div to float next to the blue one. and the .block divs to appear as a grid. I don't want to remove the .m div and float the .blocks inside the container. What Can be done without specifying width of .m
No JavaScript Only CSS Solution
You can add a a wrapper div, after .m and before .block and set his width:
<div class="m">
<div class="wrapper">
<div class="block">
(...)
</div>
</div>
</div>
Style:
.wrapper{
width:100px;
}
Or you can add some padding in .m, so the blocks will line-break. But that's a wierd solution.
as i understand your question that you want floated div's work like block div's
your
CSS:
.
block{
border: 1px solid white;
float: left;
display: inline-block;
clear:left;
}
check this http://jsfiddle.net/sandeep/Qu63T/6/
Your best solution in this case would be to assume that "m" isnt floating, its just a padded div sitting inside a bigger container, and the blue div is living absolutely positioned, like this:
.c{
background-color: red;
display: block;
position: relative;
overflow: hidden;
}
.l{
background-color: blue;
height: 40px;
width: 120px;
display: inline-block;
position: absolute;
left: 0;
right:0;
}
.m{
display: block;
position: relative;
margin-left: 125px;
}
.block{
border: 1px solid white;
float: left;
display: inline-block;
background-color: green;
}
http://jsfiddle.net/Qu63T/7/