Rameshv/multi_select_issue.html

## 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>
	<!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>