Setting the size attribute of an Ember.TextField

Question

I have the following element in an Ember view:

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

But when I inspect 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 anyone tell me how can I set the size attribute of an Ember.TextField?

Answer 1

I've just submitted a pull request to add size and maxlength to Ember.TextSupport:

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

While you're waiting for that, you could patch Ember.TextField like this:

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

Answer 2

More info:

  {{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 appears you have to redefine it in your subclass... but I'm I noob at Ember so what do I know.

Answer 3

Ember.TextField instances and the {{input type="text" ..}} Handlebars helper use the HTML class ember-text-field. There are situations where it is acceptable to modify all instances of Ember.TextField with a single consistent style, for example when there is only one single Ember text field in your Ember application. Then, you can modify the layout associated with ember-text-field via CSS, for example like this:

.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;
}