[英]How can a dropdown be stylized when using twitter bootstrap with simple_form in a Rails app?
I am using simple_form and twitter-bootstrap-rails gems. 我正在使用simple_form和twitter-bootstrap-rails gem。 Every thing is working fine but somehow drop-down is not getting stylized by twitter bootstrap rails ..it shows like normal forms. 一切正常,但通过Twitter引导栏无法以某种方式使下拉菜单风格化。
<%= f.input :category, :collection => ["one", "two", "three", "four"],
:input_html => {:class => 'dropdown'}, :label => 'Send To', prompt: "Choose From List" %>
IMAGE OF DROPDOWN SHOWING: 下拉显示的图像:
IMAGE OF DROPDOWN NEEDED AS IN BOOTSTRAP 引导时所需的下拉图像
One way to get stylized dropdowns with SimpleForm and Bootstrap is to use Bootstrap-Select . 使用SimpleForm和Bootstrap获取样式化下拉列表的一种方法是使用Bootstrap-Select 。 There is a Rails Gem for it; 有一个Rails Gem 。 add to your Gemfile and do a bundle
: 添加到您的Gemfile并进行bundle
:
gem 'bootstrap-select-rails'
You need to add it to your stylesheet 您需要将其添加到样式表中
@import "bootstrap-select";
and Javascript. 和Javascript。
//= require bootstrap-select
Now, all you need to do is use input_html: {class: 'selectpicker'}
in your existing f.input
: 现在,您需要做的就是在现有f.input
使用input_html: {class: 'selectpicker'}
:
<%= f.input :category, :collection => ["one", "two", "three", "four"],
:input_html => {:class => 'selectpicker'}, :label => 'Send To', prompt: "Choose From List" %>
and then initialize the Javascript (which is a one-off regardless of how many selectpickers you have): 然后初始化Javascript(无论您有多少个选择器,这都是一次性的):
<%= javascript_tag "$('.selectpicker').selectpicker();" %>
Restart your app and your input dropdown should render with Bootstrap styling. 重新启动您的应用程序,您的输入下拉列表应使用Bootstrap样式呈现。
Some extra info that may be useful: you can disable the prompt item so that it cannot be selected from the dropdown by adding the disabled
class to the item. 某些有用的额外信息:您可以禁用提示项,以便通过将disabled
类添加到提示项中,从而无法从下拉菜单中选择提示项。 I couldn't find any guidance on SimpleForm how to apply a style to one element of a collection but I came up with the below that does it to all such prompts: 我在SimpleForm上找不到任何有关如何将样式应用于集合的一个元素的指南,但是我想出了以下对所有此类提示进行处理的方法:
<%= javascript_tag "$('li[data-original-index=0]').addClass('disabled');" %>
Replace 更换
<%= f.input :category, :collection => ["one", "two", "three", "four"],:input_html => { :class => 'dropdown'}, :label => 'Send To', prompt: "Choose From List" %>
With 同
<%= f.input :category, :collection => ["one", "two", "three", "four"],:input_html => { :class => 'form-control'}, :label => 'Send To', prompt: "Choose From List" %>
.form-control
is used to style select tags. .form-control
用于设置选择标签的样式。 All textual <input>, <textarea>, and <select>
elements with .form-control
are set to width: 100%; 具有.form-control
所有文本<input>, <textarea>, and <select>
元素均设置为width:100%; by default. 默认。 Wrap labels and controls in .form-group
for optimum spacing. 将标签和控件包装在.form-group
以获得最佳间距。
dropdown
is not used for select
tags. dropdown
不用于select
标签。 See details here 在这里查看详细信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.