I incorporate the PrimeNG AutoComplete feature within a PrimeNG Dialog, displaying a list of elements below the AutoComplete in the dialog.
My objectives are:
To set the
max-heightof themodal dialogto 300, and have a visible scrollbar if the total height of added elements exceeds this value.When there are no elements in the list, ensure that the suggestion list of the
AutoCompleteappears over the dialog.
Despite setting the overflow property of the modal, the AutoComplete suggestion list displays inside the modal. Is it possible to achieve both functionalities? Additionally, I would like to show a scrollbar when there are 10 total elements in the modal. Any suggestions?
Here is the CSS style used:
body .ui-dialog {
overflow-y: auto !important;
max-height: 300px;
}
body.ui-autocomplete-panel{
position: relative;
z-index: 9998!important;
}