bootstrap-select

Bootstrap Select - reinitialize on dynamically added element

由 你离开我真会死。 提交于 2019-12-09 05:04:13
问题 I'm using Bootstrap Select (http://silviomoreto.github.io/bootstrap-select/) for displaying dropdown with Font-Awesome icons for each section of my website. I added ability to add new sections - when clicked on add button, a new section (duplicate of previous section) is added. In this section, the Bootstrap Select doesn't work. I tried to reinitilize it like: var select = $('[name="section['+ numbersection +'][section_icon]"]'); $(select).selectpicker('destroy'); $(select).selectpicker({

Bootstrap select destroy removes the original select from DOM

由 [亡魂溺海] 提交于 2019-12-08 20:33:16
问题 I am currently using the Bootstrap select plugin in one of my projects. I have a dynamically generated table that has select elements which I then convert to bootstrap select using the command: _tr.find('select.selectpicker').selectpicker({ size: 10 }); Where _tr is the row where I added the select elements. This is working fine, the bootstrap select is shown and in firebug I still see the original select element. Now every row has a button where it removes ( destroy ) the bootstrap select.

losing css style in dynamically added table rows

由 旧巷老猫 提交于 2019-12-08 10:25:01
问题 I've read a lot about adding and removing rows from tables dynamically. I'm very sure I have done everything the right way. my view: <table id="LibList" class="table table-responsive table-condensed table-bordered"> <thead> <tr> <th> @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Types) </th> <th> @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Name) </th> <th> @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Balance) </th> <th> @Html.DisplayNameFor(model => model

Bootstrap select input area bigger than parent

由 醉酒当歌 提交于 2019-12-08 05:11:40
问题 So my bootstrap select's area is bigger than I'd like when it's on small screens (mobile). So I was wondering if there was some way to force the selection area to not be bigger than the parent. My problem via image below as well as recreated issue in snippet. The black bar represents edge of screen. $.ajax({ url: "https://restcountries.eu/rest/v2/all", success: (data) => { let select = $("#select-country"); for (let country of data) { select.append(` <option> ${country.name} </option> `); } $

Bootstrap select input area bigger than parent

由 ￣綄美尐妖づ 提交于 2019-12-06 20:49:27
So my bootstrap select's area is bigger than I'd like when it's on small screens (mobile). So I was wondering if there was some way to force the selection area to not be bigger than the parent. My problem via image below as well as recreated issue in snippet. The black bar represents edge of screen. $.ajax({ url: "https://restcountries.eu/rest/v2/all", success: (data) => { let select = $("#select-country"); for (let country of data) { select.append(` <option> ${country.name} </option> `); } $(select).prop('disabled', false); $(select).selectpicker('refresh'); } }); <script src="https://code

how to get the clicked option in bootstrap selectpicker?

由 ℡╲_俬逩灬. 提交于 2019-12-05 19:24:10
$('.excludeDaysPicker').selectpicker(); I have bootstrap selectpicker with 'multiple' choose option enabled. <select class="excludeDaysPicker" multiple title="Not Selected"> <option value="Monday" id="1" class="excludeDays">Monday</option> <option value="Tuesday" id="2" class="excludeDays">Tuesday</option> <option value="Wednesday" id="3" class="excludeDays">Wednesday</option> <option value="Thursday" id="4" class="excludeDays">Thursday</option> <option value="Friday" id="5" class="excludeDays">Friday</option> <option value="Saturday" id="6" class="excludeDays">Saturday</option> <option value=

How to add data attribute in Rails form select tag?

由 五迷三道 提交于 2019-12-05 11:08:13
问题 I found this Bootstrap Select project and its gem for Rails. I want to implement search in the select tag. I do inspect element and here is the HTML source: <select class="selectpicker" data-live-search="true"> <option>Hot Dog, Fries and a Soda</option> <option>Burger, Shake and a Smile</option> <option>Sugar, Spice and all things nice</option> </select> How do I add data-live-search="true" inside my form select tag? My form select: <%= f.select :food_id, options_for_select(Food.all.map{|c|

How to enable/disable bootstrap selectpicker by ickeck checkbox

由 こ雲淡風輕ζ 提交于 2019-12-05 09:39:20
问题 There are selectpicker beside checkbox . I want if checkbox is checked, selectpicker will be enable, if unchecked, selectpicker will be disable. I wrote this which was not working ( Here is the fiddle ): $('.checkBox').on('ifChecked', function(event) { $(this).parents('.clearfix').find('.selectpicker').removeAttr('disabled'); }); $('.checkBox').on('ifUnchecked', function(event) { $(this).parents('.clearfix').find('.selectpicker').attr('disabled'); }); 回答1: You should refresh the selectpicker

Bootstrap-select plugin: how to avoid flickering

由 血红的双手。 提交于 2019-12-05 00:34:21
The Bootsrap-select plugin is amazing ( http://silviomoreto.github.io/bootstrap-select/ ). It provides an extremely easy way of creating gorgeous select menus in Bootstrap. The one problem I've encountered with it, however, is "flickering" on page load. What I mean by this is fairly straight forward: The page loads with original HTML select element (which of course looks like crap) The Bootstrap-select plugin JS runs At some noticeable time after the page loads the original HTML select element is converted to a nice Bootstrap-select element by JS in Step (2). So, the user first sees the HTML

How to add data attribute in Rails form select tag?

由 假装没事ソ 提交于 2019-12-03 23:29:00
I found this Bootstrap Select project and its gem for Rails . I want to implement search in the select tag. I do inspect element and here is the HTML source: <select class="selectpicker" data-live-search="true"> <option>Hot Dog, Fries and a Soda</option> <option>Burger, Shake and a Smile</option> <option>Sugar, Spice and all things nice</option> </select> How do I add data-live-search="true" inside my form select tag? My form select: <%= f.select :food_id, options_for_select(Food.all.map{|c| [c.name, c.id]}, f.object.food_id), {}, {class: "form-control selectpicker"} %> What I've tried: <%= f
订阅 bootstrap-select