-1

Estou tentando limitar o tamanho do option de acordo com o tamanho do campo (select), para não sair da página ou até mesmo da janela do navegador. Existe alguma forma de controlar?

Tentei limitar com width e max-width, porém não consegui. Apenas consegui aplicar no select.

<select class="form-control" data-val="true" data-val-number="The field IdProduto must be a number." data-val-required="O campo IdProduto é obrigatório." id="Status" name="IdProduto"  style="width: 120px"><option value="">&lt; Selecione &gt;</option>
<option value="4">TESTE PRODUTO COM NOME MUITO GRANDE PARA DROPDOWN</option>
</select>

O select não recebe nenhuma modificação do javascript e css.

Campo "produto" com o dropdown maior que o campo

E uma pergunta adicional: Quando eu uso o modo responsivo do navegador, a exibição do dropdown fica diferente. Saberiam me explicar o porquê? Até onde eu sei, no mobile e tablet, é exibido um "modal" com as opções para serem selecionados.

inserir a descrição da imagem aqui

1 Resposta 1

0

Você já tentou adicionar ao CSS:

word-break: break-word;

Esse serve para evitar o vazamento das palavras que normalmente não seriam quebradas .

Ou então:

overflow: hidden;

Este resolve o problema quando o texto é muito grande para caber numa área.

3
  • 1
    já testou esses estilos no exemplo da pergunta? me parece mais uma sugestão que uma resposta, seria interessante mostrar que funciona com um exemplo, ou deixar apenas um comentario com uma sugestão Commented 13/01/2022 às 16:00
  • Já tentei e não funcionou essas sugestões. Até deixei disponível o código para tentarem também, caso consigam. Agradeço pela sugestão, mas sigo em busca dessa resposta. Commented 13/01/2022 às 16:27
  • Minha intenção era apenas deixar um comentário com sugestão, mas infelizmente não possuo a pontuação necessária, por isso a resposta. @AlexandreMattosdeCastro De fato é complicado. Pesquisei em diversos lugares e muitas pessoas não conseguiram resolver isso também. Talvez você poderia procurar uma solução com javascript, mas não sei se é possível.
    – Mari
    Commented 14/01/2022 às 17:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .