I have a select with long values.
When I open the select, the displayed value exceeds the width of the page.
I want it to be limited to the width of the select itself. How do I do this?
Thank you!
I have a select with long values.
Best way we have found to do this is to truncate the text value and add a Tooltip with on hover applied to it. Not perfect but Select inputs are not really that friendly to style using the default types without the implementation of custom JS library. Maybe someone else has a better solution...?
1 Like
This could be useful.
This could be helpful. I managed to do this. But if there is another way, that would be good, like breaking the line
You can just use the Truncate formatter for the Text binding used in the select menu.
1 Like
You can do this but not natively. Would require the use of some JavaScript and customisation. Which may or may not work in some browsers/mobile devices (and your functionality will break). So really is best to stick to the above method if you can... That way your Users won't have any issues.
I managed to do it with the select not connected to a server_connect, code below:
select class="form-select"
option class="text-truncate" value="1">Texto muito longo que será truncado com reticências
Outro texto longo que será truncado
/select
But I want to know how to do it for the code below that is connected to a SC
select id="select_topicos" class="form-select" name="topico" dmx-bind:options="server_conect" `="" optionvalue="topico_id" optiontext="nome" required="" data-msg-required="Obrigatório" dmx-on:changed="server_conect" dmx-bind:value="cronograma.data.topico_id">
/select
As i explained use the truncate formatter on the text binding.
1 Like