Sphinxxxx/vanilla-picker

Padding issue on Firefox

Closed this issue · 5 comments

josdejong commented

Hi Andreas, thanks for this awesome library, it really works like a charm! I use it in http://github.com/josdejong/jsoneditor 👍

I noticed a small CSS issue on Firefox: the color HEX code doesn't fit in the input field with the default styling:

image

Would be great if you can have a look into that.

Sphinxxxx commented

Hello there! Is that screenshot from the normal demo page? It doesn't look like that on my Firefox (on Windows 10)..

  1. Which OS are you on?
  2. Try to add this in the CSS panel and see if the "Basic example" looks better:
#basic .picker_editor {
    width: auto;
}
#basic .picker_editor input {
    width: 11ch;
    padding: 0 .5ch;
}
josdejong commented

Wow, that's interesting. I'm running FireFox on Linux Mint. Chrome on Linux Mint doesn't have the issue, and FireFox on Windows also not.

It turns out that this version of FireFox has a different default styling for inputs and buttons, having a huge inset border with a with of 8px left and right and 5px top and bottom and all sorts of stuff. The width and padding is applied correctly, it's just the styles that we don't define ourselves and that rely on browser defaults.

I figured it's quite easy to fix by simply defining the border and background:

.picker_editor input,
.picker_done button {
    border: 1px solid #cfcfcf;
    border-radius: 2px;
}
.picker_done button {
    background: #e5e5e5;
}
.picker_done button:hover,
.picker_done button:active {
    background: #f5f5f5;
}

Is this something you can add to vanilla-picker?

Sphinxxxx commented

Sure, that should be an easy fix. Will do!

Do you know which versions of Firefox come with that different styling?

josdejong commented

Thanks!

Well, actually I was very surprised that the styling of Firefox is not consistent for different OS's. I have no idea if it's on all Linux versions of Firefox, or only on Linux Mint.

josdejong commented

I can confirm that this is fixed in v2.9.1 on my very-specific-version-of-firefox. Thanks again

  • 👍1