Sorry if this is a duplicate question, but I couldn’t find an exact match to this which worked, so here it goes.
I have a web page with divs for each database entry. However, the div doesn’t resize with text, causing the text to display out of div. I’m using bootstrap.
I’ve attached a fiddle.
Increase the width of the fiddle output to see the overflowing text.
Currently, i’m working on just the desktop version, but i’ll have to build a mobile version as well. So it’ll be better if you can help me out with both 🙂
Below is my code
.each-entry-box {
min-height: 80px;
max-height: 110px;
width: 80%;
background: #F5F5F5;
margin: 10px;
border-radius: 5px;
position: relative;
}
.each-entry-box-header {
height: auto;
width: 100%;
background: #E6E6FA;
margin: 0;
border-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: absolute;
padding: 2px;
}
.main-content {
margin: 15px;
top: 30px;
position: relative;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="each-entry-box">
<div class="each-entry-box-header">
<div class="col-md-9 customer-name">
<i class="glyphicon glyphicon-user glyphicon-class"></i><span>customer name</span>
</div>
<div class="col-md-3 added-on">
<i class="glyphicon glyphicon-time glyphicon-class"></i><span>time</span>
</div>
</div> <!-- each-entry-box-header ends here -->
<div class="main-content">
<div class="col-md-12">
<div class="col-md-3 customer-mobile">
<i class="glyphicon glyphicon-earphone glyphicon-class"></i><span>mobile number</span>
</div>
<div class="col-md-9 customer-email">
<i class="glyphicon glyphicon-envelope glyphicon-class"></i><span>No email ID added</span>
</div>
</div>
<div class="col-md-12">
Material : None
</div>
<div class="col-md-12">
<div class="col-md-4">
XYZ : None
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
2
Answers
.main-content
should not have relative position. For mobile responsive styles, you can usecol-sm-
andcol-xs-
:Here’s a working JS Fiddle,
I’ve floated both divs and removed the absolute positioning, I’ve also changed the background colour from the parent element to the child element, so as the list grows, the background will too
HTML:
CSS: