admin管理员组文章数量:1320587
Is there a known reason why dropdown would not work inside a modal? I am using rails 4 and the dropdown works perfectly fine all over the app except for the modal. Here is how it is rendered
I suspect this might be an issue with javascript, I have tried changing the order of including javascripts in my application.js but nothing would work. Here is my application.js:
//= require bootstrap
//= require jquery/jquery-2.1.1.js
//= require jquery_ujs
//= require turbolinks
//= require cloudinary
//= require jquery.turbolinks
//= require slimscroll/jquery.slimscroll.min.js
//= require bootstrap-sprockets
Has anyone ran into this before? is there a fix for this? I tried searching all over but couldn't find any relevant solution
EDIT: The modal code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
`enter code here`<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Group</h4>
</div>
<div class="modal-body">
<div class="form-group"><label>Class name</label> <input type="name" placeholder="Choose a name for your group" class="form-control"></div>
<div class="form-group"><label>Class name</label> <input type="desc" placeholder="Add a description for your group" class="form-control"></div>
<div class="form-group">
<label class="font-noraml">Select</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="chosen-select" style="width:350px;" tabindex="2">
<option value="">Select</option>
<option value="Prekindergarten">Prekindergarten</option>
<option value="Kindergarten">Kindergarten</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
<option value="Higher Education">Higher Education</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Thanks
Is there a known reason why dropdown would not work inside a modal? I am using rails 4 and the dropdown works perfectly fine all over the app except for the modal. Here is how it is rendered
I suspect this might be an issue with javascript, I have tried changing the order of including javascripts in my application.js but nothing would work. Here is my application.js:
//= require bootstrap
//= require jquery/jquery-2.1.1.js
//= require jquery_ujs
//= require turbolinks
//= require cloudinary
//= require jquery.turbolinks
//= require slimscroll/jquery.slimscroll.min.js
//= require bootstrap-sprockets
Has anyone ran into this before? is there a fix for this? I tried searching all over but couldn't find any relevant solution
EDIT: The modal code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
`enter code here`<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Group</h4>
</div>
<div class="modal-body">
<div class="form-group"><label>Class name</label> <input type="name" placeholder="Choose a name for your group" class="form-control"></div>
<div class="form-group"><label>Class name</label> <input type="desc" placeholder="Add a description for your group" class="form-control"></div>
<div class="form-group">
<label class="font-noraml">Select</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="chosen-select" style="width:350px;" tabindex="2">
<option value="">Select</option>
<option value="Prekindergarten">Prekindergarten</option>
<option value="Kindergarten">Kindergarten</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
<option value="Higher Education">Higher Education</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Thanks
Share Improve this question edited Apr 29, 2015 at 22:56 Rami Hussein asked Apr 29, 2015 at 22:31 Rami HusseinRami Hussein 571 gold badge2 silver badges9 bronze badges 1- could you show us the modal code? – dobleUber Commented Apr 29, 2015 at 22:38
2 Answers
Reset to default 3I assume you use the jQuery.Chosen plugin. Here's the code:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
console.debug('modal shown!');
$('.chosen-select', this).chosen({width: "350px"});
});
$("#myModal").modal('show');
});
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare./ajax/libs/chosen/1.4.2/chosen.jquery.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/chosen/1.4.2/chosen.min.css">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Add Group
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>
Class name
</label>
<input type="name" placeholder="Choose a name for your group" class="form-control">
</div>
<div class="form-group">
<label>
Description
</label>
<input type="desc" placeholder="Add a description for your group" class="form-control">
</div>
<div class="form-group">
<label class="font-noraml">
Select
</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="form-control chosen-select" style="width:350px;" tabindex="2">
<option value="">
</option>
<option value="Prekindergarten">
Prekindergarten
</option>
<option value="Kindergarten">
Kindergarten
</option>
<option value="1st">
1st
</option>
<option value="2nd">
2nd
</option>
<option value="3rd">
3rd
</option>
<option value="4th">
4th
</option>
<option value="5th">
5th
</option>
<option value="6th">
6th
</option>
<option value="7th">
7th
</option>
<option value="8th">
8th
</option>
<option value="9th">
9th
</option>
<option value="10th">
10th
</option>
<option value="11th">
11th
</option>
<option value="12th">
12th
</option>
<option value="Higher Education">
Higher Education
</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Add Group
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>
Class name
</label>
<input type="name" placeholder="Choose a name for your group" class="form-control">
</div>
<div class="form-group">
<label>
Description
</label>
<input type="desc" placeholder="Add a description for your group" class="form-control">
</div>
<div class="form-group">
<label class="font-noraml">
Select
</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="form-control chosen-select" style="width:350px;" tabindex="2">
<option value="">
</option>
<option value="Prekindergarten">
Prekindergarten
</option>
<option value="Kindergarten">
Kindergarten
</option>
<option value="1st">
1st
</option>
<option value="2nd">
2nd
</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
Reference: chosen with bootstrap 3 not working properly
your code works in my modal I assume there is something wrong with styles, not with JS check styles
本文标签: javascriptBootstrap dropdown doesn39t work inside modalStack Overflow
版权声明:本文标题:javascript - Bootstrap dropdown doesn't work inside modal - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742086413a2420006.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论