How to get css width afterRender in emberjs

Question

I am trying to instantiate a canvas component with emberjs. I am using EaselJS to draw some text onto it. However, it looks like the CSS is being applied after it draws the text and the text gets stretched out when it applies width/height 100%.

I want my canvas to fill its parent and I don't know how big it will be until run time which is why height and width are 100%.

I tried using Em.run.next like it says here: Ember.js - afterRender fires before CSS is finished but it did not change anything. Is there another event that fires after CSS has been applied? I need to do some initialization that depends on the width and height of the canvas.

.easelCanvas {
  height: 100%;
  width: 100%;
  background-color: white;
}

Here is my EmberJS component:

export default Ember.Component.extend({
     tagName: 'canvas',
     classNames: ['easelCanvas'],
     canvasModel: null,
     didInsertElement: function() {
         this._super();
         Ember.run.scheduleOnce('afterRender', this, function() {
             console.log(this.$().css('width'));
             var stage = new createjs.Stage(this.element);
             var someText = new createjs.Text("HELLO WORLD!", "40px Arial", "#ff7700");
             stage.addChild(someText);
             stage.update();
        });
     }
});

EDIT:It seems that you need to use the width and height attributes of the canvas to set it. The style width and height define the box to place it in Canvas is stretched when using CSS but normal with "width" / "height" properties. So by using attribute bindings I can set the width and height in pixels and it works. However I am not sure how to set it as a percentage because if I do, it appears as a tiny box.

You can try [didRender](http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_component-lifecycle-hooks). `didRender` runs after `didInsertElement` (it also runs on subsequent re-renders). — Hasib Mahmud, Jul 30 '15 at 06:37
You could cheat, using the afterRender event and then throwing your resizing code in a window.setTimeout of 0, this will effectively throw your code at the end of the queue and "should" run it after the browser has done a repaint. — Windgazer, Jul 30 '15 at 08:49

score 1 · Accepted Answer · answered Jul 30 '15 at 10:37

This had nothing at all to do with EmberJS specifically. I just had to update the canvas width and height attributes on render, so they match the amount that the css stretched it out by. I did have to end up using Ember.run.next. Here is my final Component:

export default Ember.Component.extend({
  tagName: 'canvas',
  classNames: ['easelCanvas'],
  canvasModel: null,
  didInsertElement: function() {
      this._super();
      Ember.run.next(this, function() {
      this.element.width  = this.element.offsetWidth; //set actual width of canvas to match css
      this.element.height = this.element.offsetHeight; //set actual height of canvas to match css
      var stage = new createjs.Stage(this.element);
      var someText = new createjs.Text("HELLO WORLD!", "40px Arial", "#ff7700");
      stage.addChild(someText);
      stage.update();

    });

How to get css width afterRender in emberjs

1 Answers1