JackInABottle JackInABottle - 4 months ago 15
jQuery Question

Move child div dynamically after calculating div's height with jQuery

Yesterday I asked how to calculate a div's height and adjust it according to the overflown text inside of it when clicking on it: Calculate height according to div's inner text

I now have two buttons (glyphicons) which, if clicked will either allow you to edit the text or delete the post.

The problem, however, is that these icons don't appear in the div of which the height is calculated.

<!-- should expand -->
<div class="container-fluid" id="content-fluid">
<div class="container-update">
<div class="update-group">
<div class="update-header">
HEADER
<div class="update-author">
by CREATOR
</div>
</div>
<div class="update-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum sodales massa ac consectetur. Maecenas eu nisl vel erat pellentesque eleifend ut a est. Nullam ac lorem nisi, eu consequat nisi. In euismod porttitor adipiscing. Aenean feugiat,
turpis nec accumsan posuere, diam tellus pharetra arcu, sit amet ultrices magna felis ac elit. Donec sit amet massa nisi, sed semper turpis. Aliquam fringilla vestibulum urna, in tincidunt dui facilisis condimentum. Integer eget enim lectus, id
congue ipsum. Sed sit amet ante nec turpis mattis venenatis. In urna quam, cursus vel cursus eu, volutpat eget leo. Praesent in mi diam.
</div>
<div class="updateOptions-hidden">
<a href="editupdate.php?id="><i class="glyphicon glyphicon-wrench"></i></a>
<a href="removephp.php?id="><i class="glyphicon glyphicon-remove-sign"></i></a>
</div>
</div>
</div>
</div>


CSS:

#content-fluid {
width: 100%;
height: 0 auto;
margin-top: 55px;
background-color: transparent !important;
}

.container-update {
margin-top: 10px;
margin-left: 10px;
}

.update-group {
width: 30%;
background-color: rgba(84, 84, 84, 0.8);
border-radius: 5px;
color: white;
padding: 5px;
margin-top: 20px;
margin-bottom: -50px;
transition: .5s;
min-height: 1%;
height: 6em;
max-height: 100%;
overflow: hidden;
}

.update-group:hover {
background-color: rgba(54, 54, 54, 1);
}

.update-header {
overflow: auto;
padding-bottom: 5px;
border-bottom: 1px solid #000;
}

.update-author {
font-size: 10px;
font-family: sans-serif;
margin-right: 0px;
float: right;
text-align: right;
margin-top: 5px;
}

.update-body {
margin-top: 10px;
}

.updateOptions-hidden {
display: inline-block;
position: relative;
float: left;
border-radius: 12px;
transition: .1s;
top: 5px
}

.glyphicon-wrench,
.glyphicon-remove-sign {
color: white;
transition: .5s;
}


An example: https://jsfiddle.net/vz6s9brd/14/

Note: I already found out that it is caused by the
overflow
attribute in the parent's div. But I can't avoid using it as it belongs to the functionality of the whole thing.

Is it possible to solve this? If not, is it possible to position the icons outside the margins of the parent's div and keep it linked to it?

Answer

jQuery(function($) {
  $('.update-group').click(function() {
    this.open ^= 1;
    var $body = $(this).find('.update-body');
    $body.animate({
      height: this.open ? $body[0].scrollHeight : "3em"
    });
  });
});
body {
  overflow-y: scroll;
  margin: 0;
}
#content-fluid {
  width: 100%;
  height: 0 auto;
  /*margin-top: 55px;*/
  background-color: transparent !important;
}
.container-update {
  margin-top: 10px;
  margin-left: 10px;
}
.update-group {
  width: 30%;
  background-color: rgba(84, 84, 84, 0.8);
  border-radius: 5px;
  color: white;
  padding: 5px;
  /*margin-top: 20px;*/
  /*margin-bottom: -50px;*/
  transition: .5s;
  /*min-height: 1%;*/
  /*height: 6em; NOOOOO WHY?! set to the body content instead! */
  /*max-height: 100%;*/
  /*overflow: hidden; no need any more */
}
.update-body {
  /* ADD THIS! */
  position: relative;
  height: 3em;
  overflow: hidden;
  width: 100%;
}
.update-group:hover {
  background-color: rgba(54, 54, 54, 1);
}
.update-header {
  overflow: auto;
  padding-bottom: 5px;
  border-bottom: 1px solid #000;
}
.update-author {
  font-size: 10px;
  font-family: sans-serif;
  margin-right: 0px;
  float: right;
  text-align: right;
  margin-top: 5px;
}
.update-body {
  margin-top: 10px;
}
.updateOptions-hidden {
  display: inline-block;
  position: relative;
  border-radius: 12px;
  transition: .1s;
  top: 5px
}
.glyphicon-wrench,
.glyphicon-remove-sign {
  color: white;
  transition: .5s;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- shouldn't expand -->
<div class="container-fluid" id="content-fluid">
  <div class="container-update">
    <div class="update-group">
      <div class="update-header">
        HEADER
        <div class="update-author">
          by CREATOR
        </div>
      </div>
      <div class="update-body">
        TEST
      </div>
      <div class="updateOptions-hidden">
        <a href="editupdate.php?id="><i class="glyphicon glyphicon-wrench"></i></a>
        <a href="removephp.php?id="><i class="glyphicon glyphicon-remove-sign"></i></a>
      </div>
    </div>
  </div>
</div>

<!-- should expand -->
<div class="container-fluid" id="content-fluid">
  <div class="container-update">
    <div class="update-group">
      <div class="update-header">
        HEADER
        <div class="update-author">
          by CREATOR
        </div>
      </div>
      <div class="update-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum sodales massa ac consectetur. Maecenas eu nisl vel erat pellentesque eleifend ut a est. Nullam ac lorem nisi, eu consequat nisi. In euismod porttitor adipiscing. Aenean feugiat,
        turpis nec accumsan posuere, diam tellus pharetra arcu, sit amet ultrices magna felis ac elit. Donec sit amet massa nisi, sed semper turpis. Aliquam fringilla vestibulum urna, in tincidunt dui facilisis condimentum. Integer eget enim lectus, id
        congue ipsum. Sed sit amet ante nec turpis mattis venenatis. In urna quam, cursus vel cursus eu, volutpat eget leo. Praesent in mi diam.
      </div>
      <div class="updateOptions-hidden">
        <a href="editupdate.php?id="><i class="glyphicon glyphicon-wrench"></i></a>
        <a href="removephp.php?id="><i class="glyphicon glyphicon-remove-sign"></i></a>
      </div>
    </div>
  </div>
</div>

Comments