css Issue after upgrade to Angular 12 from 8

I have just upgraded my application from Angular 8 and 12 along with bootstrap. I … Read more css Issue after upgrade to Angular 12 from 8

I have just upgraded my application from Angular 8 and 12 along with bootstrap. I made the required fixes but 2 has me stumped.

This is how my HTML is suppose to look

enter image description here

This is how it looks now after upgrade

enter image description here

Here is my code

HTML

<div class="row h-100">
    <div class="col-md-12">
        <fieldset class="scheduler-border-fieldset h-100">
            <legend style="font-size: small;"> Site Type </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;
}

Bootstrap version before upgrade was 4.5.0 After upgrade is Bootstrap v5.1.2

I cannot figure how i can fix the css so that the border fieldset runs through the legend and not bordering the legend.

Source: CSS – Stack Overflow


Categories: NewsTags: , ,

Tags: , ,


Leave a Reply

Your email address will not be published. Required fields are marked *