Change the default text of a input select when it is empty?

Ask us anything
1

How can I change the default text of an input select when it is empty

image

Tks

2

It’s a text element inside the component. You can select it in the element panel and modify its properties like any text element in weweb.
image

same thing for the multiselect
image

3

Thanks for the answer, but that’s not the question. The Placeholder I can change. The default text when no data is available is what I would like to change. That text THE LIST IS EMPTY is what I want to change.

4

Ops, my bad :sweat_smile:
Looking at the code of the select element it looks like there is noting to change that. The library used in the component actually allow to set it dynamically so you may want to ask for this option with a request in the public roadmap.
An alternative is to fork the component and add that option yourself, but it requires effort to keep the component in sync with future updates , not really worth it just for the placeholder text.

Another alternative is to add custom css to hack a temporary solution (I don’t recommend it, I’m adding it just for curiosity):
add a class to the select element
image

add this css to the page (globale head or in a style tag inside an html component):

.my-select .multiselect-no-options {
	color: transparent;
}
.my-select .multiselect-no-options::before {
	color: var(--ms-empty-color, #4b5563);
	content: "hello world";
}

image

Keep in mind that this is just a hack with very bad experience for accessibility. Don’t do it to your app.

The best thing you can do is to ask weweb team to add this option.

1 Like
5

Right. I’ll do it. Thank you very much for your attention.

Greetings