5

Tag synonyms suggestion textbox is overlapped by Suggest button

bug picture

Example link on Stack Overflow (requires 2500+ reputation), also reproduced the same on Stack Overflow in Russian. I don't have other site accounts where I have 2500+ reputation to be sure that it affects other communities than Stack Overflow plus localized versions.

All major browsers on Windows have this issue: Chrome, Firefox, Edge, IE.

Improve this question
3
  • 1
    Yes, in SOes happens too
    – lois6b
    Commented May 17, 2018 at 8:14
  • @Glorfindel Does this happen in other than Stack Overflow communities? You have at least 6 accounts with 2500+ rep on non-StackOverflow sites.
    – Vadim Ovchinnikov
    Commented May 17, 2018 at 8:21
  • 1
    Just checked and it happens here (on Meta Stack Exchange) as well. In my browser (Firefox on macOS) it's less visible because the height of the Suggest button and the input field are equal. On the regular Stack Overflow, it doesn't happen (for me) but it has a new responsive design.
    – Glorfindel Mod
    Commented May 17, 2018 at 8:22

1 Answer 1

Reset to default
2

CSS box models strike again!

The label, entryfield and button are arranged using a flex layout, with a width of 100% specified for the entryfield. Unfortunately, that width is specified under the assumption that borders and padding would be included - which by default they are not... So the actual width of the entryfield ended up being 100% + another 12 or so pixels... Overflowing into the button.

Adding a class that forces border-box sizing corrected this.

Improve this answer
2
  • Looks like this caused at least one new bug?
    – Shadow Wizard
    Commented Jun 7, 2018 at 7:38
  • 1
    Unrelated, @shadow; but fix is incoming.
    – Shog9 Mod
    Commented Jun 7, 2018 at 14:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .