bootstrap-select-rails не работает с bootstrap 4 - PullRequest
0 голосов
/ 12 мая 2019

Я настраиваю новый проект с Bootstrap 4 и селектором bootstrap-select-rails.Средство выбора не работает и не может определить правильный стиль.Вот как должны выглядеть селекторы выбора: https://developer.snapappointments.com/bootstrap-select/examples/

Вместо этого он отправляет нестандартную версию, как если бы она не включала драгоценный камень селектора выбора.Как и в разделе 1 следующей страницы:

https://bootstrapbay.com/blog/useful-bootstrap-4-select-picker-for-your-forms/

Мне кажется, я правильно установил все необходимые зависимости (popper.js, jquery и т. Д.)

Iпопытался использовать несколько версий гема bootstrap-select-rails и попытался включить селектор выбора с помощью двух предложенных методов:

через js:

$(document).ready(function() {
    $('.selectpicker').selectpicker();
});

и путем добавления класса selectpicker вполе формы

<%= f.input :use_standard_steps, label: 'Select input test', as: :select, collection: ['a','b','c'], required: false, input_html: { class: "selectpicker", multiple: true } %>

Ниже приведена копия моего гемфайла:

ruby '2.5.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# gem 'sqlite3'
gem 'bootsnap', '>= 1.1.0', require: false
gem 'bootstrap', '~> 4.1.3'
gem 'bootstrap-select-rails', '~> 1.3.0.1'
gem 'bootstrap4-datetime-picker-rails'
gem 'coffee-rails', '~> 4.2'
gem 'devise', '~> 4.6.2'
gem 'factory_bot_rails'
gem 'faker', '1.9.1' # Create fake database data
gem 'font-awesome-sass', '~> 5.6.1'
gem 'jbuilder', '~> 2.5'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'jquery-ui-rails', '~> 6.0.1'
gem 'momentjs-rails', '~> 2.20.1'
gem 'pg', '~> 1.1.4'
gem 'popper_js', '~> 1.14.5'
gem 'puma', '~> 3.11'
gem 'sass-rails', '~> 5.0'
gem 'simple_form', '~> 4.1'
gem 'turbolinks', '~> 5'
gem 'uglifier', '>= 1.3.0'
gem 'webpacker', '~> 4.x'

Копия моего приложения. js

//= require rails-ujs
//= require jquery
//= require jquery-ui
//= require popper
//= require bootstrap
//= require moment
//= require moment/nl.js
//= require tempusdominus-bootstrap-4.js
//= require bootstrap-sprockets
//= require bootstrap/alert
//= require bootstrap/dropdown
//= require bootstrap-select
//= require activestorage
//= require turbolinks
//= require_tree .

И копия моего приложения..css.scss

@import "jquery-ui";
@import "bootstrap";
@import 'bootstrap-select';
@import "tempusdominus-bootstrap-4.css";
@import "custom";
@import "general";
@import "font-awesome-sprockets";
@import "font-awesome";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Raleway');

Chrome Inspect показывает, что css Bootstrap-selectpicker включен в мою HEAD

Может кто-нибудь указать на недостатки в моей настройке?

1 Ответ

0 голосов
/ 15 мая 2019

Мне не удалось решить проблему с помощью bootstrap-select-rails или изменить порядок моих application.js и application.scss.Вместо этого я включил в свои активы последнюю версию файла css и js. Это решило проблему для меня.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...