title: How to get height of a div in Ionic
body: <p>I'm working to develop a mobile app using Ionic.</p>
  
  <p><strong>A bit of background first as to what I am trying to achieve.</strong></p>
  
  <p>I've got a challenging bit of design I am coding in. I am placing an image of fixed height, in the bottom right hand corner of a div which has a flexible height. The text within the div then needs to wrap around the image. </p>
  
  <p>Like this:
  <a href="http://i.stack.imgur.com/Dq0xv.jpg" rel="nofollow">What the end result should be like</a></p>
  
  <p><strong>The HTML and CSS side of things</strong></p>
  
  <p>I've got the CSS and HTML sussed (at least I think!). The HTML is:</p>
  
  <pre><code>    //this line is in the head
      &lt;style ng-bind-html="myStyles"&gt;&lt;/style&gt;
  
      //the rest is in the body of the HTML 
      &lt;div class="score_block"&gt;
          &lt;div class="description"&gt;
              &lt;div class="image_container"&gt;
                  &lt;img src="img/emotional_man.png"&gt;  
              &lt;/div&gt;            
              &lt;p&gt;{{area.levelling.description}}&lt;/p&gt;
              &lt;div class="habits_button"&gt;
                  &lt;button ng-click="$state.go('app.planner')" class="button button-stable button-icon button-block"&gt;Plan habits&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <p>And the CSS (written using SASS) is like this:</p>
  
  <pre><code>.score_block {
      text-align: center;
      position: relative; 
      .description {
          text-align: left;
          margin: 10px 0;
      }
      .image_container {
          clear: both;
          float: right;
          width: 100px;
          height: 100px;
          img {
              height: 100px;
              width: 100px;
          }
      }
  }
  .score_block:before {
      content: "";
      float: right;
      height: 200px;
      width: 0;
  }
  </code></pre>
  
  <p>If I change the height of the 'score_block:before' class I can reposition the image just I need. </p>
  
  <p><strong>The Javascript so far</strong></p>
  
  <p>So with the Javascript side of things I'm hoping that if I can figure out the height of the .description div, I can subtract the height of the image from it and tell the CSS how to position the image. I need some AngularJS to do this - I think that's what I need as JQuery doesn't work in Ionic as far as I know.</p>
  
  <p>So far I have JS code that does this:</p>
  
  <pre><code>.controller('emotionalCtrl', function ($scope, $state, AreasService, _) {
      //these commented out lines are to show things I have tried but don't work
      //var blockH = $(".description").height();
      //var descriptionHeight = angular.element('description');
      //var number = descriptionHeight('offsetHeight');
  
      var number = 0;
      $scope.myStyles = "#habit_area_homepage .score_block:before { height:" + number + "px; }";
      })
  </code></pre>
  
  <p>I'm looking to do a calculation on the variable <em>number</em> and pass that back in. I can manually change the value of <em>number</em> of it works fine so I know everything else is good. I've read some stuff about doing directives etc but all the examples I've seen confuse me. Maybe I need to put a directive in here or something to help me get the height of the .description element but I just can't figure out to do this. I've spent nearly two days getting this far!</p>
  
  <p>I'm pretty new to AngularJS and Ionic so any help would be really appreciated. Thanks!</p>