Action buttons dropdown causes elements to shift on page

Bug Reports
21

well shoot, I don’t think hardly any of us in my company have a mac, so I’m not sure this is the cause of it for our bug but perhaps? maybe? lol maybe it is a different bug from what you are experiencing

would you mind sharing how you added the right padding to the page? I would like to try that and see if it fixes the issue for me!

22

Well on Windows devices and also if I’m not mistaken on Linux devices the scroll bar is always visible, so that’s why you probably always experienced it :sweat_smile:. We had some difficulties reproducing it because our companies’ devices are Mac and that setting by default is set to not show scroll bar always :sweat_smile:.

We are just tracking the state whether the dropdown is open or not and make this change

        if (open) {
            document.documentElement.style.overflow = 'hidden';
            document.documentElement.style.paddingRight = `${scrollbarWidth}px`;
        } else {
            document.documentElement.style.overflow = 'unset';
            document.documentElement.style.paddingRight = '0';
        }

But I’m not sure if it is achievable via custom code as I’m not sure there is a way to access that open state of dropdown.
Anyways, seems like not all blocks (for instance, lists) have this change that’s why in some cases it’s still reproducible. We will deploy other blocks and see if it fixes the issue :slightly_smiling_face:.

1 Like
23

@artur Any ideas on how I could deploy some similar custom code to fix? :sweat_smile:

24

@robert_poghosyan ahh - you are absolutely correct. I hadn’t noticed until now, but you’re right, the scroll bar disappears when the dropdown is open.

1 Like
25

@danyalamriben we are looking into it please wait a bit :slight_smile: we will have a solution in place.

1 Like
26

thank you!

27

@artur any updates on this? I got a new report late last night and now started randomly noticing again for random button blocks :pensive: I literally dont know how to fix it but kindof renders buttons useless if ya cant even click them !

Diana I’m trying to edit [staff name]’ PIPEDA link but when I click the three dot option it flashes open for a second but doesn’t actually open to a menu with links I can use

image
image972×601 59.8 KB

I’m using custom code provided by someone in support on this page:

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

#staff-info  .filter-container .container {
max-width: 100%;
}

#prog  .filter-container .container {
max-width: 100%;
}

#task  .filter-container .container {
max-width: 100%;
}

#trans  .filter-container .container {
max-width: 100%;
}
#exp  .filter-container .container {
max-width: 100%;
}

#dates  .filter-container .container {
max-width: 100%;
}
#manual  .filter-container .container {
max-width: 100%;
}
#table5  .filter-container .container {
max-width: 100%;
}

please let me know if an update has rendered this code outdated. see video for details: Button Access issue - TechSmith Screencast - TechSmith Screencast