Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing arrow on select with suitv2 #769

Open
pulse-mind opened this issue Nov 9, 2020 · 0 comments · May be fixed by #774
Open

Missing arrow on select with suitv2 #769

pulse-mind opened this issue Nov 9, 2020 · 0 comments · May be fixed by #774

Comments

@pulse-mind
Copy link

pulse-mind commented Nov 9, 2020

The arrow on select is not displayed
This is the css provided by suit.css:1186

.custom-select, fieldset select:not([multiple="multiple"]) {
    display: inline-block;
    max-width: 100%;
    height: calc(2.5rem - 2px);
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    padding-right: 0.75rem \9;
    color: #55595c;
    vertical-align: middle;
    background: #fff url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E) no-repeat right 0.75rem center;
    background-image: none \9;
    background-size: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    -moz-appearance: none;
    -webkit-appearance: none;

appearance: none is hidding the arrow.
I guess the background is trying to defined a SVG image but it is not displayed.

It looks like the encoding is not working properly
I think the problem is due to the # that is not encoded properly, it should be %23

But then it displays a double arrow (up/down) instead of a simple arrow (down)
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment