I cannot decrease the size of components . form-control

Question

Hello,

I’m trying to decrease the size of components that use class. form-control of bootstrap 3 but when I try to set the width of the components to the value "auto" it generates a spacing between the components that I cannot identify by analyzing the HTML code.

That’s the problem I want to solve, decrease the size of the last 3 select’s to "auto"

HTML code from the above interface:

<div flex hide-sm hide-xs>
	<div class="input-group not-printable">
		<div class="input-group-addon" ng-click="search = ''"><span class="glyphicon glyphicon-erase" ng-class="!!search === false ? 'text-color-black' : 'text-color-red'"></span></div>
		<input id="search" name="searchValue.$" type="text" class="form-control"/>
		<!-- <div class="input-group-addon" ng-click="search = ''"><span class="glyphicon glyphicon-erase"></span></div> -->
		<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
		<select class="form-control">
			<option>2019</option>
			<option>2018</option>
			<option>2017</option>
			<option>2016</option>
			<option>2015</option>
		</select>
		<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
		<select class="form-control">
			<option>2019</option>
			<option>2018</option>
			<option>2017</option>
			<option>2016</option>
			<option>2015</option>
		</select>
		<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
		<select class="form-control">
			<option>Tudo</option>
			<option>Função</option>
			<option>Tipo de Sistema</option>
			<option>Sistema</option>
			<option>Veículo</option>
		</select>
	</div>
</div>

But when I try to set width to "auto" it happens to me that:

Select’s are separated by spacing that I cannot identify by analyzing the HTML code.

Interface code above:

<div flex hide-sm hide-xs>
	<div class="input-group not-printable">
		<div class="input-group-addon" ng-click="search = ''"><span class="glyphicon glyphicon-erase" ng-class="!!search === false ? 'text-color-black' : 'text-color-red'"></span></div>
		<input id="search" name="searchValue.$" type="text" class="form-control"/>
		<!-- <div class="input-group-addon" ng-click="search = ''"><span class="glyphicon glyphicon-erase"></span></div> -->
		<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
		<select class="form-control" style="width: auto;">
			<option>2019</option>
			<option>2018</option>
			<option>2017</option>
			<option>2016</option>
			<option>2015</option>
		</select>
		<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
		<select class="form-control" style="width: auto;">
			<option>2019</option>
			<option>2018</option>
			<option>2017</option>
			<option>2016</option>
			<option>2015</option>
		</select>
		<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
		<select class="form-control" style="width: auto;">
			<option>Tudo</option>
			<option>Função</option>
			<option>Tipo de Sistema</option>
			<option>Sistema</option>
			<option>Veículo</option>
		</select>
	</div>
</div>

What is generating this spacing between the components?

PS: I am using Bootstrap 3 and Angularjs.

Answer 1

As you are using Bootstrap 3 one of the options to fix this is putting float:left in the elements of form. But after that you will need to do the responsive treatment to adjust them when the screen is small, if you are going to use that form on mobile screens for example...

Follow the example

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="container">
   <div class="row">
      <div class="col-xs-12">
         <div flex hide-sm hide-xs>
            <div class="input-group not-printable">
               <div class="input-group-addon" ng-click="search = ''"><span class="glyphicon glyphicon-erase" ng-class="!!search === false ? 'text-color-black' : 'text-color-red'"></span></div>
               <input id="search" name="searchValue.$" type="text" class="form-control" style="width: auto; float: left;"/>
               <!-- <div class="input-group-addon" ng-click="search = ''"><span class="glyphicon glyphicon-erase"></span></div> -->
               <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none; float: left;"></span>
               <select class="form-control" style="width: auto; float: left;">
                  <option>2019</option>
                  <option>2018</option>
                  <option>2017</option>
                  <option>2016</option>
                  <option>2015</option>
               </select>
               <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none; float: left;"></span>
               <select class="form-control" style="width: auto; float: left;">
                  <option>2019</option>
                  <option>2018</option>
                  <option>2017</option>
                  <option>2016</option>
                  <option>2015</option>
               </select>
               <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none; float: left;"></span>
               <select class="form-control" style="width: auto; float: left;">
                  <option>Tudo</option>
                  <option>Função</option>
                  <option>Tipo de Sistema</option>
                  <option>Sistema</option>
                  <option>Veículo</option>
               </select>
            </div>
         </div>
      </div>
   </div>
</div>