Bug #70243
closed
Polishing dropdown selectors for 7.6 LTS
0%
Description
In TYPO3 7 bootstraped dropdown selectors dont fits to the rest of form fields, there is a different border-radius, disabled border-top-left and bottom radius didn't work with add ons, furthermore dropdowns looks different in every browser.
There is a pretty simple workaround for this case, I think TYPO3 7.6 LTS needs improvements in this place because this is a matter of image.
This is what should be done:
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%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%3Cpath%20fill%3D%22#000%22%20d%3D%22M7%2010l5%205%205-5z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
padding-right: 25px;
background-repeat: no-repeat;
background-position: right center;
&:-ms-expand {
display: none;
}
}
You can look at the live example http://r4fx.github.io/mate/doc/www/forms.html#nav-basic
Please make the selectors look beautiful! :-)
Files
Updated by Riccardo De Contardi about 9 years ago
- File Cattura-7.6-chrome.PNG added
- File Cattura-7.6-firefox.PNG Cattura-7.6-firefox.PNG added
- File Cattura-7.6-IE10.PNG Cattura-7.6-IE10.PNG added
- Status changed from New to Needs Feedback
Hi Rafal,
as far as I can see, this has been solved on the latest master (7.6-dev). Can you confirm? I attach some screenshots.
Updated by Riccardo De Contardi about 9 years ago
- File deleted (
Cattura-7.6-chrome.PNG)
Updated by Riccardo De Contardi about 9 years ago
- File Cattura-7.6-chrome.PNG Cattura-7.6-chrome.PNG added
Updated by Rafal Brzeski about 9 years ago
I checked it, and... no. I noticed out that it looks nice on Windows, not on Mac, so my screenshots are still valid but for Apple devices.
Updated by Riccardo De Contardi about 9 years ago
- Status changed from Needs Feedback to New
Updated by Riccardo De Contardi about 9 years ago
I would suggest something like:
select.form-control{
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
Updated by Rafal Brzeski about 9 years ago
- File unfold-more.svg unfold-more.svg added
this is not a good idea, when you put -webkit-appearance: none; arrow from the right will disappear.
I prepared jsfiddle with complex code example - https://jsfiddle.net/x76j455z/8/ tested on many browsers and systems on Browserstack, and it looks nice everywhere.
Whole idea is simple, just disable predefined appearance on every browser, and then we can do anything with dropdown, to achieve arrow sign from the right we can use svg icon compressed with base64 as background image.
This method is from css tricks https://css-tricks.com/probably-dont-base64-svg/, svg icon may be compressed by online tools like http://pressbin.com/tools/urlencode_urldecode/.
I looked a long time for the best results to style native dropdown selector which will look the same in all browsers, and this is one of the best method I found.
Updated by Riccardo De Contardi about 9 years ago
you are right, I did not notice it :) we could add the background base64-encoded svg as you suggest :)
Updated by Riccardo De Contardi about 9 years ago
- Category set to Backend User Interface
Updated by Mathias Schreiber about 9 years ago
- Target version set to Candidate for patchlevel
Updated by Gianluigi Martino almost 9 years ago
- Status changed from New to In Progress
- Assignee set to Gianluigi Martino
Updated by Gerrit Code Review almost 9 years ago
- Status changed from In Progress to Under Review
Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/45443
Updated by Andreas Kienast almost 9 years ago
Is this ticket still up-to-date? A patch of mine was merged at 8. of November that actually solves the issue: https://review.typo3.org/#/c/44367/
Updated by Rafal Brzeski almost 9 years ago
this issue was solved and may be closed
Updated by Gianluigi Martino almost 9 years ago
- Status changed from Under Review to Closed
Already solved here: https://review.typo3.org/#/c/44367/