How to make smart positioning of drop down list in browser window?

Question

css

Hello! I need to solve the problem with the drop-down list, now it can be like this for me.
That is, the drop-down block goes beyond the edge of the browser, and I need it to be smartly positioned if it reaches the edge on the left or right, adjust so that it does not go beyond the browser and be visible. Does anyone know a solution? I know there is a popper js plugin, but for some reason it works only for 1 drop-down list and not for each, and a little buggy. Maybe there are options without plugins? Or is the plugin good? Help me please. I will be grateful

Answer 1

Here is an example of how you can do it. Here's a simple example: popover opens on click and doesn't recalculate popover position when resize is done