Is there something like integration with pure HTML ?

[adfinis]

Is there something like integration with pure HTML ?

[czosel]

Currently we don't support element-specific CSS classes.

We could discuss adding a class property to the label and input components, but that won't solve your case completely because you'd like your input to be wrapped inside a div.

You could try using custom input and label elements (see docs) to achieve this. It might look roughly like this:

{{#f.input label-component=(...) as |fi|}}
    <input
      type        = "text"
      value       = {{fi.value}}
      class       = "col-md-2"
      oninput     = fi.update
      onblur      = fi.setDirty
      >
  {{/f.input}}

/cc @anehx

[mostafahussein]

@czosel Thanks for pointing me to this. Currently I wrote it as the following as i find it easier to customize through html:

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Name <span class="required">*</span>
  </label>
  <div class="col-md-6 col-sm-6 col-xs-12">
    {{#f.input name="name" as |fi|}}
      <input type = "text" value = {{fi.value}} class = "form-control col-md-7 col-xs-12" oninput = {{ fi.update }} onblur = {{ fi.setDirty }} >
    {{/f.input}}
  </div>
</div>

The UI rendering as expected but I am getting the following error while typing in the text box

"Assertion Failed: You attempted to access the `length` property (of changeset:[object Object]).
Since Ember 3.1, this is usually fine as you no longer need to use `.get()`
to access computed properties. However, in this case, the object in question
is a special kind of Ember object (a proxy). Therefore, it is still necessary
to use `.get('length')` in this case.

If you encountered this error because of third-party code that you don't control,
there is more information at https://github.com/emberjs/ember.js/issues/16148, and
you can help us improve this error message by telling us more about what happened in
this situation.

Also I cannot get the value that was typed in the textbox.

What should I do ?

I am using ember 3.3

[mostafahussein]

I have solved the issue thank you!, should we close this or leave it open as a reminder for the custom css support ?

[czosel]

Awesome! How did you solve it?
I'll close the issue, since custom CSS support wouldn't have covered your use-case.