Auto resize select tag element width according to option
Posted By : Priya verma | 28-Sep-2016
Normally the select element tag get its width from the biggest option element. But if you want resize select element tag width resize by selected option value’s .
Html
<select id="resizingSelectTag">
<option>All</option>
<option>Lorem Ipsum</option>
<option>Lorem Ipsum is not simply random text.</option>
</select>
<select id="selectTagWidth">
<option id="widthTempOption"></option>
</select>
#resizingSelectTag {
width: 50px;
}
#selectTagWidth{
display : none;
}
Jquery
$(document).ready(function() {
$('#resizingSelectTag').change(function(){
$("#widthTempOption").html($('#resizingSelectTag option:selected').text());
$(this).width($("#selectTagWidth").width());
});
});
Note: If user select another option, select element width should resize automatically and text is always visible.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Priya verma
Priya is a bright UI designer, having skills in , HTML, CSS, javascript, bootstrap. Her hobbies are playing outdoor games.