I did it on another website with the Scarlett template. In the templates the override default_form.php had to be changed from $item->input to $item->renderfield(). Then I have adopted the CSS div.modal into the custom-css.
div.modal {
position: fixed;
top: 5%;
left: 50%;
z-index: 1050;
width: 80%;
margin-left: -40%;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
-moz-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
box-shadow: 0 3px 7px rgba(0,0,0,0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
}
With the elvira template I don't find the error in the CSS. The "z-index" is here not work.
Link to the website with elvira-template: https://it-conserv.de/kontakt.html
link to the website with scarlett-template: https://demo.moorschreber.de/index.php/kontakt
Can you find the problem?
The field is the new field in the joomla-core with version 3.9
