I want the select element to have the default option value's width which is shorter. When the user selects another option, the select element should resize itself so the whole text is always visible in the element.
I have found this solution http://ift.tt/1Apk6rK here but it doesn't work with bootsrap, I d'ont know why.
$(document).ready(function() {
$('select').change(function(){
$("#width_tmp").html($('select option:selected').text());
$(this).width($("#width_tmp").width()+30); // 30 : the size of the down arrow of the select box
});
});
<head>
<script src="http://ift.tt/1oMJErh"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<link href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://ift.tt/1J4cr1i">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
.btn-select {
color: #333;
background-color: #f5f5f5;
border-color: #ccc;
padding:7px;
}
select {
width: 60px;
}
#width_tmp{
display : none;
}
</style>
</head>
<body>
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<select class="btn btn-select align-left">
<option>All</option>
<option>Longer</option>
<option>A very very long string...</option>
</select>
<span id="width_tmp"></span>
</span>
<input type="text" class="form-control" placeholder="Search by...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire