Encountered an interesting issue here. There is a button designed for selection purposes, similar to a select item. Here's the code snippet:
<button class="btn btn-primary dropdown-toggle" style="width: 166%;"
type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span id="dropdown_button" style="width: 166%;">
<img src="wp-content/themes/directory2/images/closest.png" />
10 Closest Amenities</span>
<span class="caret" style="margin-top: 9px;float: right;"></span>
</button>
To update the text within the button/select using jQuery, this code is used:
$(document).on('click', '.dropdown_anchor', function(event) {
var index = $(this).data('index');
var title = $(this).data('title');
populate_list(index);
dropdownButtonText(title);
});
The function responsible for updating the button text is defined as follows:
function dropdownButtonText(text) {
$("#dropdown_button").text(text);
}
The challenge arises when the button loses its set width after the text change, going from 166% to, say, 87%. How can we ensure that the button maintains its width even after the text change?
Your insights and time are greatly appreciated. Thank you.
An illustrative example can be viewed at:
In the Neighborhood & Nearby Amenities section
Initial State
After Modification