Pop up Menu getting cut off at the bottom of the page

101
February 13, 2020, at 02:20 AM

I have a playlist and once the playlist items hit near the bottom of the screen.. the pop up menu gets cut off as i'm using the x and y mouse coordinates to display the menu i guess from the upper left hand corner.

The logic i'm thinking is that once it gets near the bottom of the page, i have to change from top and left to bottom and right.

But how do I detect this? That's where I'm stuck. Appreciate any help.

// Playlist.js

const handleOnClick = e => {
    setIsShowMenu(true);
    setMouseCoordinates({ x: e.clientX, y: e.clientY });
  };
....
return (
  <div className="playlist">
    <ul>
      {playlistArr.map((pageId, index) =>
        <PlaylistItem/>
      )}
    </ul>
  </div>
);

// ContextMenu.js

const ContextMenu = ({ setIsShowMenu, subCompIdArr, xPos, yPos }) => {
  const style = {
    top: yPos.toString() + 'px',
    left: xPos.toString() + 'px',
  };
  return (
    <div className="contextMenu" style={style}>
      <ul>
        {
          playlistArr.map(.....)
        }
      </ul>
    </div>
  );
};
READ ALSO
Can we upload PDF generated from react-pdf to server?

Can we upload PDF generated from react-pdf to server?

We are using @react-pdf/renderer to generate pdf documents in our application, is there a way to upload those generated documents to backend server?

92
Is there anyway to get videojs-record to work on phone?

Is there anyway to get videojs-record to work on phone?

Hi so as you can see i have a problem with videojs-recorder, problem is i can't get access to my cam on phoneI use code down below and i am testing it with remote dev tools on chrome

93
Hide a controller with `dat.gui`

Hide a controller with `dat.gui`

I have the following code for a simple GUI (also in jsfiddlenet):

127