(см. Widgets/Table.js::renderTableRowsHtml). Без flex:1
и min-width:0 поля с width:100% (form-control) при orientation:horizontal не сжимаются
(см. ".form-container *, .modal-body * { flex-shrink: 0; }" в client-form.css) и вылезают
друг на друга — например, Body вылезал поверх колонки с кнопками в Doc_Tickets.Element. */
/* Ячейка группы сама по себе — обычный , не
, поэтому по умолчанию не растягивается
на высоту строки, даже если сосед-колонка (напр. кнопки) её выше — height:100% отталкивается от
родительской | , у которой высота уже определена высотой строки таблицы. Без этого дочернему
полю (см. node.height в Widgets/Field.js) не от чего было бы взять "100%". */
.tcg-cell {
height: 100%;
}
.tcg-cell > .tcg-item {
flex: 1 1 0;
min-width: 0;
}
.tcg-cell > .tcg-item-button {
flex: 0 0 auto;
}
/* Обёртка .tcg-item-button растягивается по кросс-оси на всю ширину группы (align-items:stretch
по умолчанию), но сама кнопка внутри — inline-block по размеру своего текста ("Open" уже
"Delete message"), поэтому визуально были разной ширины несмотря на одинаковые обёртки.
width:100% — кнопка занимает всю обёртку, все кнопки одной группы становятся одной ширины. */
.tcg-cell > .tcg-item-button > .form-button {
width: 100%;
}
/* Попап поиска по колонке (см. Widgets/Table.js::showTableSearchPopup) и его баннер активного
фильтра рисуют свою разметку сами (не через Field.js/Button.js) — своя независимая копия
.field-caption/.form-control/.form-button, не обязана меняться вместе с формой. */
/* margin-bottom убран (2026-09-30) — расстояние до контрола теперь даёт gap родителя
(.field-group, см. client-form.css), а не собственный отступ подписи. */
.field-caption {
display: block;
font-size: var(--font-size, 14px);
font-weight: normal;
color: #000;
}
.form-control {
width: 100%;
padding: calc(var(--spacing, 10px) / 2);
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-family: inherit;
font-size: var(--font-size, 14px);
font-weight: normal;
color: #000;
}
/* margin-right убран (2026-09-30) — расстояние до соседней кнопки теперь даёт gap родителя
(тут — .table-search-banner/попап поиска, см. Widgets/Table.js), а не собственный отступ кнопки. */
.form-button {
padding: 10px 15px;
background-color: #0078d7;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-button:hover {
background-color: #005a9e;
}
.form-button:disabled {
background-color: #aaa;
cursor: not-allowed;
opacity: 0.7;
}
/* Popup поиска по ref-колонке использует тот же combobox-паттерн, что и Widgets/Combobox.js —
своя копия классов (см. комментарий в Combobox.css). */
.combobox-control {
position: relative;
}
.combobox-input-row {
display: flex;
gap: var(--spacing, 10px);
align-items: center;
}
.combobox-input-row .combobox-display {
flex: 1;
}
.combobox-clear {
padding: 4px 8px;
background: none;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
color: #666;
font-size: calc(var(--font-size, 14px) + 2px);
line-height: 1;
flex-shrink: 0;
}
.combobox-clear:hover { background: #f0f0f0; }
.combobox-select-btn {
padding: 4px 8px;
background: none;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
color: #666;
font-size: calc(var(--font-size, 14px) + 2px);
line-height: 1;
flex-shrink: 0;
}
.combobox-select-btn:hover { background: #f0f0f0; }
.combobox-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
max-height: 220px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
.combobox-dropdown.open { display: block; }
.combobox-dropdown.drop-up {
top: auto;
bottom: 100%;
border-top: 1px solid #ccc;
border-bottom: none;
border-radius: 4px 4px 0 0;
box-shadow: 0 -4px 8px rgba(0,0,0,0.12);
}
.combobox-item {
padding: 6px 10px;
cursor: pointer;
font-size: var(--font-size, 14px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.combobox-item:hover,
.combobox-item.active { background: #e8f0fe; color: #1a56db; }
.combobox-empty {
padding: 6px 10px;
color: #888;
font-size: var(--font-size, 14px);
font-style: italic;
}
|