Edge doesn’t cover everything

Question

My edge doesn’t cover everything as it would like, how could it make the edge go up before the end of the Limite ?

Meu css:

.conteudo
{
padding: 20px;
}

fieldset
{
border: 1px solid #000;
padding: 20px;
height: 200px;
}

  <div class="conteudo">
       <fieldset>
         <legend>Limite</legend>
       </fieldset>
  </div>

What happens:

Whole code:

@using SoftluxWebCore.ViewModels.Tabelas.Financeiro
<!-- Link to CSS -->
<link href="~/css/Tabelas/Financeiro/FormaPagamento.css" rel="stylesheet" />

@using (Html.BeginForm())
{

using (Html.DevExtreme().ValidationGroup())
{
    @Html.AntiForgeryToken()
    <div class="divFormulario">
        @(Html.DevExtreme().Form<FormaPagamentoViewModel>()
                                                                .ID("formularioCadastro")
                                                                .ShowValidationSummary(false)
                                                                .Items(items =>
                                                                {
                                                                    items.AddGroup()
                                                                    .Items(groupItems =>
                                                                    {
                                                                        groupItems.AddSimpleFor(m => m.Fpg_descricao)
                                                                        .Editor(e => e.TextBox().Width("350px"));
                                                                        groupItems.AddSimpleFor(m => m.Fpg_quantidade)
                                                                        .Editor(e => e.NumberBox().Width("70px").OnKeyPress("key_press"));
                                                                        groupItems.AddSimpleFor(m => m.Fpg_LimiteDesconto)
                                                                        .Editor(e => e.NumberBox());
                                                                        groupItems.AddSimpleFor(m => m.Fpg_acrescimo)
                                                                        .Editor(e => e.NumberBox());
                                                                        groupItems.AddSimpleFor(m => m.Fpg_desconto)
                                                                        .Editor(e => e.NumberBox());
                                                                    });
                                                                    items.AddSimpleFor(m => m.Fpg_situacao)
                                                                        .Label(l => l.Visible(false))
                                                                        .Editor(editor => editor.CheckBox().ID("sit").Text("Ativo"));
                                                                    items.AddSimpleFor(m => m.Fpg_orcamento).CssClass("orc")
                                                                        .Label(l => l.Visible(false))
                                                                        .Editor(editor => editor.CheckBox().ID("orc").Text("Padrão para Orçamento"));
                                                                })
                                                                .FormData(Model)
        )

    </div>
    <div class="conteudo">
        <fieldset>
            <legend>Limite</legend>
        </fieldset>
    </div>


    <br />

    <button type="submit" class="btn btn-success btn-sucesso"><i class="far fa-check-circle"></i> Gravar</button>
    <button type="reset" class="btn btn-danger btn-cancelar" onclick="parent.fecharJanela('CadastroFormaPagamento')"><i class="far fa-times-circle"></i> Cancelar</button>

    <script type="text/javascript">
        function key_press(e) {
            var event = e.event,
                str = event.key || String.fromCharCode(event.which);

            if (/^[\.\,e]$/.test(str))
                event.preventDefault();
        }

    </script>
}
}

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

Code for creating modal:

function geradorCodigo(idjanela, titulojanela, urljanela, largura, altura, aoFechar) {

    document.getElementById("geradorCodigos").innerHTML = "<div id='" + idjanela + "'></div>";
    var janela = $("#" + idjanela).kendoWindow({
        width: largura,
        height: altura,
        title: titulojanela,
        iframe: true,
        modal: true,
        close: aoFechar,
        content: ".." + urljanela,
    }).data("kendoWindow").open();

    janela.center();

}

Answer 1

Your problem is that somewhere in your CSS or Framework you are using there are properties in legend that should not!

I believe inside the tag legend vc may have put some other tag, or some class of the CSS Framework you are using. Or put some sort of title element h3 or within the legend and that h3 already had some CSS property in it.

For some reason your legend must be with width of 100%

See that this way I simulated exactly the "mistake" that yours textfield presented...

Code of the image above:

.conteudo
{
padding: 20px;
}

fieldset
{
border: 1px solid #000;
padding: 20px;
height: 50px;
}

legend {
  width: 100%;
}

  <div class="conteudo">
       <fieldset>
         <legend>Limite (legend com width de 100%)</legend>
       </fieldset>
  </div>

<div class="conteudo">
       <fieldset>
         <legend style="width: initial;">Limite (legend com width de initial)</legend>
       </fieldset>
  </div>