0

Я экспериментирую с Bootstrap Select Field from silvio moreto, и получается, что он использует классы загрузки btn и form-control.Сделать кнопку Bootstrap-Select полной шириной (отзывчивым) с btn-блоком

Мое поле выбора окружено чувствительным столбцом col-md-1. Но если содержание становится действительно большим коснуться ... то выберите поля ширина превышает ширина окружающей его колонны col-md-1,

Я нашел btn-block использовать всю ширину родительского элемента, но как интегрировать с Rails Form Builder?

%div.col-md-1 
    = fields_for :user do |f| 
    = f.select :interest, options_for_select([ 
     ["one",{"data-value" => "one", 
       "data-content" => "<i class='fa fa-gift'></i> One"}], 
     ["two",{"data-value" => "two", 
       "data-content" => "<i class='fa fa-question-circle-o'></i> Two"}], 
     ["three",{"data-value" => "three", 
       "data-content" => "<i class='fa fa-soccer-ball-o'></i> Three"}] 
     ]), {}, :multiple => "multiple", 
       :title => "Choose what you like", 
       :class => "btn-block selectpicker" 

приводит

<select multiple="multiple" title="Choose what you like" 
    class="btn-block selectpicker" 
    name="user[interest][]" 
    id="user_interest" 
    style="display: none;"> 

    <div class="btn-group bootstrap-select show-tick btn-block"> 
    <button type="button" 
     class="btn dropdown-toggle form-control selectpicker btn-default" 
     data-toggle="dropdown" data-id="searchprofile_interest" 
     title="One, Two, Three"> 
     <span class="filter-option pull-left"> 
     <i class="fa fa-gift"></i> One, 
     <i class="fa fa-question-circle-o"></i> Two, 
     <i class="fa fa-soccer-ball-o"></i> Three</span>&nbsp; 
     <span class="caret"></span> 
    </button> 
    </div> 

</select> 

Есть ли способ, чтобы принести btn-block в кнопку?

<button type="button" 
     class="btn dropdown-toggle form-control selectpicker btn-default" 

ответ

1

Вы должны прикрепить БТН-блока data-style, как показано here. Таким образом, ваш код будет, как:

%div.col-md-1 
    = fields_for :user do |f| 
    = f.select :interest, options_for_select([ 
     ["one",{"data-value" => "one", 
      "data-content" => "<i class='fa fa-gift'></i> One"}], 
     ["two",{"data-value" => "two", 
      "data-content" => "<i class='fa fa-question-circle-o'></i> Two"}], 
     ["three",{"data-value" => "three", 
      "data-content" => "<i class='fa fa-soccer-ball-o'></i> Three"}] 
     ]), {}, :multiple => "multiple", 
       :title => "Choose what you like", 
       :class => "selectpicker" 
       :"data-style" => "btn-block" 
+0

не работает для меня, пробовал также в качестве опции HTML с '{«данных класса»=>«БТН блок»}' –

+0

@StefHej извини, я не Не знаю, откуда я получил «класс данных»; в документации четко сказано «стиль данных» и где-то по пути «класс» пришел на ум. –