0

Observe a imagem abaixo:

inserir a descrição da imagem aqui

Vocês podem perceber que o campo CEP está bem diferente do campo Estado e Cidade, estou ciente que as configurações do campo CEP é devido as recursos do PrimeNg do Angular e o campo Estado e Cidade não estão herdando essas configuração devido a uso diferentes de tags.

Eu já fiz várias tentativas para formatar o campo Estado e Cidade para ficar igual ao compo CEP, será que você poderiam me ajudar em relação a isso? por favor.

É referente a esse código abaixo;

<div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
        <label>CEP</label>
        <p-inputMask  mask="99999-999" type="text" name="cep" ngModel #cep="ngModel" required></p-inputMask>
        <app-message [control]="cep" error="required"
        text="Informe um cep"></app-message>
      </div>

      <div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
        <label>Cidade</label>
          <div>
              <select  name="estado" id="estado" [(ngModel)]="uf" (change)="buscarCidades()">
                      <option *ngFor="let estado of estados" [value]="estado.codigo">{{estado.nome}}</option>
                </select>
          </div>
      </div>

      <div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
        <label>Estado</label>
        <div>
                <select name="cidade" id="cidade">
                              <option *ngFor="let cidade of cidades" [value]="cidade.codigoEstado">{{cidade.nome}}</option>
                </select>
        </div>
      </div>

É esse campos que estou tendo dificuldade de formatar com CSS e Bootstrap:

  <div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
    <label>Cidade</label>
      <div>
          <select  name="estado" id="estado" [(ngModel)]="uf" (change)="buscarCidades()">
                  <option *ngFor="let estado of estados" [value]="estado.codigo">{{estado.nome}}</option>
            </select>
      </div>
  </div>

  <div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
    <label>Estado</label>
    <div>
            <select name="cidade" id="cidade">
                          <option *ngFor="let cidade of cidades" [value]="cidade.codigoEstado">{{cidade.nome}}</option>
            </select>
    </div>
  </div>
6
  • Adicionando um padding e um border na mesma cor do CEP não adianta?
    – Meu ovo
    7/02/2018 às 12:16
  • mas meu problema não é no campo CEP.
    – user10264
    7/02/2018 às 12:22
  • Sim, me referi aos selects.
    – Meu ovo
    7/02/2018 às 12:23
  • será que não existe alguma configuração do bootstrap que possa fazer issso? porque se eu for colocar o um padding e um border não vai ficar a mesma coisa que o CEP, pois ao adicionar na mão as configuração não vai ficar a mesma coisa, pelo menos se eu fizer, pois tenho pouca experiência com CSS
    – user10264
    7/02/2018 às 12:35
  • Se colocar padding e mudar a cor da borda fica igualzinho.
    – Meu ovo
    7/02/2018 às 12:39

2 Respostas 2

0

Você pode adicionar a classe form-control nos seus selects

<div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
  <label>Cidade</label>
  <div>
    <select class="form-control" name="estado" id="estado" [(ngModel)]="uf" (change)="buscarCidades()">
      <option *ngFor="let estado of estados" [value]="estado.codigo">{{estado.nome}}</option>
    </select>
  </div>
</div>
<div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
  <label>Estado</label>
  <div>
    <select class="form-control" name="cidade" id="cidade">
      <option *ngFor="let cidade of cidades" [value]="cidade.codigoEstado">{{cidade.nome}}</option>
    </select>
  </div>
</div>
0

Ajuste os estilos dos selects via CSS, desta forma:

<style>
#estado, #cidade{
    padding: 5px; /* ajuste este valor até que fique como deseja */
    border-color: #d6d6d6;
    border-radius: 2px;
}
</style>

Desta forma os selects deverão ficar iguais ao input do CEP.

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