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

[QUESTION] How to center text in the container? #687

Open
opack opened this issue May 6, 2024 · 0 comments
Open

[QUESTION] How to center text in the container? #687

opack opened this issue May 6, 2024 · 0 comments

Comments

@opack
Copy link

opack commented May 6, 2024

Hi!
I am trying to center the selected value in the container. I managed to center the text within the input (although it is not really centered because of an offset on the left that I cannot get rid of), but not the text representing the selected value.

To be clear, here is a screenshot:
image
In this image, 10 is the value, and I would like it to be centered. As we can see, the cursor is centered. The list values is centered too (although honestly I don't understand why...), but no the selected value.
I tried fiddling with class and containerStyles attributes and I manage to change the color of the text, but the text-align property seems to be ignored (or overriden?).
Here is the code resulting in the screenshot:

<script lang="ts">
	import Select from 'svelte-select'

	let items = [
		{ value: '1', label: '1' },
		{ value: '2', label: '2' },
		/* truncated */
		{ value: '21', label: '21' }
	]

	let value = '1'
</script>

<Select {items} clearable={false} bind:value inputStyles="text-align: center;" />

I'm sure it's just a small thing, but I can't get it right 😅 I searched in the issues but found nothing similar.

Thanks for your help

Bonus: please also tell me if there is a way to correctly align the cursor with the center of the input list 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant