Zakodowałem skrypt (z pomocą tutaj użytkownika), który pozwala mi rozwinąć wybrany div i sprawić, aby inne div zachowywały się odpowiednio, rozciągając się równo, aby dopasować się do pozostałej przestrzeni (z wyjątkiem pierwszego, którego szerokość jest stała).
A oto zdjęcie tego, co chcę osiągnąć:
Do tego używam flexu i przejść.
Działa dobrze, ale skrypt jQuery określa „400%” wartość rozciągnięcia (co jest świetne do testowania).
Teraz chciałbym, aby wybrany div rozszerzył / zmniejszył, aby dokładnie pasował do zawartości zamiast stałej wartości „400%”.
Nie mam pojęcia, jak to zrobić.
Czy to możliwe ?
Próbowałem sklonować div, dopasować go do treści, uzyskać jego wartość, a następnie użyć tej wartości do przejścia, ALE oznacza to, że mam początkową szerokość w procentach, ale wartość docelową w pikselach. To nie działa.
A jeśli przekonwertuję wartość piksela w procentach, wynik nie pasuje dokładnie do treści z jakiegokolwiek powodu.
We wszystkich przypadkach i tak wydaje się to nieco skomplikowanym sposobem na osiągnięcie tego, czego chcę.
Czy nie ma żadnej właściwości flex, którą można by przenieść, aby dopasować ją do zawartości wybranego div?
Oto kod ( edytowany / uproszczony, ponieważ dla lepszego odczytu ):
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>Oto jsfiddle:
https://jsfiddle.net/zajsLrxp/1/
EDYCJA: Oto moje działające rozwiązanie z pomocą was wszystkich (rozmiary aktualizowane przy zmianie rozmiaru okna + liczba div i szerokość pierwszej kolumny obliczana dynamicznie):
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>A oto pełny przykład pracy (style + padding + więcej danych):
https://jsfiddle.net/zrqLowx0/2/
Dziękuję wam wszystkim !
1
Bądź uprzejmy, aby dodać końcowy wynik do pytania pokazujący, co stworzyłeś po tym wszystkim. Naprawdę interesuje mnie to, jak to wygląda. Dzięki! (... może jakiś wgląd w to, do czego służy? ...)
—
Rene van der Lende
Ok, zrobię to, jak tylko wyczyszczę skrypt ze wszystkich niepotrzebnych elementów (chyba za kilka minut). To powiedziawszy, jak to zrobić? Czy po prostu edytuję oryginalny post i dodam swoje zdanie na ten temat, mimo że odpowiedź Azametzina jest w porządku?
—
Zmieniam
Chodzi o to: emuluję rodzaj arkusza kalkulacyjnego programu Excel i chcę, aby ludzie mogli klikać określoną kolumnę w celu dopasowania do treści. Zwykle robiłaby to tabela, ale kolumny nie zachowują się poprawnie, jeśli chodzi o zmianę ich rozmiaru tak, jak chcę (łatwe rozwijanie jednej kolumny na raz, ale trudno jest sprawić, aby pozostałe zachowywały się w czasie rzeczywistym, aby zajmować pozostałą przestrzeń flex zrobiłby dla div. Po prostu rozwijają się nieregularnie. Przeprowadziłem badania i to, czego chcę, jest niemożliwe przy tabelach). Są inne powody, dla których nie używam tabeli ani dataTable, ale wykracza to poza zakres tego postu.
—
Bachir Messaouri
Łatwo, po prostu wciśnij „edytuj”, przejdź do końca pytania i zacznij dodawać prozaiczne przemyślenia, w tym nowy fragment (całość). Pamiętaj, aby domyślnie „ukryć fragment” (pole wyboru u dołu po lewej), mniej natrętny / rozpraszający dla „nowych czytelników”. Moją pierwszą myślą było to, że użyjesz go do stworzenia fantazyjnego widżetu, ikon i wszystkich podobnych do „harmonijki”. Arkusz kalkulacyjny huh, mam jakiś pełny ekran, rozciągam się wszędzie w górę / w dół / w lewo / w prawo, układając się według tych samych zasad omówionych tutaj (jeśli jesteś zainteresowany).
—
Rene van der Lende
Świetnie, że zrobiłeś o wiele więcej, publikując wynik końcowy. Sprawia, że odpowiadanie na pytania dotyczące SO jest o wiele bardziej satysfakcjonujące! Cudos ...
—
Rene van der Lende