0

Tengo problemas con un comboBox, generado con ruby. No logro ver por qué motivo no está tomando los estilos de Bootstrap el comboBox Marca.

El formulario es _form.html.erb

<%= form_with(model: cotizacion, scope: :cotizacion, local:true, class: "form-inline") do |form| %>
  <div class="form-group">
    <%= form.select :marca, 
          options_for_select([["SUBARU", "T"], ["KIA", "S"]], 
          class: "combobox form-control" %>
  </div>
  <div class="form-group">
    <select class="combobox form-control" name="inline">
      <option value="" selected="selected">Select a State</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
    </select>
  </div>
<% end %>

La diferencia de estilos se ve reflejada en la siguiente imagen:

Estilos Bootstrap

La idea es obtener el mismo estilo del comboBox Select State y hasta el momento obtengo el estilo de comboBox Subaru.

Desde ya muchas gracias por vuestra ayuda!!!

2 respuestas 2

3

El problema es que no estás asignando el estilo correctamente; i.e. lo estás asignando en las opciones, no en el select.

Esto se debe a que el helper select está definido1 de una forma diferente a los demás helpers:

select(object, method, choices = nil, options = {}, html_options = {}, &block)

Como podrás ver, el método acepta dos hashes, uno para opciones adicionales (options = {}) y otro para las opciones de html (html_options = {}); en este último es donde debes pasar el atributo class.

Dado que no estás pasando ninguna opción adicional, debes pasar ese hash vacío, para después pasar el hash con las opciones de html; por ejemplo:

<%= form.select :marca,
      options_for_select([["SUBARU", "T"], ["KIA", "S"]]), 
      {},
      { class: "combobox form-control" } %>

1 Puedes ver la documentación del método (en inglés) en este enlace.

1

No enviaste el formulario entero, pero veo un par de errores que pueden estar causando el problema. Primero tienes estos 4 div:

                     <div class="container">
                     <div class="row">
                     <div class="col-md-2">
                     <div class="form-inline">
                     <div class="form-group">

de los cuales solo estás cerrando 3:

                 </div> 
                 </div> 
             </div>

luego tienes un form_with que te genera un tag <form> y dentro de éste mas adelante pusiste un <form class="form-inline">, lo cual no es correcto ya que los form no deben ir anidados. Creo que una aproximación mas cercana a lo que buscas, obviamente excluyendo el botón de "recibir ofertas" y otros elementos que dejaste fuera del código que muestras, sería algo como esto:

<%= form_with(model: cotizacion, scope: :cotizacion, local:true, class: "form-inline") do |form| %>
  <div class="form-group">
    <%= form.select :marca, options_for_select([["SUBARU", "t"], ["KIA", "s"]], class: 'combobox form-control') %>
  </div>
  <div class="form-group">
    <select class="combobox form-control" name="inline">
        <option value="" selected="selected">Select a State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
    </select>
  </div>
<% end %>

PD: La palabra es "estilo", no "stylo".

1
  • Hola @Alter, aplique lo comentado, el comportamiento es el mismo. He modificado el formulario para que solo muestre los elementos comentados. Alguna otra idea? Muchas GRACIAS!! el 3 ago. 2017 a las 11:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.