Jump to content

Do your dropdowns disappear after clicking?

Meddysong

By Meddysong
in Technical Problems

 Share

Recommended Posts

Meddysong Mentor

Meddysong

Posted
Posted

I noticed on one of my sites (and so did my users, unfortunately) that the dropdown menus seemed very sensitive. Unless you're very quick, they disappear after clicking before you can get to your item.

I wasn't sure what to do about it and thought it was just a feature. This was backed up when the same thing happened with a new site. Sometimes it seems very bad (I've just had a complaint), other times they disappear but only if I deliberately hover away from the dropdown.

However, I've just noticed that on IPS's own site, if you click, the menu permanently opens. You can click it, go to a new tab, and it's still there when you return, only disappearing once you click elsewhere on screen.

That seems to me exactly how it's supposed to work, and so I'm confused why it's not working on my sites.

Is it just me?

ezgif-5-cc1aef0f550c.gif.c8cc12e7dada00bc76fa0a3fe0ad6f9b.gif

If it isn't just me and this is working as standard, what have IPS done to theirs so that the list is visible until there's another click?

Link to comment
Share on other sites
beats23 Experienced

beats23

Posted
Posted
10 hours ago, Meddysong said:

I noticed on one of my sites (and so did my users, unfortunately) that the dropdown menus seemed very sensitive. Unless you're very quick, they disappear after clicking before you can get to your item.

I wasn't sure what to do about it and thought it was just a feature. This was backed up when the same thing happened with a new site. Sometimes it seems very bad (I've just had a complaint), other times they disappear but only if I deliberately hover away from the dropdown.

However, I've just noticed that on IPS's own site, if you click, the menu permanently opens. You can click it, go to a new tab, and it's still there when you return, only disappearing once you click elsewhere on screen.

That seems to me exactly how it's supposed to work, and so I'm confused why it's not working on my sites.

Is it just me?

ezgif-5-cc1aef0f550c.gif.c8cc12e7dada00bc76fa0a3fe0ad6f9b.gif

If it isn't just me and this is working as standard, what have IPS done to theirs so that the list is visible until there's another click?

 

I also have this problem with a clean install IPS, default theme, no apps nor plugin. I have had no response about a fix or when It will be fixed by IPS.

I advise you to send in a support ticket as well about this bug.

 

Link to comment
Share on other sites
Meddysong Mentor

Meddysong

Posted
  • Author
Posted

I've just installed a clean default theme on another of my sites and although it's a bit better, it's still not perfect. The site in this clip is in production ready for launch at the weekend. Got to keep it offline because the address is known but the people who will be moderating it are only now getting their first looks. I'll send you a PM with credentials to log in as me 🙂

Link to comment
Share on other sites
Meddysong Mentor

Meddysong

Posted
  • Author
Posted

The situation, as confirmed by @opentype, seems also to apply to the default theme owing to a tiny gap between the menu and its items, meaning that there's a short moment when the hover is broken as you move from clicking the parent to selecting a child.

I've drawn up a little CSS fix on my site, which seems to be working. It might be useful for you too, @beats23: 

/* Move the menu list closer to the parent to close the gap between them. The top value is calculated inline and each menu item has its own unique ID, so we need to use the !important tag to overwrite the inline styling and a CSS selector which targets all IDs starting with the bit leading up to the menu item's unique ID */

ul[id^="elNavigation_"] {
 top: 36px !important;
}

/* As a result of the above, the small triangle now overlaps the label on the menu item. It needs to be made smaller */

.ipsMenu:not( .ipsMenu_noStem ):before,.ipsMenu:not( .ipsMenu_noStem ):after {
    border-width: 10px;
}

/* Because the triangle is smaller, it's no longer showing in the centre. Need to adjust margin-left to compensate. It will equal the new border-width in the :after selector and (new border-width - 1px) in the :before (because the :before creates a shadow effect by being offset slightly) */

.ipsMenu.ipsMenu_bottomCenter:before {
    margin-left: -9px;
}
.ipsMenu.ipsMenu_bottomCenter:after {
	margin-left: -10px;	
}

 

Link to comment
Share on other sites
beats23 Experienced

beats23

Posted
Posted
16 minutes ago, Meddysong said:

The situation, as confirmed by @opentype, seems also to apply to the default theme owing to a tiny gap between the menu and its items, meaning that there's a short moment when the hover is broken as you move from clicking the parent to selecting a child.

I've drawn up a little CSS fix on my site, which seems to be working. It might be useful for you too, @beats23: 


/* Move the menu list closer to the parent to close the gap between them. The top value is calculated inline and each menu item has its own unique ID, so we need to use the !important tag to overwrite the inline styling and a CSS selector which targets all IDs starting with the bit leading up to the menu item's unique ID */

ul[id^="elNavigation_"] {
 top: 36px !important;
}

/* As a result of the above, the small triangle now overlaps the label on the menu item. It needs to be made smaller */

.ipsMenu:not( .ipsMenu_noStem ):before,.ipsMenu:not( .ipsMenu_noStem ):after {
    border-width: 10px;
}

/* Because the triangle is smaller, it's no longer showing in the centre. Need to adjust margin-left to compensate. It will equal the new border-width in the :after selector and (new border-width - 1px) in the :before (because the :before creates a shadow effect by being offset slightly) */

.ipsMenu.ipsMenu_bottomCenter:before {
    margin-left: -9px;
}
.ipsMenu.ipsMenu_bottomCenter:after {
	margin-left: -10px;	
}

 

I copied and paste your code and also tried different pixel settings for  

ul[id^="elNavigation_"] {
 top: 36px !important;

No change, I sill have the problem.

I'll have to investigate some more.

Thanks 

Link to comment
Share on other sites
  • 3 weeks later...
Meddysong Mentor

Meddysong

Posted
  • Author
Posted
On 1/18/2019 at 10:48 AM, Meddysong said:

The situation, as confirmed by @opentype, seems also to apply to the default theme owing to a tiny gap between the menu and its items, meaning that there's a short moment when the hover is broken as you move from clicking the parent to selecting a child.

I've drawn up a little CSS fix on my site, which seems to be working.

Bah, there's a complicating factor which I hadn't thought of. This works fine with dropdowns in the primary nav bar. Unfortunately, it imposes the same conditions on dropdowns in the secondary dropdown too. Where I force 36px for primary (which is the calculated top position minus 2), I need a different value for dropdowns in the secondary bar (where calculated minus 2 is some very different value).

Unfortunately, I can't see a CSS solution. The system seems to create these dropdowns on clicking and they appear in the same place in the DOM with the top value calculated and added as a style element. There doesn't seem to be any way of selecting a <ul> dropdown list which appears on click based on whether it's parent is a primary or secondary item.

Has anybody checked whether this has been fixed on 4.4?

Link to comment
Share on other sites
Meddysong Mentor

Meddysong

Posted
  • Author
Posted
1 hour ago, steve00 said:

Not trying to be awkward here but have you tried with a different browser (at least then can eliminate if a browser specific issue with the css or not) ?

Just tried it in Firefox and I have it there too, although it doesn't appear to be so bad. It's present in the default theme too. Apparently IPS is aware of it although I don't know whether it's fixed in 4.4.

Link to comment
Share on other sites
steve00 Proficient

steve00

Posted
Posted
2 hours ago, Meddysong said:

Just tried it in Firefox and I have it there too, although it doesn't appear to be so bad. It's present in the default theme too. Apparently IPS is aware of it although I don't know whether it's fixed in 4.4.

Strange as using FF for ages now and never had an issue like that (or at least do not recall it)

Link to comment
Share on other sites
  • 3 months later...
Meddysong Mentor

Meddysong

Posted
  • Author
Posted

This doesn't appear to have been fixed in 4.4, unfortunately. I've just tried it on an untouched default theme. In a couple of my menu items everything is perfect; but it never works at all with Activity.

As far as I can tell the difference is that there are items in the secondary menu for those items which also have a dropdown menu. The presence of the secondary navbar seems to prevent the break in the hover. In the unsuccessful instance, there is no secondary navbar and the hover state breaks. I'll report it to support in the hope of a fix because I've just lost a couple of hours trying to fix this on my theme. If it doesn't work with the default, then I think it probably lies with IPS to squash that bug.

Link to comment
Share on other sites
  • 1 year later...
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...