Awarious OfficePortal - HRMS Application

bootstrap input-group-addon not displaying same width

0 votes
asked Aug 2, 2014 in bootstrap by anonymous

I am using twitter bootstrap input-group with input-group-addon to display some font awesome icons. I have text area and a multiselect dropdown control with input-group-addon span for each. But the span is displayed with different width. Both are not aligned at the edges. Below is the sample code from my webpage. How could I change the width?

<div class="input-group">
    <span class="input-group-addon fa fa-comments"></span>
        <textarea id="description" name="description" placeholder="Widget description has limit of 512 characters" rows="6" class="form-control" spellcheck="1">Description</textarea>
        <div id="charlimit" style="float: right; display: none;">Widget description (<span id="maxlength">5</span> characters left)</div>

<div class="input-group">
    <span class="input-group-addon fa fa-location-arrow"></span>
    <select id="availablePositions" class="multiselect form-control" name="positions[]" multiple="multiple" data-validation="required" data-validation-error-msg="Position required" style="display: none;">
        <option value="1">Full width - Top of page</option>
        <option value="2">Full width - Below navigation</option>
        <option value="3">Full width - Below content</option>

bootstrap input-group-addon not displaying same width


1 Answer

0 votes
answered Aug 2, 2014 by Aadhira (1,215 points)
selected Aug 2, 2014 by administrator
Best answer

You can fix this issue by overriding the input-group-addon class to set the min-width property.
Copy this below css to your css file and try now.

.input-group-addon {
    min-width:50px;// Set whatever the width you want

Your answer


Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
site design / logo / content © 2013 - 2019