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. didRender runs after didInsertElement (it also runs on subsequent re-renders). — Hasib Mahmud
– Hasib Mahmud, Commented Jul 30, 2015 at 6: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
– Windgazer, Commented Jul 30, 2015 at 8:49

Asagohan · Accepted Answer · 2015-07-30 10:37:11Z

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();

    });

Collectives™ on Stack Overflow

How to get css width afterRender in emberjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related