Search code examples
ember.jshandlebars.jsember-cli

How to setup "style" attribute on Embers Handlebars {{input}} helper?

I try to use {{input style="width:100%"}} in my view's template but without any success.

Browser stubbornly renders <input> without style="width:100%;". How can I achieve it?

For future reference, below is my resolution (for Ember-Cli) based on @damienc answer:

Component class

//app/components/forms/elements/style-input.js
import Ember from "ember";
export default Ember.TextField.extend({
    attributeBindings: ['style'],
    styleAttrib      : null,
    style: Ember.computed({
        get: function () {
            return Ember.String.htmlSafe(this.get('styleAttrib'));
        },
        set: function (key, newStyle) {
            this.set('styleAttrib', newStyle);
            return Ember.String.htmlSafe(newStyle);
        }
    })
});

And the template:

{{!app/templates/components/portlet-datatable/header-cell-filterable.hbs}}
<div class="ember-table-content-container">
      <span class="ember-table-content">
        {{forms/elements/style-input type="text"
        placeholder=view.content.headerCellName style="width: 100%;"}}
      </span>
</div>
Solution

  • This is not supported out-of-the-box by the input helper.

    You could either add a class parameter that matches a CSS rule, or implement your own input helper to add style to your component's attributeBindings attribute.

    This old cookbook entry achieves some specific behavior by extending the Ember.TextField class: http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/