Ho codificato uno script (con l'aiuto di un utente qui) che mi consente di espandere un div selezionato e di fare in modo che gli altri div si comportino di conseguenza allungando allo stesso modo per adattarsi allo spazio rimanente (tranne il primo a cui la larghezza è fissa).
Ed ecco una foto di ciò che voglio ottenere:
Per questo uso flex e transizioni.
Funziona bene, ma lo script jQuery specifica un valore di allungamento "400%" (che è ottimo per i test).
Ora vorrei che il div selezionato si espandesse / restringesse per adattarsi esattamente al contenuto anziché al valore fisso "400%".
Non ho idea di come potrei farlo.
È possibile ?
Ho cercato di clonare il div, adattarlo al contenuto, ottenere il suo valore e quindi utilizzare questo valore per la transizione MA questo significa che ho una larghezza iniziale in percentuale ma un valore target in pixel. Non funziona
E se converto il valore in pixel in percentuale, il risultato non si adatta esattamente al contenuto per qualsiasi motivo.
In tutti i casi, questo sembra un po 'un modo complicato per ottenere ciò che voglio comunque.
Non esiste alcuna proprietà flessibile che potrebbe essere trasferita per adattarsi al contenuto di un div selezionato?
Ecco il codice ( modificato / semplificato per una lettura migliore ):
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>Ecco il jsfiddle:
https://jsfiddle.net/zajsLrxp/1/
EDIT: Ecco la mia soluzione di lavoro con l'aiuto di tutti voi (dimensioni aggiornate sul ridimensionamento della finestra + numero di div e larghezza della prima colonna calcolata 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>Ed ecco un esempio completo al lavoro (stili + imbottitura + più dati):
https://jsfiddle.net/zrqLowx0/2/
Grazie a tutti !
1
Sii gentile abbastanza da aggiungere un risultato finale alla tua domanda mostrando ciò che hai creato dopo tutto questo. Sono sinceramente interessato a come appare. Grazie! (... forse qualche intuizione su a cosa serve? ...)
—
Rene van der Lende,
Ok, lo farò non appena avrò pulito la mia sceneggiatura da tutti gli elementi non necessari (credo che tra qualche minuto). Detto questo, come posso farlo? Devo solo modificare il post originale e aggiungere la mia opinione su questo anche se la risposta di Azametzin va benissimo? Ho cambiato alcune cose ma è uguale al 90% (sarei felice di mostrarlo però) ..
—
Bachir Messaouri
Ecco il punto: emulo una specie di foglio di calcolo Excel e voglio che le persone siano in grado di fare clic su una determinata colonna per adattarsi al contenuto. Normalmente una tabella farebbe ma le colonne non si comportano correttamente quando si tratta di ridimensionarle nel modo desiderato (facile espandere una colonna alla volta ma è difficile far sì che le altre si comportino in tempo reale per occupare lo spazio rimanente nel modo flex farebbe per i div. Si espandono in modo irregolare. Ho fatto qualche ricerca e ciò che voglio è impossibile con le tabelle). Ci sono altri motivi per cui non utilizzo una tabella o una tabella dei dati, ma non rientra nell'ambito di questo post.
—
Bachir Messaouri,
Abbastanza facile, basta premere "modifica", andare alla fine della domanda e iniziare ad aggiungere alcune ponderazioni prozaiche, incluso un nuovo frammento (tutto). Assicurati di "nascondere lo snippet" per impostazione predefinita (casella di controllo in basso a sinistra), meno invadente / che distrae per i "nuovi lettori". Il mio primo pensiero è stato che lo avresti usato per alcuni widget, icone e icone simili a "armoniche". Foglio di calcolo eh, ho un po 'di schermo intero, che si estende in tutto il luogo su / giù / a sinistra / a destra in giro usando gli stessi principi discussi qui (se sei interessato).
—
Rene van der Lende
Fantastico hai fatto il possibile per pubblicare il risultato finale. Rende le risposte alle domande su COSÌ molto più gratificanti! Cudos ...
—
Rene van der Lende,