Legend in form-group bootstrap

Asked

Viewed 183 times

0

Does anyone know how to leave the form caption below within the border line ? That is, I would like the legend to be within the outline line of the 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>

Currently it is like this:

Legend

html css twitter-bootstrap

  • And how it should look?

  • So why don’t you put it inside the div?

  • I would like it to look like this: [1]: https://i.stack.Imgur.com/Bebzq.jpg

  • See if this was marked on the duplicate. If it’s not I reopen the question. Abs!

  • @hugocsl Can you put all these Ivs inside a fieldset? Because it’s Bootstrap, now I’m in doubt.

  • At least in the doc do Bootstrap appears.

  • by kindness the fieldset is inside or outside the div? Because it didn’t work.

  • I put the Divs inside the fieldset and before the first div I put the <Legend>. Still it didn’t work. The legend was out.

  • @maverick_ understood its problem, in fact it is that Bootstrap itself "deconstructs" these elements by changing the CSS that would be standard... I left the details in the reply.

  • @Sam as he is using Bootstrap 3 has no problem, because the Grid is based on Floats, if it was in Bootstrap 4 could have problems, because Row is a Flex container and Col would need to be a direct child. In this case I tested the responsiveness and even inside the Fieldset works well, in BS4 would probably not work...

Show 5 more comments

1 answer

2

The problem is that you are using Bootstrap, and by default it puts some unwanted styles on fieldset and in the legend.

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

After a CSS treatment has been done to overwrite these Bootstrap styles fieldset and the legend were closer than would be the moron of the user-agent

inserir a descrição da imagem aqui

Follow the image code above

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

    Massa rs :)))))

Browser other questions tagged html css twitter-bootstrap

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