Setting the Ember.TextField Size Attribute

Question

I have the following element in an Ember view:

{{view Ember.TextField size="30" valueBinding="urlSearch.search_url"}} 

But when I check the rendered element, the size attribute is not in the element:

 <input id="ember346" class="ember-view ember-text-field" type="text" value="http://www.bdec-online.com/bd-cmpy/bd-cz.cfm"> 

Can someone tell me how to set the size attribute of Ember.TextField?

Answer 1

I just sent a transfer request to add size and maximum length to Ember.TextSupport:

https://github.com/emberjs/ember.js/pull/545

While you are waiting for this, you can install Ember.TextField as follows:

 Ember.TextField.reopen({ attributeBindings: ['size', 'maxlength'] }); 

Answer 2

Additional Information:

  {{view Em.TextField attributeBindings="size" size="10"}} 

Or:

 App.MyTextField = Em.TextField.extend({ attributeBindings: ['size'], size: 2 }); {{view App.MyTextField}} 

Em.TextField defines size as a binding, but it looks like you should redefine it in your subclass ... but I am noob at Ember, so I know.

Answer 3

Ember.TextField , and the helper {{input type="text" ..}} Handlebars uses the HTML class ember-text-field . There are situations when it is permissible to change all instances of Ember.TextField with one consistent style, for example, when your Ember application has only one Ember text field. Then you can change the layout associated with ember-text-field via CSS, for example, as follows:

 .ember-text-field { font-family: Amaranth, georgia, cursive; font-size: 1.2em !important; height: 1.2em !important; width: 70%; margin-left: 5%; margin-right: 5%; margin-top: 0.5em; margin-bottom: 0.5em; }