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.

Sign up for GitHub

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

Jump to bottom

How do I change the arrow in the select to an inline SVG #859

Open
astridx opened this issue Apr 21, 2020 · 2 comments
Open

How do I change the arrow in the select to an inline SVG #859

astridx opened this issue Apr 21, 2020 · 2 comments
Labels
feature request

Comments

@astridx
Copy link

astridx commented Apr 21, 2020

Is your feature request related to a problem? Please describe.
I can't figure out how I can change the dropdown arrow to an inline SVG .

Describe the solution you'd like
I like to use inline SVG for icons.

Describe alternatives you've considered
I know, that I can change it via CSS.

Additional context
Add any other context or screenshots about the feature request here.

This is my code as far.

<!DOCTYPE html>
<html>
	<head>
		<title>Choices Test</title>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1"
			/>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css"
			/>

		<script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script>
		<style>
			.svg-inline {
				display: inline-block;
				font-size: inherit;
				max-height: 1em;
			}
		</style>
	</head>
	<body>

		<h2>Single select input</h2>
		<label for="choices-single-default">Default</label>
		<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
			<option value="">This is a placeholder</option>
			<option value="Choice 1">Choice 1</option>
			<option value="Choice 2">Choice 2</option>
			<option value="Choice 3">Choice 3</option>
		</select>
		<svg aria-hidden="true" focusable="false" class="svg-inline svg-icon__star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>							
		<script>
			document.addEventListener('DOMContentLoaded', function () {
				var genericExamples = document.querySelectorAll('[data-trigger]');
				for (i = 0; i < genericExamples.length; ++i) {
					var element = genericExamples[i];
					new Choices(element, {
						placeholderValue: 'This is a placeholder set in the config',
						searchPlaceholderValue: 'This is a search placeholder',
					});
				}
			});
		</script>
	</body>
</html>

Now I would like to put the star in the place of the arrow.

enter image description here
@joffreypersia
Copy link

Good idea :)

@joffreypersia
Copy link

joffreypersia commented Apr 24, 2023 •
edited
Loading

@astridx I found a way to make it
Inside my alpine component, I added the function :

    <div
        x-data="{
            init() {
                let choices = new Choices(this.$refs.select, {
                    removeItemButton: true, // not relevant
                    placeholder: true, // not relevant
                    allowHTML: false, // not relevant
                });
            },
            appendIcon() {
                const iconContainer = document.createElement('div');
                iconContainer.classList.add('dropdown-icon');

                const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                svg.setAttribute('width', '20');
                svg.setAttribute('height', '20');
                svg.setAttribute('viewBox', '0 0 20 20');
                svg.setAttribute('fill', 'currentColor');

                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                path.setAttribute('d', 'M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z');

                svg.appendChild(path);
                iconContainer.appendChild(svg);

                this.$refs.select.parentNode.parentNode.appendChild(iconContainer);
            }
        }"
        x-init="init(); appendIcon();"
        class="w-full"
    >
         <select
            name="{{$name}}@if($multiple)[]@endif"
            id="{{$name}}-id"
            x-ref="select"
            @if($disabled) disabled @endif
            @if($multiple) multiple @endif
        >
            @foreach($options as $k => $v)
                <option value="{{ $k }}" {{ in_array($k, $selectedValueArray) ? 'selected' : '' }}>{{ $v }}</option>
            @endforeach
        </select>
    </div>

And I added inside my app.css
and in my app.css

   .choices[data-type*=select-one] > .dropdown-icon {
       @apply absolute top-1/2 right-2 transform -translate-y-1/2 text-shade-500 dark:text-shade-400
  }
  .choices[data-type*=select-multiple] > .dropdown-icon {
      @apply hidden
  }

Hope it will help someone ✨
PS : I couldn't find a way to make the callback function work https://github.com/Choices-js/Choices#callbacks
PS2 : I tried

appendIcon() {
    const iconContainer = document.createElement('div');
    iconContainer.classList.add('custom-icon');
    iconContainer.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"/>
        </svg>`;
    this.$refs.select.parentNode.parentNode.appendChild(iconContainer);
}

but the backticks created a bug in my html page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@astridx @joffreypersia