Layout gets messy with contact form

delinea

On any page where I have the contact form present, which is a third-party module, that disorganizes the header, for example you can see that the current date of the portal is floating.

the example occurs here because the contact form is present here: https://infoqom.com.ar/index.php/nosotros

Ninja

delinea
Hi
The issue is coming from this code
components/com_baforms/assets/css/ba-style.css

.calendar {
    animation: calendar-open .6s cubic-bezier(.25,.98,.26,.99) both;
    -webkit-animation: calendar-open .6s cubic-bezier(.25,.98,.26,.99) both;
    background: transparent !important;
    border: 1px solid transparent !important;
    left: 50% !important;
    position: fixed !important;
    top:5% !important;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 426px !important;
}

Replace it with

.calendar {
    animation: calendar-open .6s cubic-bezier(.25,.98,.26,.99) both;
    -webkit-animation: calendar-open .6s cubic-bezier(.25,.98,.26,.99) both;
    background: transparent ;
    border: 1px solid transparent;
    left: 50% ;
    position: fixed ;
    top:5%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 426px;
}

now add this code in custom.css

.header-right .calendar {
   top: inherit;
    left: inherit;
    position: inherit;
    transform: translateX(0%);
    -webkit-transform: none;
    animation: none;
}

delinea

Hello Pankaj, it does NOT work.
I guess I did both changes correctly, but only the problem was moved.
In any case, I can tell you that I found no variation between what was in the form file and what you gave me to change.

Ninja

delinea
Hi
Kindly remove the! Important from code. I edited the code in last reply.
Let me know if it remain same.

Regards

delinea

Excellent! thank you very much genius!