Блог

Я только что обновил свое приложение с Angular 8 и 12 вместе с bootstrap. Я внес необходимые исправления, но 2 поставил меня в тупик.

Вот как должен выглядеть мой HTML

Вот как это выглядит сейчас после обновления

Вот мой код

HTML

 <div class="row h-100">
    <div class="col-md-12">
        <fieldset class="scheduler-border-fieldset h-100">
            <legend style="font-size: small;">amp;#160;Site Typeamp;#160;</legend>  
            <div class="row">
               .
               .
               .
            </div>
        </p-fieldset>
    </div>  
 </div>
 

CSS

  .scheduler-border-fieldset {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 0.4em 1.4em !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: #333333;
    vertical-align: middle;
}

legend  {
    font-size: medium;
    font-weight: bold;
    background-color: #aeccea;
    vertical-align: middle;
}
 

Версия начальной загрузки до обновления была 4.5.0, После обновления-загрузочная версия v5.1.2

Я не могу понять, как я могу исправить css так, чтобы набор полей границ проходил через легенду, а не граничил с легендой.