I am having problems getting the content in a div (or its value) to wrap around inside and having the div's height adjust to the contents.
The top one a container, message-box. There are three divs inside like in the picture attached. I need to have divs each-message and each-message-content adjust its height to fit the contents inside. I have looked at many posts in this site and tried many combinations of overflow:hidden and height:auto, but they mostly end up making the each-message-content scroll sideways, and am at wits end.
How can I achieve this?
**** Updated with HTML *****
<div className="message-box">
<div className="each-message-box">
<div className="each-message">
<div className="each-message-date">Date</div>
<div className="each-message-content">ContentContentContentContentContentContentContentContentContentContent</div>
</div>
</div>
</div>
</div>
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
Not very elegant to break words like this, but if that's what's needed. btw apart from className, there's an extra in your HTML.
EDIT: Ignore the comment about className - react project comment added after this answer was posted.
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
word-break: break-all;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
<div class="message-box">
<div class="each-message-box">
<div class="each-message">
<div class="each-message-date">Date</div>
<div class="each-message-content">ContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
</div>
Create a function to record in real time the number if char entered and to change the width of the the container accordingly using javascript.
if your CSS div height not expanding to fit content or wrapping content.
Just use a simple trick.
before the closing tag of the message-box div add a div with class cl
<div class="message-box"><div class="cl"></div></div>
Now in your Css Give this style .cl{clear:both;}
by using this if you have height auto on the div it will still wrap the content.I hope it will work for you.
Related
I want the icon to be near the text inside the round box but its appearing down, here's my code.
HTML:
<div className="RoundBox">
<div className="DashImages"><img src={PDF} alt="PDF"></img>
<div className="IconText">PDF File</div>
</div>
CSS:
img {
width: 3vw;
height: 3vw;
margin-left: 1vw;
}
.IconText {
}
.RoundBox {
border-radius: 0.5vw;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
}
This should do the trick.
Div elements are block items so they will always try to fill the whole horizontal space if the display or width properties are not changed or the parent item overrides that behavior (eg. using FlexBox)
HTML
<div className="RoundBox">
<div className="DashImages"><img src={PDF} alt="PDF" /></div>
<div className="IconText">PDF File</div>
</div>
CSS
img {
width: 3vw;
height: 3vw;
margin-left: 1vw;
}
.IconText {
padding-left: 10px
}
.RoundBox {
border-radius: 0.5vw;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
display: flex;
align-items: center;
}
Your html is invalid with the image tag and you're missing a div. You would want to fix that first.
<div className="DashImages"><img src={PDF} alt="PDF" /></div>
You then have a couple options. Here are a two examples:
You can simply add float: left to the img css. I might recommend using a class rather than a selector which targets all img tags. Example
img {
width: 3vw;
height: 3vw;
margin-left: 1vw;
float: left;
}
You can also explore using flexbox adding display: flex; to your .RoundBox class. Note there are different alignment attributes that you can use to position elements using flex.
.RoundBox {
border-radius: 0.5vw;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
display: flex;
}
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
Currently im using it like this and able to resize from right bottom edge
<div style="padding-right:25px; height: 100%; width:100%" (dragover)="allowDrop($event)" (drop)="onDrop($event)">
<div *ngFor="let widget of widgets" [id]="widget.id" class="test">
</div>
</div>
here is the css for resize
enter code here .test {
position: absolute;
z-index: 9;
background-color: lightblue;
text-align: center;
border: 1px solid #d3d3d3;
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
display: block;
overflow: auto;
}
Basically the title says it all.
How do I have two divs next to each other, and when on a different sized screen ( lets say smaller ) they don't merge into one, and if there is not enough space to go down to the next line? Also if possible to scale down the elements inside ( text and image and button )
Thank you!
CURRENT PAGE WITH PROBLEM (The giveaway boxes are the dicvs btw):
Here
add a class with float:left in it for both.
And use margin to center them as you want instead of your margin-left:50%.
Something like :
.giveaway {
background-color: #C0C0C0;
width: 360px;
height: 325px;
border-style: solid;
border-color: #336699;
float: left;
margin: 10px 25px;
}
.giveaway1 {
background-color: #C0C0C0;
width: 360px;
height: 325px;
border-style: solid;
border-color: #336699;
float: left;
margin: 10px 25px;
}
you should use the same class for both by the way...
I used a wrapper div to contain and center the two smaller divs. Then just used a media query to make them block level at a certain window width (for smaller screens)
Of course, you can adjust the widths / #media rule to suit your own needs
html, body {
margin: 0;
padding: 0;
}
#page-wrapper {
border: 1px solid red;
text-align: center;
}
.box {
text-align: left;
display: inline-block;
border: 1px solid #000000;
box-sizing: border-box;
width: 300px;
height: 200px;
}
#media(max-width: 650px) {
.box {
width: auto;
display: block;
}
}
<div id="page-wrapper">
<div class="box">
<p>Stuff goes here</p>
</div>
<div class="box">
<p>Stuff goes here</p>
</div>
</div>
I am trying to create a structure similar to panels. This is what i have tried:
FIDDLE
<div id='main'>
<div id='firstp'>Panel 1</div>
<div id='secondp'>Panel 2
<div id='slide'>Panel 3</div>
</div>
</div>
and CSS is
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#firstp{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
}
#secondp{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
}
#slide{
width: 100%;
height: 100%;
position: absolute;
border: 1px solid green;
background-color: green;
}
I am curious to know how browser renders HTML while parsing. As we can see there are three panels, Panel 3 being child of Panel 2, is seen on top of Panel 2. Whereas as per requirement , Panel 2 should be on top of Panel 3 and say when i click on some button in panel 2, panel 3 should slide behind panel 2 and comes forward on right side of panel 2. Hope i made myself clear. Please help.
If you want panel 2 to be on top of panel 3 then you will need to apply something like z-index:-1;.
I have modified your fiddle to show this working.
Panel 3 is behind panel 2 as you requested and there is a button that when clicked transforms the panel to the right. You can easily neaten this up to hide the entire panel and do some cool jQuery stuff to make the slide transition nicer.
Just try to remember that unless you say otherwise, children will usually appear in front of their parent.
This isn't about browser rendering, it's your CSS that's making the children exceed the height of the parent.
Because you've fixed the height of the parent, yet you've said that #slide is 100% in height, but there's another child of #secondp, which is the text node Panel 2. So technically, #secondp has a height of 100% + height of Panel 2, hence the overflow.
To remedy this, put the text node Panel 2 inside an element, then set the height of that element (I've used 10%) and then adjust the height of #slide to be 100% - specified height of the new element.
Here's an example:
Fiddle
HTML:
<div id='main'>
<div id='firstp'>Panel 1</div>
<div id='secondp'>
<div id="slide1">Panel 2</div>
<div id='slide'>Panel 3</div>
</div>
</div>
CSS:
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#firstp{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
#secondp{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
box-sizing: border-box;
}
#slide{
width: 100%;
height: 90%;
position: relative;
border: 1px solid green;
background-color: green;
box-sizing: border-box;
}
#slide1 {
height: 10%;
}
You'll also notice I've added vertical-align: top to firstp aswell, otherwise it'll be off the top.
Also, I've added box-sizing: border-box to prevent the border overlapping the parent.
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#main>div{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
}
#main>div{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
}
#slide{
width: 100%;
height: 100%;
position: absolute;
border: 1px solid green;
background-color: green;
}