2

Olá,

Eu estou tentando diminuir o tamanho de componentes que usam a classe .form-control do bootstrap 3 mas quando tento setar o width dos componentes para o valor "auto" ele gera uns espaçamentos entre os componentes que eu não consigo identificar analisando o código HTML.

Esse é o problema que eu quero resolver, diminuir o tamanho dos últimos 3 select's para "auto"

Esse é o problema que eu quero resolver, diminuir o tamanho dos últimos 3 select's para "auto"

Código HTML da interface acima:

<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>

Mas quando tento setar o width para "auto" me acontece isso:

Os select's ficam separados por espaçamento que eu não consigo identificar analisando o código HTML.

Os select's ficam separados por espaçamento que eu não consigo identificar analisando o código HTML.

Código da interface acima:

<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>

O que está gerando esse espaçamento entre os componentes?

PS: Estou usando Bootstrap 3 e AngularJS.

1 Resposta 1

2

Como vc está usando Bootstrap 3 uma das opções para corrigir isso é colocando float:left nos elementos do form. Mas depois disso vc vai precisar fazer o tratamento responsivo para ajusta-los quando a tela for pequena, se é que vc vai usar esse form em telas mobile por exemplo...

Segue o exemplo

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .