1

Minha borda não cobre tudo como gostaria, como podia fazer com que a borda vá ate antes de acabar o Limite ?

Meu css:

.conteudo
{
padding: 20px;
}

fieldset
{
border: 1px solid #000;
padding: 20px;
height: 200px;
}
  <div class="conteudo">
       <fieldset>
         <legend>Limite</legend>
       </fieldset>
  </div>
O que acontece:

inserir a descrição da imagem aqui

Código todo:

@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"); }
}

Código de criação do 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();

}
7
  • Não consegui reproduzir seu erro da imagem. Inclusive editei seu post add o snippet e o mesmo atendeu, qual browser esta testando? pode ser necessário adicionar algum webkit Commented 13/02/2019 às 16:27
  • Utilizo o google chrome, não sei o que é webkit Commented 13/02/2019 às 16:28
  • Mas trabalho com janelas, será que pode ser isso? Commented 13/02/2019 às 16:28
  • Eu reproduzi seu código, ele está correto, veja aqui jsfiddle.net/gferreiraa/pu2yos41 Commented 13/02/2019 às 16:30
  • é possível compartilhar este código da modal todo? Commented 13/02/2019 às 16:35

1 Resposta 1

3

Seu problema é que em algum lugar do seu CSS ou do Framework que vc está usando existem propriedades na legend que não deveriam!

Acredito que dentro da tag legend vc pode ter colocado alguma outra tag, ou alguma classe do Framework CSS que está usando. Ou colocou algum elemento de titulo tipo h3 ou dentro da legend e esse h3 já tinha alguma propriedade CSS nele.

Por algum motivo a sua legend deve estar com width de 100%

Veja que desse forma eu simulei exatamente o "erro" que o seu textfield apresentou...

inserir a descrição da imagem aqui

Código da imagem acima:

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

6
  • Sim, o legend recebe width de 100%, já tive um problema com isso q cobria outro objeto, mas não sabia que era por causa disso que a borda n pegava, muito obrigado pela resposta Commented 14/02/2019 às 12:14
  • E não era css, ele já vem definido por padrão creio eu Commented 14/02/2019 às 12:15
  • A legend não eh 100% por padrão não ... Em algum lugar tem algum css colocando esse elemento com width de 100%... Tente inspecionar o elemento ai para ver de onde vem a propriedade
    – hugocsl
    Commented 14/02/2019 às 12:18
  • Não tem como enviar imagem aqui, mas creio eu que vem do bootstrap então, localhost:5000/lib/bootstrap/scss/_reboot.scss, isso que me aparece quando inspeciono e com width: 100% Commented 14/02/2019 às 12:24
  • 1
    Ah sim, muito obrigado pela ajuda @hugocsl Commented 14/02/2019 às 13:24

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 .