How to format select option with bootstrap in an Angular?

Asked

Viewed 744 times

0

Note the image below:

inserir a descrição da imagem aqui

You can see that the field ZIP CODE is quite different from the countryside State and City, I am aware that the field settings ZIP CODE is due to the Angular Primeng features and the State and City field are not inheriting these settings due to different use of tags.

I’ve made several attempts to format the State and City field to look like the ZIP code, could you help me with that? please.

It refers to this code below;

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

It’s these fields that I’m having trouble formatting with CSS and 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>
css bootstrap-3 angular

  • Adding a padding and border in the same color as the zip code is no good?

  • but my problem is not in the ZIP field.

  • Yes, I meant the selects.

  • Is there no bootstrap configuration you can do that? because if I’m going to put a padding and a border will not look the same as the zip code, because adding the settings in the hand will not look the same, at least if I do, because I have little experience with CSS

  • If you padde and change the border color it looks exactly the same.

  • I’ll make my attempt, if I can’t I’ll post here my attempt.

Show 1 more comment

2 answers

1

Adjust the styles of selects via CSS, in this way:

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

Thus the selects shall be equal to input zip code.

1


You can add the class form-control in your 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>

Browser other questions tagged css bootstrap-3 angular

You are not signed in. Login or sign up in order to post.