0

I am using bulma.io and for using its style classes for a selectbox it requires the following code.

<div class="field">
  <label class="label">Subject</label>
  <p class="control">
    <span class="select">
      <select>
        <option>Select dropdown</option>
        <option>With options</option>
      </select>
    </span>
  </p>
</div>

which requires a span instead of div for wrapping the (label and select tag).

I've tried to use tagName="span" but the generated code was like that link

here is my code

 <div class="field">
  <p class="control">
    {{f.select-field "countries"
      countries
      optionValuePath="value"
      optionLabelPath="text"
      labelClasses="label"
      label="Location"
      required=true
      tagName="span"
    }}
  </p>
 </div>

which generated a span wrapping the div .. not converting the div to span <span><div><label><select></div></span>

Nouran Mahmoud
  • 309
  • 1
  • 2
  • 13

1 Answers1

1

If you include select into a component, the component is wrapped with span:

component/my-select.js : import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span',
  classNames: ['select']
});

templates/components/my-select.hbs : 

<select>
   <option>Select dropdown</option>
   <option>With options</option>
</select>>

myPage.hbs : 

<div class="field">
 <p class="control">
  {{my-select}}
 </p>
</div>

here is the twiddle

docsa
  • 51
  • 8