This issue can be found in Primeng18 official web link demo

the overlay is not directly under the button but under right bottom, and left a blank on the top

I have tried to give it a 'appendTo' to 'body' or itemitself or a fixed static element, neither of them work properly in all screen settings.

The basic requirement is like this, and for any cases, the overlay list should match the buttom of the target button, instead changed the whole layout and display in such a corner place... normal overlay

can any one know if there is a fix or some side work can fix this problem.

This issue can be found in Primeng18 official web link demo

the overlay is not directly under the button but under right bottom, and left a blank on the top

I have tried to give it a 'appendTo' to 'body' or itemitself or a fixed static element, neither of them work properly in all screen settings.

The basic requirement is like this, and for any cases, the overlay list should match the buttom of the target button, instead changed the whole layout and display in such a corner place... normal overlay

can any one know if there is a fix or some side work can fix this problem.

• primeng

1 Answer 1

by checking the source code, there is a breakpoint action of for the tieredmenu causing this issue since splitebutton using it as the overlay.

To follow the issue: https://github/primefaces/primeng/issues/17750

The root cause is in tieredmenu, the small size style (mobile style) is changing the overlay container position from absolute to relative.
when screen width is large than breakpoint, the container style is .p-tieredmenu-overlay {position: absolute;}
then width is smaller than the breakpoint .p-tieredmenu-mobile {position: relative;} will be added and take the priority.

The current solution could be:

• add below style to your theme or global style, then it won't be overwritten to relative

  .p-tieredmenu.p-tieredmenu-overlay{
       position: absolute;
  }
  

• If you want to have the control of the 'breakpoint', the source code change of splitbutton could be: code change