How to get height of a div in Ionic

Question

I'm working to develop a mobile app using Ionic.

A bit of background first as to what I am trying to achieve.

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.

Like this: What the end result should be like

The HTML and CSS side of things

I've got the CSS and HTML sussed (at least I think!). The HTML is:

    //this line is in the head
    <style ng-bind-html="myStyles"></style>

    //the rest is in the body of the HTML 
    <div class="score_block">
        <div class="description">
            <div class="image_container">
                <img src="img/emotional_man.png">  
            </div>            
            <p>{{area.levelling.description}}</p>
            <div class="habits_button">
                <button ng-click="$state.go('app.planner')" class="button button-stable button-icon button-block">Plan habits</button>
            </div>
        </div>
    </div>  

And the CSS (written using SASS) is like this:

.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;
}

If I change the height of the 'score_block:before' class I can reposition the image just I need.

The Javascript so far

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.

So far I have JS code that does this:

.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; }";
    })

I'm looking to do a calculation on the variable number and pass that back in. I can manually change the value of number 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!

I'm pretty new to AngularJS and Ionic so any help would be really appreciated. Thanks!

Answer 1

There are multiple ways to accomplish dynamic styles.

According to your provided code. I recommend you add styles to head.

Run below codes in your controller or "run":

 angular.module("app",[]).run(function(){
   var stylesTpl="<style>#habit_area_homepage .score_block:before { height:" + number + "px; } </style>"; 
   angular.element(document).find("head").append(stylesTpl);
 })

Check this post for built-in directives of angular to achieve dynamic styles:

How do I conditionally apply CSS styles in AngularJS?

If you want to get the height of a specific div, you have two ways:

1. Assign an id to the div, and use

   var element = document.getElementById("id");
   console.log(element.offsetHeight);
   

2. Use querySelectors, this returns the first and only one element:

   var element = document.querySelector(".description");
   console.log(element.offsetHeight);
   

Using directive is also a good way, check:

Get HTML Element Height without JQuery in AngularJS