Я зашифрував сценарій (за допомогою користувача тут), який дозволяє мені розширити вибраний div і змусити інші діви відповідно поводитись однаково, розтягуючи рівномірно, щоб підходити до залишків місця (крім першого, ширина якого фіксована).
А ось картина того, чого я хочу досягти:
Для цього я використовую флекс та переходи.
Він працює добре, але сценарій jQuery визначає значення розтягування "400%" (що чудово підходить для тестування).
Тепер я хотів би, щоб вибраний div розширити / зменшити, щоб точно відповідати вмісту замість фіксованого значення "400%".
Я поняття не маю, як я міг це зробити.
Це можливо ?
Я спробував клонувати div, підключити його до вмісту, отримати його значення, а потім використати це значення для переходу, АЛЕ це означає, що я маю початкову ширину у відсотках, але цільове значення в пікселях. Це не працює.
І якщо я перетворюю значення пікселя у відсотки, то результат не точно відповідає вмісту з будь-якої причини.
У всіх випадках це здається трохи складним способом досягти того, чого я хочу в будь-якому випадку.
Чи не існує жодної властивості flex, яку можна було б перенести, щоб відповідати вмісту вибраного div?
Ось код ( відредагований / спрощений, оскільки для кращого читання ):
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>Ось jsfiddle:
https://jsfiddle.net/zajsLrxp/1/
EDIT: Ось моє робоче рішення за допомогою всіх вас (розміри оновлені на розмірі вікна + кількість дивок та динамічно обчислюється ширина першого стовпця):
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>І ось повноцінний приклад на роботі (стилі + padding + більше даних):
https://jsfiddle.net/zrqLowx0/2/
Дякую всім !
1
Будь ласка, будьте ласкаві, щоб додати остаточний результат до свого запитання, що показує, що ви створили після всього цього. Мене ретельно цікавить, як це виглядає. Дякую! (... можливо, деяке розуміння того, для чого воно використовується? ...)
—
Рене ван дер Ленде,
Гаразд, я зроблю це, як тільки очистив свій сценарій від усіх непотрібних елементів (за кілька хвилин я здогадуюсь). Це сказало: як це зробити? Чи просто я редагую оригінальну публікацію і додаю свою думку, навіть якщо відповідь Азаметціна є ідеальною? Я
—
змінюю
Ось у цьому суть: я емілюю якусь таблицю Excel та хочу, щоб люди могли натискати певний стовпець, щоб відповідати вмісту. Зазвичай таблиця буде робити, але стовпці ведуть себе не правильно, коли йдеться про їх зміну так, як я хочу (легко розгортати одну колонку за один раз, але важко змусити інших вести себе в режимі реального часу, щоб зайняти простір, що залишився flex робив би для дівок. Вони просто невпинно розширюються. Я зробив деякі дослідження, і те, що я хочу, неможливо за допомогою таблиць). Є й інші причини, по яких я не використовую таблицю або таблицю даних, але це поза межами цієї публікації.
—
Бачір Мессаурі
Досить просто, просто натисніть «редагувати», перейдіть до кінця питання і почніть додавати деякі прозаїчні розмірковування, включаючи новий фрагмент (усе це). Переконайтеся, що "приховати фрагмент" за замовчуванням (нижній лівий прапорець), менш нав'язливий / відволікаючий для "нових читачів". Перша моя думка полягала в тому, що ти збираєшся використовувати його для якогось вигадливого віджета, що нагадує гармоніку, піктограми тощо. Електронна таблиця, так, у мене є повний екран, який розтягується по всьому місцю вгору / вниз / вліво / вправо, лежачи навколо, використовуючи ті самі принципи, які обговорювалися тут (якщо вам цікаво).
—
Рене ван дер Ленде
Чудово, що ви пройшли додаткову милю, розмістивши остаточний результат. Робить відповіді на запитання про ТАК набагато кориснішим! Cudos ...
—
Rene van der Lende