Использование: .Net 8 и Blazor и ТОЛЬКО css/html/c# — НЕТ JS
Цель: динамически сопоставить все кнопки с самой большой кнопкой в любой из ячеек. Поскольку любая кнопка может изменить размер (обычно временно становится больше, прежде чем снова сжиматься), все кнопки должны измениться до того же размера, что и самая большая кнопка, но НИКОГДА не расширяйтесь до размера самой большой кнопки (т. е., если таблицу принудительно развернуть полностью, кнопки не будут расширяться до наибольшего размера кнопки. Вместо этого данные/входные данные в других ячейках строки должны заполнить пространство). В некоторых случаях в одной строке может быть 2 кнопки, а в другой — только 1. Строка с единственной кнопкой должна по-прежнему иметь тот же размер, что и самая большая кнопка.
Между кнопками существует зазор 0,5 дюйма, и кнопки могут располагаться в столбце или строке. Но опять же всегда должен быть размер самой большой кнопки
В идеале я хочу сделать это БЕЗ JS. Пожалуйста, используйте исключительно CSS/html/C#, я хочу, насколько это возможно, избегать JS в Blazor.
В настоящее время:
У меня есть компонент таблицы, TableButtonContainer и пользовательская кнопка. Все они точно знают, сколько кнопок находится в TableButtonContainer.
Компонент Table Button — это просто оболочка для кнопок:
/* Table Button Component / Simply a Wrapper (Actually Called )*/
/*Custom Button Component Actually using here, but showing as the actual format */
Как это выглядит на самом деле:
Я пробовал большое количество решений с использованием сеток данных, гибкости, строк и столбцов, но мне никогда не удавалось заставить их работать идеально.
Моим ближайшим решением было использование повторения шаблона сетки. Это сделает все кнопки одинакового размера и заставит кнопку в той же ячейке расшириться до того же размера, но другие кнопки в других строках не будут расширяться:
Стили TableButtonContainer:
display:grid;
grid-template-columns: repeat(1, 1fr); /*For vertrical buttons*/
grid-template-columns: repeat(Children.Count, 1fr); /*for row buttons - Children.Count is the # of buttons in the the TableButtonContainer. */
width: max-content;
gap : .5rem;
Table.MaxChildren — отслеживает наибольшее количество кнопок в любой из строк.
Table.MinChildren — отслеживает наименьшее количество кнопок в любой из строк.
стиль кнопок:
width: 100%;
Подробнее здесь: https://stackoverflow.com/questions/798 ... without-js
