How to format the select option with bootstrap in an angle?

Question

How to format the select option with bootstrap in an angle?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Look at the image below:

YoumaynoticethatthezipfieldisverydifferentfromtheStateandCityfield,CEPisduetoAngularPrimeNgfeaturesandtheStateandCityfieldarenotinheritingthesesettingsduetotheuseoftags.

I'vealreadymadeseveralattemptstoformattheStateandCityfieldtostaythesameasthezipcode,couldyouhelpmeinthisregard?please.

Itreferstothiscodebelow;

<divclass="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 difficulty 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

asked by anonymous 07.02.2018 / 13:05

2 answers

1

Adjust the styles of selects via CSS, like this:

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

In this way the selects should be equal to input of the zip code.

07.02.2018 / 14:33

Update table so that a field has a unique value How to manage threads in C #?

score 1 · Accepted Answer

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