Can't force svelte-multiselect box to not grow

[paul-brenner]

Perhaps just me not understanding something fundamental. But I am yet to find a way to force a svelte-multiselect box to stay a fixed size. I see in examples like https://awesome-sveltekit.janosh.dev/ that e.g. selecting options for "Filter by tag" just causes that box to grow in both width and height which pushes the rest of the page around. Am I missing a way to not let that happen?

I'm not 100% sure what should happen instead. I was trying to think if there is some way to just abbreviate the selected options when they take up too much space. e.g. if I selected "blog" and "animations" and there wasn't enough space for both then animations would become "anim..." or just "anim".

But I also see that just selecting "blog" causes the select box to get wider even though there is plenty of empty space and I'm not sure what is driving that or if I can force it to stop.

I should also say upfront that I'm a daisyUI/Tailwindcss user so if there is an existing option I would be trying to figure out how to convert it to work with Tailwind.

[janosh]

I didn't look into that yet mostly because I really dislike tweaking CSS and that I'm never sure any changes I make would be a general improvement or just for the case I'm currently looking at (different width and height of options, page layout, etc. might need different settings). But I agree the default behavior could be much better.

For the time being, the idea is that users pass these CSS variables to tweak the layout to their liking.

<MultiSelect 
  --sms-width="300px"
  --sms-max-width="300px"
  --sms-min-height="30px"
/>

To turn animations into anim..., you could try text-overflow: ellipsis. Though you may need to disable flex-wrap on ul.options.

[paul-brenner]

Ah, the text-overflow is working quite well at least to get too large options trimmed down. Amazing. Thank you!

So far I'm yet to figure out how to actually force it to respect a max width. No matter what value I set, it seems to be ignored. Here is what is working well for me with text-overflow using tailwindcss in case someone else comes across this. I'm not sure why it works best shoving it in both ul and li but it seems to do best with it in both. But I'm not sure why the outerDivClass max-w-xs seems to be completely ignored:

<MultiSelect
placeholder="Provider type"
name="service"
options={serviceOptions}
allowUserOptions={true}
createOptionMsg="Feel free to enter your own!"
let:option
maxSelect={1}
ulSelectedClass="!flex-nowrap !text-ellipsis !overflow-hidden"
liSelectedClass="!bg-red-100 !text-ellipsis !overflow-hidden "
outerDivClass="shadow-md !bg-white !flex-grow-0 !border-none !rounded-lg !p-3 !max-w-xs"
/>

I'll try to attach a gif of the expansion that I'm seeing in case it isn't clear. It really seems like there is no need for the size to increase which is what is especially confusing to me

I'll keep playing with it and report back if I figure anything out.

[paul-brenner]

Latest iteration seems to not be jumping around in width anymore. I just needed to ditch flex and use grid on the parent class.

<form
method="POST"
use:enhance
class="grid grid-cols-1 justify-items-center w-3/12 bg-gray-50"
>
	<div class="form-control w-5/6">
		<MultiSelect
		placeholder="Provider type"
		name="service"
		options={serviceOptions}
		allowUserOptions={true}
		createOptionMsg="Feel free to enter your own!"
		let:option
		maxSelect={1}
		ulSelectedClass="!flex-nowrap !text-ellipsis !overflow-hidden"
		liSelectedClass="!bg-red-100 !text-ellipsis !overflow-hidden "
		outerDivClass="!bg-white !flex-grow-0  !rounded-lg !p-1"
		/>
	</div>
</form>

It still changes slightly in height for mysterious reasons. I'll probably have to come back to that and see if I can figure out a solution. I suppose I also should be concerned that I'm losing the close x on longer options as shown.

Edit: want me to close this issue or leave it until I figure out a fix for the height changing?

[janosh]

Sorry, was a bit late last night. The code snippet I pasted above had the wrong syntax for passing CSS variables. I fixed it.

The height issue should be easy to fix with e.g. <MultiSelect --sms-min-height="30px" />.

I think you can fix the missing "x" button to remove selected options by passing a <slot name="selected" /> and apply your tailwind classes to the slot rather than the <li> around it.

ulSelectedClass="!flex-nowrap !text-ellipsis !overflow-hidden"
liSelectedClass="!bg-red-100 !text-ellipsis !overflow-hidden "

[paul-brenner]

Took me entirely too long to test this, but I wonder what I'm missing. First I tried:

<MultiSelect
	--sms-min-height="30px"
	--sms-max-height="30px"
	placeholder="Provider type"
	name="service"
	options={serviceOptions}
	allowUserOptions={true}
	let:option
	let:idx
	createOptionMsg="Feel free to enter your own!"
	bind:selected
	maxSelect={1}
	outerDivClass="!bg-white !flex-grow-0  !rounded-lg !p-1"
>
	<slot
		name="selected"
		{option}
		{idx}
		ulSelectedClass="!flex-nowrap !text-ellipsis !overflow-hidden"
		liSelectedClass="!bg-red-100 !text-ellipsis !overflow-hidden">{option}</slot
	>
</MultiSelect>

and then tried changing the slot to

<slot
	name="selected"
	{option}
	{idx}
	class="!flex-nowrap !bg-red-100 !text-ellipsis !overflow-hidden">{option}</slot
>

Both give the same result which seems to just illustrate that I don't know what I'm doing here:

So I still can't keep the height from growing after I pick an option. I also must be missing what you are saying to do about styling the slot because it isn't truncating the text anymore.

[janosh]

Could you post a REPL link that reproduces your problem? Bit hard to work from a screenshot.

[paul-brenner]

Ah, sorry, of course, does this help?
https://stackblitz.com/edit/vitejs-vite-gtuq1h?file=src%2FApp.svelte

[janosh]

@paul-brenner I think you posted the wrong link? All I see is a counter in that StackBlitz.

[paul-brenner]

Ah sorry, should work now, same link: #255