I'm having this issue with a div for comments overflowing it's parent .. I've been trying a couple options in CSS but no success.
<div class="col-md-8 depos>
<div class="col-md-7 depo-cont>
<div class="depo">
<h5>Marcio</h5>
<p>Vou de novo</p>
</div>
</div>
<div class="col-md-5">Form here</div>
</div>
Main problem is trying to overflow the "depo-cont" div expands the bottom of the parent. Any ideas on how to handle this ?
If the aim is to have a fixed height on the .depos container, then you could tell it to scroll its content when it becomes too tall:
.depos {overflow: scroll;}
Simple demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.outer {height: 200px; width: 100px; overflow: scroll;}
</style>
</head>
<body>
<div class="outer">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, et, officiis, molestiae, ea veniam esse nam enim eaque ad tenetur cum incidunt consectetur iste ullam eos veritatis cupiditate tempora consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, et, officiis, molestiae, ea veniam esse nam enim eaque ad tenetur cum incidunt consectetur iste ullam eos veritatis cupiditate tempora consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
</body>
</html>
Fixed it setting the child element's max-height to be the same as the parent ( which naturally causes overflow once content exceeds the size. )
.depo-cont{
max-height:500px;
overflow:scroll;}
Related
I am using Tailwindcss and trying to achieve a design, in which there is a scroller in middle section.
However, the scroller is disabled and it's full height is not fit to it's parent.
Following is the part of the code:
<div class="h-full bg-green-200">
<div class="overflow-y-scroll">
<p class="my-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
eius fugit optio sapiente provident enim nihil at nemo
molestiae quo, inventore consectetur esse nisi, consequuntur
consequatur! Dolor facilis quasi molestiae?
</p>
<p class="my-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
eius fugit optio sapiente provident enim nihil at nemo
molestiae quo, inventore consectetur esse nisi, consequuntur
consequatur! Dolor facilis quasi molestiae?
</p>
<p class="my-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
eius fugit optio sapiente provident enim nihil at nemo
molestiae quo, inventore consectetur esse nisi, consequuntur
consequatur! Dolor facilis quasi molestiae?
</p>
</div>
</div>
I tried giving h-full, h-fit. I also tried using grow, flex-1. But it isn't working as expected.
Full code here in sandbox:
https://codesandbox.io/s/spring-sun-e9mrrv
h-full : sets an element’s height to 100% of its parent, as long as the parent has a defined height.
you have set the overflow as hidden to the parent element. So basically your div has full height as its content but the overflow is hidden.
You have also set overflow of your div to scroll but since its fitting its content wholly in the div, the scrollbar is disabled as there is nothing to scroll.
You can either set a fixed height to the div where you need the scroll or some of the parent divs.
Check out the solution here
Change your
overflow-y-scroll To
overflow-y-auto
I'm currently trying to learn CSS and have discovered that a class or div within another div/class does not inherit all properties and I want to know why that is.
Let's say I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<p>Hello :)</p>
<div class="box-1">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad obcaecati ea dolorum dolore facere deserunt. Delectus voluptatem ex unde quae nesciunt, in ratione amet enim saepe corrupti ad magni molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad obcaecati ea dolorum dolore facere deserunt. Delectus voluptatem ex unde quae nesciunt, in ratione amet enim saepe corrupti ad magni molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad obcaecati ea dolorum dolore facere deserunt. Delectus voluptatem ex unde quae nesciunt, in ratione amet enim saepe corrupti ad magni molestiae.</p>
</div>
</div>
<script src="" async defer></script>
</body>
</html>
And this css applied:
body{
background-color: #f4f4f4;
color:#555555;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
line-height: 1.6em;
margin: 0;
}
.box-1{
background-color: #333333;
color: #ffffff;
}
.container{
width: 80%;
margin: auto;
color: red;
font-weight:bold;
}
The "Hello :)" paragraph becomes red and bold, just like the CSS of the class defines, so far so good.
What I find weird however is that the "box-1" class with the heading and the lorem ipsum text only become bold but do not become red.
Why is that?
You should look at the documentation to see how the inheritance works. In your code you're setting a color for .box-1 that overrides the container color.
I am trying to create a sort of text carousel.
Heres a sketch of what I want to do:
I have a card and I might have multiple of them.
If there's one I just need it to be neatly centered both vertically and horizontally.
If there's two then try to put them next to one another.
But if there's more than there can be fit on the screen, then I just want the last one to overflow off
All the cards need to retain the same size
This is what I have tried:
Firstly I tried using align-items: flex-start
http://jsfiddle.net/7pdmeh6v/
This works with the logic but the problems are that if I had one item it wouldn't be centered and here I can't change the width.
Secondly I tried using align-items: center
http://jsfiddle.net/hr8ya9fg/
Logic works but
This cuts off the top of the cards and also doesn't let me change
the size of the cards.
Thirdly I removed align-items and just left justify-content: center http://jsfiddle.net/6hdzamq5/
which works with the logic but still doesn't let me change the size of the cards AND also I noticed here that it completely disregards margins and paddings
TLDR:
Flex-box doesn't seem to let me edit the size on any occasion without another problem occurring.
A couple of initial observations:
In a row-direction flex container, which is what you're using, the align-* properties control vertical, not horizontal, space and positioning. So I'm not sure how you plan to solve your horizontal scroll problem using align-items.
The initial value of the flex-shrink property is 1. This means that flex items will shrink in order to stay within the bounds of the container. So when you tell your flex items to be width: 500px, that is not a fixed length. The items can shrink. Add flex-shrink: 0 to disable flex shrink and make the items inflexible.
.container {
display: flex;
height: 240px;
overflow: auto;
margin: 10px;
padding: 10px;
border: 3px solid #000;
}
.box {
width: 500px;
flex-shrink: 0; /* toggle between 1 and 0 to see the differences */
background-color: red;
border: 1px solid #000;
color: #000;
padding: 10px;
}
.box {
margin-left: auto;
margin-right: auto;
}
.box ~ .box {
margin-left: 10px;
}
<div class="container">
<div class="box">
<h2>Heading</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
</div>
</div>
<div class="container">
<div class="box">
<h2>Heading</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
</div>
<div class="box">
<h2>Heading</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
</div>
</div>
<div class="container">
<div class="box">
<h2>Heading</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
</div>
<div class="box">
<h2>Heading</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
</div>
<div class="box">
<h2>Heading</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
</div>
</div>
You'll notice that the last margin / padding collapses. That issue is explained here:
Last margin / padding collapsing in flexbox / grid layout
I'd suggest you looking into flex property which is a shorthand for flex-shrink, flex-grow and flex-basis properties. It would help you to define behavior of your flex-items. (https://www.w3schools.com/cssref/css3_pr_flex.asp)
See the snippet below:
#container {
display: flex;
margin: 10px;
height: 180px;
overflow: auto;
border: 3px solid;
}
.box {
flex: 0 0 320px;
margin: 10px;
background: #9a6;
border: 1px solid;
color: #000;
padding: 10px;
}
<div id="container">
<div class="box">
<h2>Heading</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
</div>
<div class="box">
<h2>Heading</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
</div>
<div class="box">
<h2>Heading</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
</div>
</div>
http://jsfiddle.net/mgLtz5kg/
<div class="row expanded">
<div class="row expanded paddedrow">
<div class="small-12 medium-4 columns paddedcirclediv">
<div class="small-12 columns circlediv"></div>
</div>
<div class="small-8 columns factoid childbox">
<h3>lorem</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
</div>
</div>
<div class="row expanded">
<div class="small-12 medium-4 columns paddedcirclediv">
<div class="small-12 columns circlediv"></div>
</div>
<div class="small-8 columns factoid">
<h3>ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
</div>
</div>
</div>
Using foundations small-12, medium-6 style notation how do you approach vertically aligning content in a responsive div. In the codesnippet above I want the content on the right to be middle aligned to correspond to the circular div on the rights centre.
I know this is a popular question but all the responses require me to either define a width, or specifically state where on the page the div is located using 'top' and 'left' tags.
Is that really the way you do it?
Check out this JSFiddle for a solution to your problem: http://jsfiddle.net/61hov4rp/65/. (Tested in latest versions of Chrome, Safari, Opera, Firefox, Tor).
The trick is to use FlexBox. Without it, you will need to hard-code some values, as others have suggested (margins, paddings, heights or widths - it's unavoidable), but FlexBox finally allows you to align content vertically in a responsive flexible-width div.
In future projects you could use Foundation 6, which supports FlexBox. Check out their Flex Grid documentation.
I'm creating my first website, using Twitter Bootstrap 3.
I want to create a feedback section using thumbnails.
What I need is to vertical-align social buttons in the bottom of each thumbnail no matter of thumbnail's height.
Here is my HTML code:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail vertical-container">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ut earum libero quaerat modi facilis suscipit qui at, minus tempore, fugiat ipsam, consequatur veniam iste itaque tempora dignissimos consectetur quas.</p>
<div class="vertical-container1">
<p>VK Instagram</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p>VK Instagram</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p>VK Instagram</p>
</div>
</div>
</div>
</div>!
How it looks now:
You can do this by positioning divs. Assign position relative to the container div. in your case col-md-4 but as it's a bootstrap class you have to give it other class name and assign position relative to it.
And position of the div containing buttons. (in your case vertical-container1) to position absolute
parentWrapperDiv{position:relative;}
buttonsContainer{position:absolute;bottom:0;}
You could set a minimum height for your text area using a custom class;
<p class="min-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...</p>
.min-height {
min-height:100px;
}
this will ensure all the text area's are the same height even if there is not enough text to push the buttons down.
An Exmaple
of course this could go the other way and end up having too much text in which case you'll want to add a maximum height thus;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...
.max-height {
max-height:120px;
overflow:hidden; // this will cut the text off
}
you try code before:
.thumbnail {position:relative;}
.thumbnail a.btn {position:absolute;bottom:0;left:0;}