Eu codifiquei um script (com a ajuda de um usuário aqui) que me permite expandir uma div selecionada e fazer com que as outras divs se comportem de acordo, esticando igualmente para ajustar o espaço restante (exceto o primeiro cuja largura é fixa).
E aqui está uma imagem do que eu quero alcançar:
Para isso eu uso flex e transitions.
Funciona bem, mas o script jQuery especifica um valor de extensão "400%" (o que é ótimo para teste).
Agora, eu gostaria que a div selecionada fosse expandida / reduzida para se ajustar exatamente ao conteúdo, em vez do valor fixo "400%".
Não tenho ideia de como eu poderia fazer isso.
É possível ?
Tentei clonar a div, ajustá-la ao conteúdo, obter seu valor e, em seguida, usar esse valor para fazer a transição, MAS isso significa que tenho uma largura inicial em porcentagens, mas um valor de destino em pixels. Isso não funciona.
E se eu converter o valor do pixel em porcentagens, o resultado não se ajustará exatamente ao conteúdo por qualquer motivo.
Em todos os casos, essa parece uma maneira um pouco complicada de conseguir o que quero de qualquer maneira.
Não existe nenhuma propriedade flex que possa ser transferida para ajustar o conteúdo de uma div selecionada?
Aqui está o código ( editado / simplificado, para uma melhor leitura ):
var expanded = '';
$(document).on("click", ".div:not(:first-child)", function(e) {
var thisInd =$(this).index();
if(expanded != thisInd) {
//fit clicked fluid div to its content and reset the other fluid divs
$(this).css("width", "400%");
$('.div').not(':first').not(this).css("width", "100%");
expanded = thisInd;
} else {
//reset all fluid divs
$('.div').not(':first').css("width", "100%");
expanded = '';
}
});.wrapper {
overflow: hidden;
width: 100%;
margin-top: 20px;
border: 1px solid black;
display: flex;
justify-content: flex-start;
}
.div {
overflow: hidden;
white-space: nowrap;
border-right: 1px solid black;
text-align:center;
}
.div:first-child {
min-width: 36px;
background: #999;
}
.div:not(:first-child) {
width: 100%;
transition: width 1s;
}
.div:not(:first-child) span {
background: #ddd;
}
.div:last-child {
border-right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click on the div you want to fit/reset (except the first div)
<div class="wrapper">
<div class="div"><span>Fixed</span></div>
<div class="div"><span>Fluid (long long long long long text)</span></div>
<div class="div"><span>Fluid</span></div>
<div class="div"><span>Fluid</span></div>
</div>Aqui está o jsfiddle:
https://jsfiddle.net/zajsLrxp/1/
EDIT: Aqui está a minha solução de trabalho com a ajuda de todos (tamanhos atualizados no redimensionamento da janela + número de divs e largura da primeira coluna calculada dinamicamente):
var tableWidth;
var expanded = '';
var fixedDivWidth = 0;
var flexPercentage = 100/($('.column').length-1);
$(document).ready(function() {
// Set width of first fixed column
$('.column:first-child .cell .fit').each(function() {
var tempFixedDivWidth = $(this)[0].getBoundingClientRect().width;
if( tempFixedDivWidth > fixedDivWidth ){fixedDivWidth = tempFixedDivWidth;}
});
$('.column:first-child' ).css('min-width',fixedDivWidth+'px')
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
})
$(window).resize( function() {
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
expanded = '';
})
$(document).on("click", ".column:not(:first-child)", function(e) {
var thisInd =$(this).index();
// if first click on a fluid column
if(expanded != thisInd)
{
var fitDivWidth=0;
// Set width of selected fluid column
$(this).find('.fit').each(function() {
var c = $(this)[0].getBoundingClientRect().width;
if( c > fitDivWidth ){fitDivWidth = c;}
});
tableWidth = $('.mainTable')[0].getBoundingClientRect().width;
$(this).css('flex','0 0 '+ 100/(tableWidth/fitDivWidth) +'%')
// Use remaining space equally for all other fluid column
$('.column').not(':first').not(this).css('flex','1 1 '+flexPercentage+'%')
expanded = thisInd;
}
// if second click on a fluid column
else
{
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
expanded = '';
}
});body{
font-family: 'Arial';
font-size: 12px;
padding: 20px;
}
.mainTable {
overflow: hidden;
width: 100%;
border: 1px solid black;
display: flex;
margin-top : 20px;
}
.cell{
height: 32px;
border-top: 1px solid black;
white-space: nowrap;
}
.cell:first-child{
background: #ccc;
border-top: none;
}
.column {
border-right: 1px solid black;
transition: flex 0.4s;
overflow: hidden;
line-height: 32px;
text-align: center;
}
.column:first-child {
background: #ccc;
}
.column:last-child {
border-right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="text">Click on the header div you want to fit/reset (except the first one which is fixed)</span>
<div class="mainTable">
<div class="column">
<div class="cell"><span class="fit">Propriété</span></div>
<div class="cell"><span class="fit">Artisan 45</span></div>
<div class="cell"><span class="fit">Waterloo 528</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Adresse</span></div>
<div class="cell"><span class="fit">Rue du puit n° 45 (E2)</span></div>
<div class="cell"><span class="fit">Chaussée de Waterloo n° 528 (E1)</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Commune</span></div>
<div class="cell"><span class="fit">Ixelles</span></div>
<div class="cell"><span class="fit">Watermael-Boitsfort</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Ville</span></div>
<div class="cell"><span class="fit">Marche-en-Famenne</span></div>
<div class="cell"><span class="fit">Bruxelles</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Surface</span></div>
<div class="cell"><span class="fit">120 m<sup>2</sup></span></div>
<div class="cell"><span class="fit">350 m<sup>2</sup></span></div>
</div>
</div>E aqui está um exemplo completo no trabalho (estilos + preenchimento + mais dados):
https://jsfiddle.net/zrqLowx0/2/
Obrigado a todos!
11
Tenha a gentileza de adicionar um resultado final à sua pergunta mostrando o que você criou depois de tudo isso. Estou genuinamente interessado no que parece. Obrigado! (... talvez algumas dicas sobre o que é usado? ...)
—
Rene van der Lende
Ok, farei isso assim que limpei meu script de todos os elementos desnecessários (em alguns minutos, eu acho). Dito isto, como faço isso? Eu apenas edito a postagem original e adiciono minha opinião sobre isso, embora a resposta do Azametzin esteja perfeitamente bem? Eu mudo algumas coisas, mas é 90% o mesmo (eu ficaria feliz em mostrar isso) ..
—
Bachir Messaouri
Aqui está o ponto: eu emulo uma espécie de planilha do Excel e quero que as pessoas possam clicar em uma coluna específica para ajustar-se ao conteúdo. Normalmente, uma tabela funcionaria, mas as colunas não estão se comportando corretamente quando se trata de redimensioná-las da maneira que eu quero (fácil de expandir uma coluna por vez, mas é difícil fazer com que as outras se comportem em tempo real, a fim de ocupar o espaço restante da maneira flex faria para divs. Eles apenas se expandem erraticamente. Fiz algumas pesquisas e o que eu quero é impossível com tabelas). Há outras razões pelas quais não uso uma tabela ou dataTable, mas está fora do escopo desta postagem.
—
Bachir Messaouri 28/02
Com bastante facilidade, basta clicar em 'editar', ir para o final da pergunta e começar a adicionar algumas considerações pró-áicas, incluindo um novo trecho (tudo isso). Certifique-se de "ocultar o snippet" por padrão (caixa de seleção inferior esquerda), menos invasivo / perturbador para os "novos leitores". Meu primeiro pensamento foi que você o usaria para alguns widgets, ícones e tudo mais. Planilha huh, eu tenho uma tela inteira, estendendo-se por todo o lado para cima / baixo / esquerda / direita, usando os mesmos princípios discutidos aqui (se você estiver interessado).
—
Rene van der Lende 28/02
Ótimo, você foi a milha extra postando o resultado final. Torna a resposta a perguntas sobre MUITO mais gratificante! Cudos ...
—
Rene van der Lende 28/02