Fix CSS for select with other field sizes #1119
Conversation
- Added a note about this repository
The select was rendered distorted in Safari, Chrome, Firefox on macos after the fixing TheCoder4eu#1090. The no longer set -webkit-appearance to menubutton-list is no longer overriding the line-height. This was set wrongly for field sizes other than md. Also long text was overlayed by arrow images. Fixes TheCoder4eu#1097
|
It seems updating to Bootstrap 3.4.1 fixes the problem. Can you please verify if it works on the source I've just pushed to GitHub? |
|
Still there. Just downloaded bootsfaces-1.5.0-20200429.204938-1.jar and modified selectOneMenu.xhtml from BootfacesWeb.xml second b:selectOneMenu to
|
|
@geopossachs That's precisely what I did. Which browser are you using? Does the error occur without your IE bugfix #1090, too? This is what it looks like on my Mac: Brave (based on Chromium): Safari (looks a bit odd on the right-hand side, but doesn't shift the text southward): Firefox: |
|
MacOS 10.14.6 |
|
@mtvweb Oops, sorry for confusing you with Georg. Luckily, you've received my answer nonetheless. I'm confused. We're running almost the same configuration. I'm running a slightly newer OS, but that shouldn't make much of a difference. Probably the bug is on my side, but I can't spot it. Just to be sure: open your developer tools and disable the cache in the network tab (if you haven't done so already). You can also try the staging area of BootsFaces. It runs the latest changed I've committed. On my machine, it looks like this:
|
|
It seems to be that you have modified the b:selectOneMenu with select2 for testing. I've used the second one without select2. |
|
That sounds like one of the thing I'm always doing. But in this case, I don't think so. Mind you, after deliberately switching the second select box to "select2" it looks like so:
The most prominent difference being the arrow on the right-hand side of the select box. Confused greetings :) |
| @@ -454,6 +454,15 @@ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221. | |||
| appearance: none; | |||
| } | |||
|
|
|||
| select.input-sm { | |||
| line-height: 20px; | |||
| } | |||
There was a problem hiding this comment.
this is better then line-height: 30px; of core.css 👍
| select.form-control { | ||
| background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E"); | ||
| padding-right: 25px; |
|
|
||
| select.input-lg { | ||
| line-height: 26px; | ||
| } |
There was a problem hiding this comment.
this is better then the line-height: 46px; of core.css 👍
The select was rendered distorted in Safari, Chrome, Firefox on macos after the fixing #1090. The no longer set -webkit-appearance to menubutton-list is no longer overriding the line-height. This was set wrongly for field sizes other than md. Also long text was overlayed by arrow images.
Fixes #1097