Search…

X3 Photo Gallery Support Forums

Search…
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Dropdown menu issues

01 Sep 2022, 03:49

On https://www.danielbollinger.de/ the dropdown for menu item Daniel Bollinger menu adjusts its width after dropping down. I hope that's not another firefox bug, can you recreate the issue?

Also I wanted to create a small gap between this item and the one on the right. I assigned a margin-left to the Kontakt item but this seems to break the dropdown layout, it's offset. I removed it (don't want that on my live site), but here's a screenshot:
Attachments
Bildschirmfoto 2022-09-01 um 09.52.13.png
Bildschirmfoto 2022-09-01 um 09.52.13.png (67.58 KiB) Viewed 6132 times
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Dropdown menu issues

01 Sep 2022, 05:12

Just for your info: The dropdown menu uses a few adjustment mechanisms. First of all, the dropdown is linked to a button and will not automatically inherit the width of the button that opens the dropdown ... content of the dropdown might be wider or narrower than the button ... The menu does automatically expand to "at least" the width of the button, but it will sometimes expand to wider than the width of the button. Also, dropdown menu items have different paddings and font-sizes from the top-level item ... From just viewing your screenshot, I can't see anything specifically wrong. A menu could expand to be wider than the top-level items.

I checked here from both Chrome and Firefox, and it looks like the below. It may adjust itself on FIRST mouse-hover, because this is the first time the menu can measure it's own width (we can't measure width of hidden menu items). This could perhaps have been implemented better, but in most cases, it won't happen and/or nobody would notice.
Image

I'm not sure how you get that screenshot, as it's different from mine, but none of them are essentially wrong. Perhaps you have some custom zoom level in browser that is affecting fonts.
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Dropdown menu issues

01 Sep 2022, 05:21

Ok, I understand the part about adjusting the width on first mouse hover, that's logical.

What's bothering me more: On first mouse hover the left edge of the dropdown is not aligned with the border of the menu item background, it's farther to the right.

And somehow I randomly get this (AFTER the first adjustment has been made):
Bildschirmfoto 2022-09-01 um 11.19.49.png
Bildschirmfoto 2022-09-01 um 11.19.49.png (89.25 KiB) Viewed 6126 times
But after refreshing the page it looks just fine:
Bildschirmfoto 2022-09-01 um 11.20.12.png
Bildschirmfoto 2022-09-01 um 11.20.12.png (84.47 KiB) Viewed 6126 times
So this doesn't seem to be an issue with width, the items all fit.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Dropdown menu issues

01 Sep 2022, 05:33

metallissimus wrote:What's bothering me more: On first mouse hover the left edge of the dropdown is not aligned with the border of the menu item background, it's farther to the right.
Is this something I am supposed to be able to see in the screenshot? It looks aligned on right with the menu button right. The only reason you may see anything different, is if you have browser "zoom" mode not set to 100% (for example 110% or 90%), which I suspect you have. In this case, since browser CSS-pixels are no longer 1:1 with screen, some browsers may show glitches when failing to render items at decimal. I have seen this many times.

The menu is definitely supposed to expand leftwards, beyond the left side of the dropdown button, when necessary. I am pretty sure you have a non-default browser zoom settings. What do you see here? Screenshot if possible.
https://www.mydevice.io/
metallissimus wrote:And somehow I randomly get this (AFTER the first adjustment has been made):
What do you mean "randomly" here ... Like sometimes it's wider and sometimes its same width? If this is only your Firefox and I can't reproduce, it's definitely a Firefox "quirk" if not "bug".
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Dropdown menu issues

01 Sep 2022, 05:44

mjau-mjau wrote: Is this something I am supposed to be able to see in the screenshot?
No, there's no screenshot of this, because it happens so quickly. I could try a screen capture video, but I would need to find an app for that.
It's just a small aestethic problem I would have liked an easy fix for if there was one. As it looks like there is none, we don't need to dig deeper.
The menu is definitely supposed to expand leftwards, beyond the left side of the dropdown button, when necessary. I am pretty sure you have a non-default browser zoom settings. What do you see here? Screenshot if possible.
https://www.mydevice.io/
See attachment.
metallissimus wrote:Like sometimes it's wider and sometimes its same width?
Yeah, this.
I've been a Firefox user all my web life but I feel like I might need to start looking somewhere else... :confused:
Attachments
Bildschirmfoto 2022-09-01 um 11.37.41.png
Bildschirmfoto 2022-09-01 um 11.37.41.png (749.93 KiB) Viewed 6120 times
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Dropdown menu issues

01 Sep 2022, 06:33

mjau-mjau wrote:
metallissimus wrote:What's bothering me more: On first mouse hover the left edge of the dropdown is not aligned with the border of the menu item background, it's farther to the right.
Now I managed to get a screenshot of the phenomenon. But as I said above: If it's complicated, don't bother fixing it.
Attachments
Bildschirmfoto 2022-09-01 um 12.31.12.png
Bildschirmfoto 2022-09-01 um 12.31.12.png (11.61 KiB) Viewed 6117 times
Last edited by metallissimus on 01 Sep 2022, 07:16, edited 1 time in total.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Dropdown menu issues

01 Sep 2022, 07:01

metallissimus wrote:No I managed to get a screenshot of the phenomenon. But as I said above: If it's complicated, don't bother fixing it.
This is because X3 adjusts the width to match the top button, but can only do this once it becomes visible and we can measure the width. There might be ways to avoid the visual glitch, but this is at least the reason you might see it on occasion in some browser.