Problema
Eu tenho um <select>onde um dos seus <option>valores de texto é muito longo. Quero que o <select>redimensione para que nunca seja mais largo que seu pai, mesmo que precise cortar o texto exibido. max-width: 100%deveria fazer isso.
Antes de redimensionar:
O que eu quero depois de redimensionar:
Mas se você carregar este exemplo jsFiddle e redimensionar a largura do painel Resultado para ser menor que a largura do <select>, poderá ver que a seleção dentro da <fieldset>falha ao diminuir sua largura.
O que estou vendo após o redimensionamento:
No entanto, a página equivalente com a em <div>vez de a<fieldset> é dimensionada corretamente. Você pode ver isso e testar suas alterações mais facilmente se tiver um <fieldset>e um <div>ao lado do outro em uma página . E se você excluir as <fieldset>tags ao redor , o redimensionamento funcionará. De <fieldset>alguma forma, a tag está causando o redimensionamento horizontal.
O <fieldset>ato é como se houvesse uma regra CSS fieldset { min-width: min-content; }. ( min-contentsignifica, grosso modo, a menor largura que não causa a transbordamento de uma criança.) Se eu substituir a <fieldset>com uma <div>pormin-width: min-content , ela parecerá exatamente a mesma. No entanto, não há regra min-contentnos meus estilos, na folha de estilo padrão do navegador ou visível no CSS Inspector do Firebug. Tentei substituir todos os estilos visíveis no <fieldset>CSS Inspector do Firebug e na folha de estilo padrão do Firefox forms.css , mas isso não ajudou. Substituindo especificamente min-widthe widthtambém não fez nada.
Código
HTML do conjunto de campos:
<fieldset>
<div class="wrapper">
<select id="section" name="section">
<option value="-1"></option>
<option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
<option value="1480">Subcontractor</option>
<option value="3181">Valley</option>
<option value="3180">Ventura</option>
<option value="3220">Very Newest Section</option>
<option value="1481">Visitor</option>
<option value="3200">N/A</option>
</select>
</div>
</fieldset>Meu CSS que deveria estar funcionando, mas não é:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}Redefinir as widthpropriedades para os padrões não faz nada:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}CSS adicional no qual tento e não consigo corrigir o problema :
/* try lots of things to fix the width, with no success: */
fieldset {
display: block;
min-width: 0;
max-width: 100%;
width: 100%;
text-overflow: clip;
}
div.wrapper {
width: 100%;
}
select {
overflow: hidden;
}Mais detalhes
O problema também ocorre neste exemplo mais abrangente e complicado do jsFiddle , que é mais semelhante à página da Web que estou tentando corrigir. Você pode ver que isso <select>não é o problema - um bloco embutido divtambém falha ao redimensionar. Embora este exemplo seja mais complicado, suponho que a correção para o caso simples acima também conserte esse caso mais complicado.
[Editar: veja os detalhes de suporte do navegador abaixo.]
Uma coisa curiosa sobre esse problema é que, se você definirdiv.wrapper { width: 50%; } , as <fieldset>paradas <select>serão redimensionadas no ponto e o tamanho completo atingirá a borda da viewport. O redimensionamento acontece como se <select>tivesse width: 100%, mesmo que <select>pareça width: 50%.
Se você dar a <select>si mesmowidth: 50% , que o comportamento não ocorre; a largura é simplesmente definida corretamente.
Eu não entendo o motivo dessa diferença. Mas isso pode não ser relevante.
Eu também achei a pergunta muito semelhante HTML fieldset permite que as crianças se expandam indefinidamente . O solicitante não conseguiu encontrar uma solução e acha que não há solução além de remover o <fieldset>. Mas eu estou pensando, se é realmente impossível corrigir a <fieldset>tela, por que isso? O que, em <fieldset>'s especificação ou padrão CSS ( como desta questão ) faz com que este comportamento? Esse comportamento especial provavelmente está documentado em algum lugar, pois vários navegadores funcionam assim.
Objetivo e requisitos em segundo plano
O motivo pelo qual estou tentando fazer isso é como parte da criação de estilos para dispositivos móveis em uma página existente em formato grande. O formulário possui várias seções, e uma parte dele está envolvida em um <fieldset>. Em um smartphone (ou se você reduzir a janela do navegador), a parte da página com <fieldset>é muito maior que o restante do formulário. A maior parte do formulário restringe sua largura, mas a seção com <fieldset>não, forçando o usuário a diminuir o zoom ou rolar para a direita para ver toda a seção.
Tenho o cuidado de simplesmente remover o <fieldset>, pois ele é gerado em muitas páginas em um aplicativo grande, e não tenho certeza de quais seletores em CSS ou JavaScript podem depender dele.
Eu posso usar JavaScript se precisar, e uma solução JavaScript é melhor que nada. Mas se o JavaScript é a única maneira de fazer isso, ficaria curioso para ouvir uma explicação sobre por que isso não é possível usando apenas CSS e HTML.
Editar: suporte ao navegador
No site, preciso oferecer suporte ao Internet Explorer 8 e posterior (acabamos de deixar o suporte para o IE7), o Firefox mais recente e o Chrome mais recente. Esta página em particular também deve funcionar em smartphones iOS e Android. O comportamento levemente degradado, mas ainda utilizável, é aceitável para o Internet Explorer 8.
Testei novamente meu fieldsetexemplo quebrado em diferentes navegadores. Na verdade, ele já funciona nesses navegadores:
- Internet Explorer 8, 9 e 10
- cromada
- Chrome para Android
Ele quebra nesses navegadores:
- Raposa de fogo
- Firefox para Android
- Internet Explorer 7
Assim, o único navegador que me interessa é o Firefox (no computador e no celular). Se o código fosse corrigido e funcionasse no Firefox sem quebrá-lo em outros navegadores, isso resolveria o meu problema.
O modelo HTML do site usa comentários condicionais do Internet Explorer para adicionar classes como .ie8e .oldieao <html>elemento. Você pode usar essas classes em seu CSS se precisar solucionar as diferenças de estilo no IE. As classes adicionadas são as mesmas da versão antiga do HTML5 Boilerplate .
<fieldset>(ou div.wrapper) a largura que for necessária e select { width:100% }. max-widthparece fornecer ao elemento uma parte da largura original de seu pai , depois não é dimensionado, enquanto que widthé dimensionado com seu pai. Eu acho que vai fazer o que você quer (mas eu poderia ter entendido mal). No seu violino mais complexo, tente dar aos campos da coluna esquerda uma largura de% e uma largura de pixel mínima. Em seguida, forneça os campos à direita 100 - (campos da esquerda -% - largura)% de largura.