Skip to content

Instantly share code, notes, and snippets.

@Rameshv

Rameshv/multi_select_issue.html

Created December 5, 2013 10:09
Show Gist options
  • Save Rameshv/7802992 to your computer and use it in GitHub Desktop.
Save Rameshv/7802992 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
multi_select_issue.html
<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="ThemeFuse">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Metro Vibes | Forms</title>
<!-- main JS libs -->
<script src="js/libs/modernizr.min.js"></script>
<script src="js/libs/jquery-1.10.0.js"></script>
<script src="js/libs/jquery-ui.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<!-- Style CSS-->
<link href="css/bootstrap.css" media="screen" rel="stylesheet">
<link href="style.css" media="screen" rel="stylesheet">
<!-- scripts -->
<script src="js/general.js"></script>
<!-- styled select -->
<link rel="stylesheet" href="css/cusel.css">
<script src="js/cusel-min.js"></script>
<!-- custom input -->
<script src="js/jquery.customInput.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- Placeholders -->
<script type="text/javascript" src="js/jquery.powerful-placeholder.min.js"></script>
<!-- datepicker -->
<link href="css/jquery-ui-1.8.20.custom.css" rel="stylesheet">
<!-- Multiselect -->
<link rel="stylesheet" href="css/chosen.css">
<script src="js/jquery.chosen.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function($) {
//$('select').chosen()
/* $('#publish-modal').on('shown.bs.modal',function() {
$('select',this).chosen({width:'100%'})
}).modal('show')*/
$('#publish-modal').modal('show').on('shown.bs.modal',function() {
$('select',this).chosen({width:'100%'})
})
});
</script>
<body>
<div id="publish-modal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width: 700px;height: 500px">
<div class="modal-content line-top">
<div class="modal-body">
<div class="centre-panel">
<div class="centre-left-panel">
<form>
<div class="field_select" >
<label for="platform_name" class="label_title">Publish Book On</label>
<select id="platform_name" multiple data-placeholder="Choose from list">
<option value='Google Play'>Google Play</option>
<option value='iOS App'>iOS App</option>
</select>
</div>
<div class="field_text omega" >
<label for="name" class="label_title">Book Title</label>
<input type="text" name="name" id="name" value="" class="inputtext input_middle required"/>
</div>
<div class="clear"></div>
<div class="field_text" >
<label for="name" class="label_title">Author</label>
<input type="text" name="name" id="name" value="" class="inputtext input_middle required"/>
</div>
<div class="field_select omega" >
<label for="contact_subject" class="label_title">Language</label>
<select class="select_styled" id="contact_subject">
<option value="">Select Language</option>
<option value="Feedback">Feedback</option>
<option value="Support Question">Support Question</option>
<option value="Website Question">Website Question</option>
<option value="Other Question or Comment">Other Question or Comment</option>
</select>
</div>
<div class="clear"></div>
<div class="field_select" >
<label for="subject" class="label_title">Subject</label>
<select id="subject" multiple data-placeholder="Choose from list">
<option value='Pre-KG'>Pre-KG</option>
<option value='Nursery'>Nursery</option>
<option value='Standard 1 to 3'>Standard 1 to 3</option>
</select>
</div>
<div class="field_text omega" >
<label for="name" class="label_title">Test</label>
<input type="text" id="name" value="" class="inputtext input_middle required"/>
</div>
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
@arlad
Copy link

arlad commented Dec 6, 2013

Hello, thank You for Your feedback.

Yes, this is a small bug with .field_select
Just give position:relative to .field_select in your style.css and the 'chosen' dropdowns will appear under its respective inputs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment