Ensure default units for devices

src/canvas/view/FrameView.js

@@ -22,10 +22,10 @@ module.exports = require('backbone').View.extend({
    * Update dimensions of the frame
    * @private
    */
-  updateDim(model) {
-    const em = this.em;
+  updateDim() {
+    const { em, el, $el } = this;
+    const { style } = el;
     const device = em.getDeviceModel();
-    const style = this.el.style;
     const currW = style.width || '';
     const currH = style.height || '';
     const newW = device ? device.get('width') : '';
@@ -37,7 +37,7 @@ module.exports = require('backbone').View.extend({
     // Prevent fixed highlighting box which appears when on
     // component hover during the animation
     em.stopDefault({ preserveSelected: 1 });
-    noChanges ? this.udpateOffset() : this.$el.on(motionsEv, this.udpateOffset);
+    noChanges ? this.udpateOffset() : $el.on(motionsEv, this.udpateOffset);
   },
 
   udpateOffset() {

src/device_manager/model/Device.js

@@ -8,7 +8,7 @@ module.exports = Backbone.Model.extend({
     name: '',
 
     // Width to set for the editor iframe
-    width: '',
+    width: null,
 
     // Height to set for the editor iframe
     height: '',
@@ -24,7 +24,16 @@ module.exports = Backbone.Model.extend({
   initialize() {
     this.get('widthMedia') === null &&
       this.set('widthMedia', this.get('width'));
+    this.get('width') === null && this.set('width', this.get('widthMedia'));
     !this.get('priority') &&
       this.set('priority', parseFloat(this.get('widthMedia')) || 0);
+    const toCheck = ['width', 'height', 'widthMedia'];
+    toCheck.forEach(prop => this.checkUnit(prop));
+  },
+
+  checkUnit(prop) {
+    const pr = this.get(prop);
+    const noUnit = (parseFloat(pr) || 0).toString() === pr.toString();
+    noUnit && this.set(prop, `${pr}px`);
   }
 });