0

Alguém sabe como faço para deixar a legenda do formulário abaixo dentro da border line ? Ou seja, gostaria que a legenda ficasse dentro da linha do contorno do form.

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

Atualmente está assim:

Legend

10
  • E como deveria ficar?
    – Woss
    Commented 15/04/2019 às 19:43
  • Então pq não coloca dentro da div?
    – hugocsl
    Commented 15/04/2019 às 19:47
  • Gostaria que ficasse assim: [1]: i.sstatic.net/BEbZQ.jpg Commented 15/04/2019 às 19:48
  • Veja se era isso marcado na duplicada. Se não for eu reabro a pergunta. Abs!
    – Sam
    Commented 15/04/2019 às 19:53
  • @hugocsl Pode colocar todas essas divs dentro de um fieldset? Por ser Bootstrap, agora fiquei na dúvida.
    – Sam
    Commented 15/04/2019 às 20:03

1 Resposta 1

2

O problema é que vc está usando Bootstrap, e por default ele coloca alguns estilos indesejados no fieldset e no legend.

inserir a descrição da imagem aqui
inserir a descrição da imagem aqui
inserir a descrição da imagem aqui

Depois que foi feito um tratamento no CSS para sobrescrever esses estilos do Bootstrap o fieldset e o legend ficaram mais próximo do que seria o parão do user-agent

inserir a descrição da imagem aqui

Segue o código da imagem acima

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>
fieldset {
    border:1px solid #999;
    padding: 10px; /* aqui vc controla a distancia entre os elementos e a borda */
    margin: 15px; /* essa margem é para alinhar o fieldset com o restante do grid */
}
legend {
    display: inline;
    width: auto;
    border: 0;
    padding: 10px;
}
    </style>
</head>

<body>

    <div class="container">
        <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>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

1
  • 1
    Massa rs :)))))
    – Sam
    Commented 16/04/2019 às 20:46

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 .