Positioning popup menu?

@sibertMar 03.2022

I have managed to create a popup menu. But it does not position under the “button”

~~[url=https://postimages.org/][img]~~https://i.postimg.cc/gcfzLVzH/popup.png[/img][/url]

How do I put the menu under the “button”?

https://jsfiddle.net/etndgh08/

to post a comment

19 Comments(s) _↴

@SempervivumMar 03.2022 — #@sibert#1642947
>How do I put the menu under the "button"?

I achieved this by shifting the menu to the table cell where the more button is located in:

``<i>
 </i>        const menu = document.querySelector(".menu");
 function popup(menuCell) {
 // shift menu or ul to the current cell
 // the more button is located in:
 menuCell.appendChild(menu);
 menu.classList.remove('hide');
 }<i>
 </i>`</CODE>
 This required handing over the cell having been clicked:
 <CODE>`<i>
 </i>        document.addEventListener('click', event =&gt; {
 const row = event.target.closest('tr');
 if (row) {
 const id = row.dataset.id
 if (event.target.classList.contains('more')) {
 // pop up menu, hand over the cell having been clicked:
 popup(event.target)
 }
 }
 });<i>
 </i>`</CODE>
 Having done so I had some trouble: The menu was not visible as the cell's content was overwritten by the CSS:<br/>
 <C> content: url("https://crud.go4webdev.org/icn/more.svg");</C><br/>
 Therefore I had to change this to background-image:
 <CODE>`<i>
 </i>        .more {
 padding: 0px;
 background-image: url("https://crud.go4webdev.org/icn/more.svg");
 }<i>
 </i>`</CODE>
 Then I positioned the menu absolutely:
 <CODE>`<i>
 </i>        .more {
 position: relative;
 }
 
 .menu {
 position: absolute;
 top: 100%;
 right: 0;
 }<i>
 </i>`</CODE>
 BTW: An array can be defined directly without using a JSON string:
 <CODE>`<i>
 </i>        const data =
 [{
 "status": "1",
 "name": "New"
 }, {
 "status": "2",
 "name": "Done"
 }, {
 "status": "3",
 "name": "Delete"
 }];
 
 data.forEach(buildNewList);<i>
 </i>``

https://jsfiddle.net/4hex9gfq/

@sibertauthorMar 03.2022 — #> @Sempervivum#1642948 I achieved this by shifting the menu to the table cell where the more button is located in:

I do not understand this completely. I get the meny in almost the right place, but not as a popup menu. And the icon disappear. What am I doing wrong?

https://jsfiddle.net/or23tswe/

> BTW: An array can be defined directly without using a JSON string:

I know, but my intention is to create these popup menus from a database on-the-fly in different languages. Hence the JSON. Or do you have a better suggestion for multilingual?

@SempervivumMar 03.2022 — #@sibert#1642949
>I get the meny in almost the right place, but not as a popup menu.

I'm not sure what you intend to achieve. In my version the table rows remain unchanged and the menu is covering them. I achieved this by positioning the menu absolutely. I assumed that this is what you call popup menu.

@sibertauthorMar 04.2022 — #> @Sempervivum#1642950 I'm not sure what you intend to achieve.

Almost perfect. Added marginal-top to menu.

But how do I make the popup menu disappear when NOT hover? Or clicking somewhere else?

https://jsfiddle.net/dwveftLq/1/

@SempervivumMar 05.2022 — #In the event listener on document you can detect easily if the user clicked outside the more button:

``<i>
 </i>document.addEventListener('click', event =&gt; {
 const row = event.target.closest('tr');
 let moreClicked = false;
 if (row) {
 if (event.target.classList.contains('more')) {
 popup(event.target);
 // note that the user clicked inside the more button:
 moreClicked = true;
 }
 }
 // if the user clicked outside the more button:
 if (!moreClicked) {
 // hide menu: 
 popupmenu.classList.add('hide');
 }
 });<i>
 </i>``

@sibertauthorMar 11.2022 — #As long as in jsfiddle this works perfect.

https://jsfiddle.net/4rwmb0L3/

But when applying this in the real world I have some problem with popmenu position offset when scrolling. The offset seems to be related to the scrolled position. The more scrolled, the more offset.

[url=https://postimages.org/]

[img]https://i.postimg.cc/QtJYKVMK/offset.png[/img][/url]

Tiny movie: https://www.screencast.com/t/hthd2IcCCgX

How can I do to get correct position?

@SempervivumMar 11.2022 — #Try to make the td the reference for absoute positioning:

``<i>
 </i>td {
 /* make overflow visible: */
 /* overflow: hidden; */
 text-overflow: ellipsis;
 white-space: nowrap;
 background-color: var(--lite);
 margin-bottom: 5px;
 border-bottom: #009;
 padding: 10px;
 color: var(--black);
 /* make td the reference for
 absolute positioning: */
 position: relative;
 }<i>
 </i>``

@sibertauthorMar 11.2022 — #> @Sempervivum#1643078 Try to make the td the reference for absoute positioning:

Yes, this solved the scrolling problem. But added another :-)

How do I fix this?

[url=https://postimages.org/]

[img]https://i.postimg.cc/rsCpq42K/hidden.png[/img][/url]

@SempervivumMar 11.2022 — #Try to add `right: 0;

</C> to the menu:
 <CODE>

<i>
 </i>.menu {
 display: inline-block;
 position: absolute;
 right: 0;
 top: 0;
 margin-top: 38px;
 list-style: none;
 background-color: var(--bg);
 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 z-index: 10;
 }<i>
 </i>

@sibertauthorMar 11.2022 — #Yes, this solved the problem in a way sort of.

The popup menu is within the box, so it causes another problem :-)

How do I make it "left" and visible?

[url=https://postimages.org/]

[img]https://i.postimg.cc/DwpJmR8F/bottom.png[/img][/url]

@SempervivumMar 11.2022 — #I suspect that there is one more `overflow: hidden;` for the table or somewhere else.

@sibertauthorMar 11.2022 — #> @Sempervivum#1643094 I suspect that there is one more overflow: hidden; for the table or somewhere else.

There was for <th> but I do not use this in this table. Is not position: absolute causing problem generally?

@SempervivumMar 11.2022 — #>Is not position: absolute causing problem generally?

Yes, `position: absolute;` is always a bit of error prone and usually it's not recommended to use it.

However in this case when it's required that the menu overlaps the remaining content one cannot do without.

Two options to fix this:

a) Scroll down automatically so that the menu is visible completely. scrollIntoView

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

would be fine, however Safari doesn't support it.

b) Place the menu above the row when the row is located in the lower part of the table.

There are libraries for tooltips available that place the popup in an intelligent way so that it's always visible completely.

@sibertauthorMar 14.2022 — #> @Sempervivum#1643094 I suspect that there is one more overflow: hidden;

The problem with popup menu occur when the table is within a container. Is there any way to fix this?

scrollIntoView is no solution for this "offset"

[url=https://postimages.org/]

[img]https://i.postimg.cc/wB50QccV/scroll.png[/img][/url]

https://jsfiddle.net/4Lfa0qjz/7/

@SempervivumMar 14.2022 — #>Is there any way to fix this?

Yes, but taking into account any type of location of the more button would make the script fairly complex. As already mentioned there are libraries available, that are doing this job. Tooltipster is one:

https://github.com/calebjacob/tooltipster

No benefit in inventing the wheel again.

An easy solution but completely different would be using a modal that is centered in the viewport.

Or a window or modal containing the forms and a tab for each type of modification.

@sibertauthorMar 14.2022 — #> @Sempervivum#1643169 No benefit in inventing the wheel again.

Any tip **without** jQuery?

@SempervivumMar 14.2022 — #I mentioned tooltipster just as I'm supporting a webmaster who's using this one and therefore knew about it.

There are a lot of different plugins out there:

https://openbase.com/categories/js/best-javascript-tooltip-libraries

@SempervivumMar 14.2022 — #I gave Tippy a try and it's working fine so far:

https://jsfiddle.net/Sempervivum/sL0o3rm7/1/

@tsdailyMar 16.2022 — #_Hlo,_

you are doing a great job .You are perfect just the way you are. Your site must be easy to read, navigate, and understand. Some key usability elements include: Simplicity: The best way to keep visitors glued to your site is through valuable content, good organization and attractive design. Keep your site simple and well [organized.](https://www.tsdailytrends.com/)

Also in #JavaScript _↴

contents of form field Firefox problem with location.href to frame!Problem with a drop-down select on IE, please help

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This

Positioning popup menu?

19 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Positioning popup menu?

19 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #JavaScript _↴