question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Input field suggestions should not overlap action buttons

See original GitHub issue

Description

This affects all modals with inputs

If I type something, it will autocomplete with some results.

Screenshot from 2022-11-24 10-03-33

Screenshot from 2022-11-24 10-03-44

The problem is that if I want to save I need to click save button, which is behind the result list. To hide the result list I need to click somewhere in the modal . Clicking outside of the modal closes the modal

Pressing ESC closes the modal entirely, not just the popup (this could be another issue)

My suggestion might be to have a fixed width for the results that will not overlap the buttons.

Issue Analytics

  • State:open
  • Created 10 months ago
  • Comments:16 (12 by maintainers)

github_iconTop GitHub Comments

2reactions
rephuscommented, Dec 16, 2022

Yeah, that works, we’ll have to make sure clicking outside the modal doesn’t close the modal, but only while selection is open…

1reaction
IrakliJanicommented, Dec 22, 2022

agreed to keep all modals open even if you click outside. that should be a simple fix

Read more comments on GitHub >

github_iconTop Results From Across the Web

how to prevent text overlapping the button through css
Try this.. You can see a space right to the textbox. I have added padding right to the textbox.
Read more >
Should buttons overlap inputs? - Design & UX - SitePoint
Hi there, I am wondering if it's ok to have a submit button overlap an input field? Something like these: Or is it...
Read more >
Any way to stop the button and title from overlapping? - Reddit
Looks like you're using a hard-coded gap between the 2 buttons. Try and put all your navigational elements in one div, then set...
Read more >
Fix Text Overlap with CSS white-space | SamanthaMing.com
Fix overlapping text by setting CSS white-space from. ... lead to overlapping text. You can easily fix it by setting the white-space to...
Read more >
Buttons overlapping input - CodePen
Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found