ruby-on-rails-3 - simple_form - rails forms select
Anexar/anteponer íconos bootstrap con simple_form (2)
Los iconos de Twitter Bootstrap son bastante mortales aquí .
Mira la esquina inferior derecha de esa sección. ¿Ves ese correo electrónico con un icono antepuesto? Eso es lo que quiero hacer. Quiero hacer simple_form y boostrap jugar muy bien.
Esto es lo que he encontrado que precede al icono a la entrada:
= f.input :email, :wrapper => :append do
= f.input_field :email
<span class="add-on"><i class="icon-envelope"></i></span>
Pero no es al ras (eso podría solucionarse cambiando las compensaciones en CSS) y es bastante feo. Para referencia, aquí está el arreglo CSS (agréguelo a su archivo bootstrap_overrides.css.less):
.input-prepend .add-on,
.input-append input {
float: left; }
¿Alguien sabe una forma menos intrincada de hacer un simple ante formularios o adjuntar un ícono con bootstrap?
Actualizar:
La respuesta a continuación me hizo echarle otro vistazo. HAML generalmente agrega espacios en blanco en todas partes, pero hay una workaround
Aquí hay una actualización para el HAML original que elimina los espacios en blanco y no requiere el truco de CSS:
= f.input :email, :wrapper => :append do
= f.input_field :email
%span.add-on>
%i.icon-envelope
Ese poco mayor que (>) hace toda la diferencia. El HTML de salida no tiene nuevas líneas entre la entrada y el intervalo.
Descubrí una mejor manera de hacer esto, mantener intactos el placeholder , la label y otras opciones.
Para aquellos que todavía están usando el antiguo Bootstrap 2.3.x
<div class="input-prepend">
<span class="add-on">@</span>
<%= f.input_field :password, :required => true, :label=>false, :placeholder=>"Password" %>
</div>
La clave es usar f.input_field para eliminar todos los envoltorios div.
ACTUALIZAR
Puede usar la otra solución para incluir un marcador de posición, pero no puede quitar la etiqueta con esa solución.
<%= f.input :email, :wrapper => :append do %>
<%= f.input_field :email, placeholder: "hello" %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>
Se debe al espacio en blanco entre los elementos de input y de span . En este caso, un salto de línea.
No estoy lo suficientemente familiarizado con HAML para decirle cómo eliminar el espacio en blanco, pero el ERB equivalente sería algo así como:
<%= f.input :email, :wrapper => :append do %>
<%= f.input_field :email %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>