Fieldset and Legend with bootstrap

Question

Fieldset and Legend with bootstrap

Asked 5 years, 7 months ago

Viewed 999 times

0

I have a div that after placing a fieldset and a Legend, it has decreased in size.

I need you to stay like this:

::ng-deep .dx-datagrid-headers .dx-datagrid-content {
  margin-bottom: -1px;
  background-color: #337ab7;
  color: aliceblue;
  font-size: medium;
  font-weight: 500;
}

::ng-deep .dx-datagrid-headers .dx-datagrid-table .dx-row>td {
  border-bottom: 1px solid #337ab7;
}

::ng-deep .dx-datagrid-pager {
  border-top: 1px double #ddd;
}

.second-group {
  background-color: rgba(191, 191, 191, 0.15);
  padding: 20px;
}

fieldset {
  border: 1px solid #999;
  padding: 10px;
  /* controla a distancia entre os elementos e a borda */
  margin: 15px;
  /* margem para alinhar o fieldset com o restante do grid */
}

legend {
  display: inline;
  width: auto;
  border: 0;
  padding: 10px;
}

And my HTML:

<div class="row">
  <div class="card col-12 padd-left0 padd-right0">
    <div class="card">
      <div class="card-block" style="display: inline;">
        <form novalidate (ngSubmit)="adicionarSolicitacaoPagamento()" [formGroup]="conciliacaoBancariaForm">

          <br />

          <div class="row second-group">

            <!-- <fieldset>
              <legend> Filtro por data</legend> -->

            <div class="col-md-3">
              <div class="form-group">
                <label>Conta Corrente </label>
                <dx-select-box placeholder="Selecione Conta..." [items]="contasCorrente" displayExpr="descricao" valueExpr="id" [searchEnabled]="true" formControlName="contaCorrenteId">
                </dx-select-box>
                <span class="text-danger" *ngIf="displayMessage.contaCorrenteId">
                    <p [innerHTML]="displayMessage.contaCorrenteId"></p>
                  </span>
              </div>
            </div>

            <div class="col-md-3">
              <div class="form-group">
                <label class="control-label" for="dataEmissaoInicial">Data Emissão Inicial</label>
                <dx-date-box type="date" width="100%" displayFormat="dd/MM/yyyy" formControlName="dataEmissaoInicial" (onValueChanged)="definirValor($event)"></dx-date-box>
                <span class="text-danger" *ngIf="displayMessage.dataEmissaoInicial">
                    <p [innerHTML]="displayMessage.dataEmissaoInicial"></p>
                  </span>
              </div>
            </div>

            <div class="col-md-3">
              <div class="form-group">
                <label class="control-label" for="dataEmissaoFinal">Data Emissão Final</label>
                <dx-date-box [min]="minDate" [max]="maxDate" type="date" width="100%" displayFormat="dd/MM/yyyy" formControlName="dataEmissaoFinal" (onValueChanged)="definirValor($event)"></dx-date-box>
                <span class="text-danger" *ngIf="displayMessage.dataEmissaoFinal">
                    <p [innerHTML]="displayMessage.dataEmissaoFinal"></p>
                  </span>
              </div>
            </div>

            <div class="col-md-3">
              <button type="button" style="margin-top: 27px" class="btn btn-block btn-success" (click)="filtrarConciliacao()">
                  <i class="fa fa-refresh"></i> Filtrar </button>
            </div>
            <!-- </fieldset> -->
          </div>

          <br />

Guy here looks like this http://prntscr.com/ncoru9 There must be some other CSS there that is interfering with the fieldset. You really use Bootstrap 3 right? Or is using 4?

– hugocsl

2019/04/16 at 12:27
Sorry Hugo, I’m using the 4.

– Lucas Latorre

2019/04/16 at 12:35

1 answer

Browser other questions tagged html css twitter-bootstrap

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

by André Lins • **1,518** points · Answer 1 · 2019-04-16T12:24:30+00:00

Place the fieldset with the width 100%, and put it above the divwith class row, as below:

fieldset {
  border: 1px solid #999;
  padding: 10px;
  /* controla a distancia entre os elementos e a borda */
  margin: 15px;
  width: 100%;
  /* margem para alinhar o fieldset com o restante do grid */
}

<div class="row">
    <div class="card col-12 padd-left0 padd-right0">
        <div class="card">
            <div class="card-block" style="display: inline;">
                <form novalidate (ngSubmit)="adicionarSolicitacaoPagamento()" [formGroup]="conciliacaoBancariaForm">

                    <br />

                    <fieldset>
                        <legend> Filtro por data</legend> -->
                        <div class="row second-group">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Conta Corrente </label>
                                    <dx-select-box placeholder="Selecione Conta..." [items]="contasCorrente" displayExpr="descricao" valueExpr="id" [searchEnabled]="true" formControlName="contaCorrenteId">
                                    </dx-select-box>
                                    <span class="text-danger" *ngIf="displayMessage.contaCorrenteId">
                    <p [innerHTML]="displayMessage.contaCorrenteId"></p>
                  </span>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label" for="dataEmissaoInicial">Data Emissão Inicial</label>
                                    <dx-date-box type="date" width="100%" displayFormat="dd/MM/yyyy" formControlName="dataEmissaoInicial" (onValueChanged)="definirValor($event)"></dx-date-box>
                                    <span class="text-danger" *ngIf="displayMessage.dataEmissaoInicial">
                    <p [innerHTML]="displayMessage.dataEmissaoInicial"></p>
                  </span>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label" for="dataEmissaoFinal">Data Emissão Final</label>
                                    <dx-date-box [min]="minDate" [max]="maxDate" type="date" width="100%" displayFormat="dd/MM/yyyy" formControlName="dataEmissaoFinal" (onValueChanged)="definirValor($event)"></dx-date-box>
                                    <span class="text-danger" *ngIf="displayMessage.dataEmissaoFinal">
                    <p [innerHTML]="displayMessage.dataEmissaoFinal"></p>
                  </span>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <button type="button" style="margin-top: 27px" class="btn btn-block btn-success" (click)="filtrarConciliacao()">
                                    <i class="fa fa-refresh"></i> Filtrar </button>
                            </div>
                        </div>
                    </fieldset>

                    <br />