Organizational Research By

Surprising Reserch Topic

angular element logs incorrect value

angular element logs incorrect value  using -'javascript,angularjs,twitter-bootstrap'

I am doing a chat, using bootstrap and angular. Every message is displayed in its div with "well well-sm" classes.
That's how the code responsible for that looks like:

<div ng-repeat="message in messages" class="media" >
     <h5 class="media-heading"><span>{{message.nick}}</span> {{message.time | date: "yyyy.MM.dd HH:mm"}}</h5>
     <div change-well-height class="well well-sm">{{message.body}}   

But if its length is too big, we get this:
How ordinary and long messages look like

So I decided to add a directive change-well-height that looks if scrollWidth is bigger than clientWidth and changes height if so.
Code of the directive:

(function() {
  'use strict';

  app.directive('changeWellHeight', [
    '$location', function($location) {
      return {
        restrict: "A",
        link: function(scope, element, attr) {
          $( document ).ready(function(){
            console.log(element['0'].scrollHeight, element['0'].clientHeight, 'Height');
            console.log(element['0'].scrollWidth, element['0'].clientWidth, 'Width');
            if (element['0'].scrollHeight > element['0'].clientHeight || element['0'].scrollWidth > element['0'].clientWidth){
              //do stuff


NOW QUESTION When I first look at the whole element logged out, I see, among a lot of properties both in Chrome and FF:
clientWidth: 467,
scrollWidth: 2347

But next console.log shows:
435 435 "Width"

How is it possible that the same object gives me different values? I have no idea how to solve this

asked Oct 19, 2015 by ukohale
0 votes

Related Hot Questions

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.