div not resizing with content

Question

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>

Here is the [resizable text inside div](http://stackoverflow.com/questions/6112660/how-to-automatically-change-the-text-size-inside-a-div) solution from StackOverflow itself. — Shubham Namdeo, Dec 07 '16 at 04:13
@Subham, my question is the exact opposite of this. I want my div to increase in height when my text overflows — mrid, Dec 07 '16 at 06:43

Bob Dust · Answer 1 · 2016-12-07T06:33:44.743

.main-content should not have relative position. For mobile responsive styles, you can use col-sm- and col-xs-:

.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: 0px;
  border-bottom-right-radius: 0px;
  position: absolute;
  padding: 2px;
}

.main-content {
  margin: 15px;
  margin-top: 25px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="each-entry-box row">
  <div class="each-entry-box-header">
    <div class="col-md-9 customer-name col-sm-9 col-xs-8">
      <i class="glyphicon glyphicon-user glyphicon-class"></i><span>customer name</span>
    </div>
    <div class="col-md-3 added-on col-sm-3 col-xs-4">
      <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 col-sm-3">
        <i class="glyphicon glyphicon-earphone glyphicon-class"></i><span>mobile number</span>
      </div>
      <div class="col-md-9 customer-email col-sm-9">

        <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>

Pls add some explanation for your answer – Mandeep Jain Dec 07 '16 at 04:51 — Mandeep Jain, Dec 07 '16 at 04:51
@MandeepJain, explanation added – Bob Dust Dec 07 '16 at 06:34 — Bob Dust, Dec 07 '16 at 06:34
Thanks. It helps improve quality of the answer. :) – Mandeep Jain Dec 07 '16 at 06:36 — Mandeep Jain, Dec 07 '16 at 06:36

score 0 · Answer 2 · answered Dec 07 '16 at 04:36

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:

<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>

CSS:

.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: 0px;
    border-bottom-right-radius: 0px;
    /* position: absolute; */
    padding: 2px;
    float: left;
    }

.main-content{
            /* margin: 15px; */
    /* top: 30px; */
    /* position: relative; */
    width: 100%;
    background: #F5F5F5;
    float: left;
    clear: left;
    }

thanks @Gerard, but when I put more content in the `.main-content`, it still looks messy...see https://jsfiddle.net/d93u1kv0/2/ — mrid, Dec 07 '16 at 06:28
That extra content doesn't seem to be inside a column, and therefore has no padding, is that why it's messy? — Gerard Simpson, Dec 07 '16 at 06:31

div not resizing with content

2 Answers2