Simple_form bootstrap style inline-form ne fonctionne pas correctement
J'ai un travail twitter bootstrap installer et simple formulaire génère les éléments suivants:
<form accept-charset="UTF-8" action="/find_map" class="simple_form form-inline" id="new_location" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="p5CSoidWaoGMfHY0/3ElWi0XJVg6Cqi9GqWRNlJLBQg=" /></div>
<div class="control-group string required"><div class="controls"><input class="string required" id="location_address" name="location[address]" placeholder="Address" size="50" type="text" /></div></div><input class="btn" name="commit" type="submit" value="Find!" />
</form>
En quelque sorte le"!" bouton n'apparaîtra pas sur la même ligne que la zone de recherche. Des idées?
Merci!
Mise à JOUR:
Désolé j'aurais du mentionner que tous le balisage est généré par simple_form basé sur les éléments suivants:
<%= simple_form_for @location, :url => find_map_path, :html => { :class => 'form-inline' } do |f| %>
<%= f.input :address, :label => false, :placeholder => "Address" %>
<%= f.submit "Find!", :class => 'btn' %>
<% end %>
Donc, vraiment, il semble y avoir un problème avec l'généré le balisage, même si j'ai exécuter le programme d'installation pour installer simple_form, etc.
L'image ci-dessus montre une quinte de formulaire html
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<button type="submit" class="btn">Sign in</button>
</form>
...au-dessus de celui généré par simple_form.
source d'informationauteur Abram
Vous devez vous connecter pour publier un commentaire.
Je pense qu'il ya un couple de questions ici. L'un est la mise en forme, et la façon dont simple_form ajoute un
<div>
autour du champ de saisie. @Ron la suggestion de l'utilisation deinput_field
fonctionne pour moi avec simple_form 2.0.1. Mon exemple est à la recherche d'un nom dans une table de Contacts. La suite rend la zone de texte et le bouton s'affichent côte à côte:L'autre problème est qu'il semble simple_form suppose généralement que vous voulez travailler avec le modèle et les noms de champ. L'exemple ci-dessus utilise un
:symbol
au lieu d'un@model
comme premier argument, comme l'a suggéré ici. Mais cela génère un champ de saisie nommécontact[search]
de sorte que vous auriez à dire à votre contrôleur de la façon de les gérer.Je pense que dans ce cas, il peut être plus simple pour pas utilisation simple_form et au lieu d'utiliser quelque chose comme la forme près du début de Ryan Bates Railscast, #240, de Recherche, de Tri, de Paginer avec AJAX:
Maintenant le champ est nommé "recherche" et je peux le consommer dans mon controller #méthode de l'indice de quelque chose comme ceci:
en supposant que j'ai dans mon modèle:
Il est en train de créer des sous-formulaires parce que vous êtes de passage
input
à simple_form. Utilisationinput_field
à la place. (BTW, cela fonctionne aussi avec simple_fields_for).Vous avez besoin pour personnaliser le
control-group
etcontrols
div classes pour afficher commeinline-block
quand ils sont sous unform-inline
forme:Ajoutant à la Marque de répondre:
Donc,
input_field
existe pour créer la entrée seule composante, il ne sera pas vous donner toute sorte d'étiquette/erreur/wrapper. Cela signifie que vous n'aurez pas de ou une étiquette d'emballage le terrain, vous devez le faire manuellement dans le cas où vous voulez.Maintenant sur l'utilisation de la forme avec un objet, SimpleForm est un FormBuilder, ce qui signifie qu'il a été créé pour travailler pour travailler avec un espace de noms, d'être un objet ou un symbole. SimpleForm de simple_form_for == Rails form_for, vous toujours besoin d'un objet de l'espace de noms de travailler avec.
Pour un cas simple comme un formulaire de recherche, vous êtes mieux avec la forme simple helpers comme
form_tag
comme vous l'avez souligné. Il n'y a pas besoin de s'appuyer sur simple_form_for ou form_for pour cela, je suis d'accord et j'ai l'habitude d'aller en bas de ce chemin.J'espère que ça aide, laissez-moi savoir si vous avez encore des doutes.
Modification le :html => { :classe => 'form-inline' }: html => { :classe => "form-horizontal"}
ne pouvez pas vous déplacer sur le bouton input ensuite à l'entrée de l'adresse? Je pense que ça va résoudre le problème
S'il vous plaît, tous les gens avec ce problème, n'utilisez pas de liquide de mise en page et assurez-vous de spécifier le doctype HTML5 pour les documents.