multiselect menu moves when i open the console

Question

I have a p-multiselect component from primeNg inside a div,at first the menu, when expanded, was being cut by the accordion. We solved the problem using appendTo="body" in the element. Now the values are shown correctly, the problem is that when i open the console or when i use a mobile device to open the web app the menu from the component moves to the right/left, but if i remove the appendTo this problem disappear. We tryed with z-index properties as alternative to appendTo but didn't work. How can i solve this? We are using Angular 8.

EDIT: the first image is when the console is close, the second one is when the console is open (if you read above i wrote the exact opposite case, this is because at first we tried to solve this aligning the left margin, in these picture we are not aligning the margin). Below i added the html code we used.

Answer 1

Try this one, I'm also facing this issue on p-dropdown via Angular10 ;

When you inspect to html. left position of the panel is a bit shift that cause by resizing of the screen.

The solution

1. style.scss - is one this a must, or you need ::ng-deep if you paste this class on other .scss file

    .force-left { left: 0;important; }

2. .component.ts

    <p-multiselect... panelStyleClass="force-left"... ></p-dropdown>

Answer 2

We found the solution 1 week later i posted this question. We solved this problem defining an attribute inside a div (the outermost) and, in the multiselect, we used appendTo with the attribute we defined in the outer div. This solved the problem.