есть экран с табами, в первой находится фрагмент с проблемной таблицей. проблема в том, что у нее как будто есть ограничение. в контейнер, связанный с таблицей, отправляется, к примеру, 46 сущностей. через дебаг в контейнере их 46, счетчик строк тоже показывается 46 строк, но по факту добавляется только 42 и добавляется пустой div с классом v-table-row-spacer. если передать больше сущностей, то отображается столько же, но увеличивается высота spacer’а, контейнера v-table-body и контейнера v-tabsheet-tabsheetpanel. если схлопнуть хотя бы одну группу, чтоб количество строк было <=42, то отображается нормально. если смотреть через дебаггер, то в генератор колонки те сущности, которые не отображаются, не передавались. и в html строки в таблицу не добавлялись. выглядит вот так
код экрана, родительского для фрагмента. фрагмент billsFragment:
<layout> <vbox stylename="calculation"> <hbox spacing="true" css="height: fit-content;"> <button id="redefinitionBtn" caption="Пересчитать" visible="false" stylename="button-primary" align="BOTTOM_RIGHT"/> <checkBox id="ignoreFine" align="MIDDLE_CENTER" caption="Не считать пени"/> </hbox> <tabSheet id="calcsTabs" tabCaptionsAsHtml="true" stylename="calc-tabs" width="2900px" css="height: fit-content;"> <tab id="allBillsTab" caption="msg://calculations.accrual" expand="billsFragment"> <fragment id="billsFragment" screen="rtneo_BillListFragment" css="overflow-y:hidden;" height="100%" width="100%"/> </tab> <tab id="paidBillsTab" caption="msg://paid" lazy="true"> <fragment id="historyPaymentsFragment" screen="rtneo_HistoryPaymentsFragment"/> </tab> <tab id="fineTab" caption="msg://penalties"> <table id="fineTable" dataContainer="fineDs"> <columns> <column id="contractNumber" caption="msg://mainContractNumber.caption"/> <column id="debtDocumentNumber" width="250"/> <column id="periodStart"/> <column id="periodEnd"/> <column id="days"/> <column id="rate"/> <column id="sum"/> <column id="sumPaid"/> <column id="formula" width="300"/> </columns> </table> </tab> <tab id="debt" caption="msg://debt"> <fragment id="notPaidBillsFragment" screen="rtneo_BillListFragment" stylename="fragment-content"/> </tab> </tabSheet> </vbox> </layout>
код самого фрагмента:
<layout stylename="bill-list-layout" height="100%" > <vbox id="accrualContainer" stylename="accruals-action-panel"> <hbox stylename="calculations-filter"> <radioButtonGroup caption="msg://radioButtonGroup.caption" orientation="horizontal" id="viewSwitcher" stylename="switcher"/> <datePicker id="dateStartPicker" resolution="MONTH" datatype="localDate" stylename="small small-padding" align="BOTTOM_CENTER"/> <datePicker id="dateEndPicker" resolution="MONTH" datatype="localDate" stylename="small small-padding" align="BOTTOM_CENTER"/> <lookupField caption="msg://popupButton.caption" textInputAllowed="false" id="contractsSelect" inputPrompt="msg://lookupField.inputPrompt" stylename="small"/> <textField id="billNumberFilter" datatype="string" stylename="small" align="BOTTOM_CENTER" inputPrompt="msg://billNumberFilter.inputPrompt" width="200"/> <button id="massBillDownloadButton" caption="msg://massBillDownloadButton.caption" align="BOTTOM_RIGHT" stylename="button-secondary"/> <button id="reconciliationActButton" caption="msg://reconciliationActButton.caption" visible="false" align="BOTTOM_RIGHT" stylename="button-primary"/> <button id="excelBtn" icon="EXCEL_ACTION" stylename="button-secondary" align="BOTTOM_RIGHT" caption="msg://excelBtn.caption"/> </hbox> <vbox id="accrualsCardsPanel" stylename="accruals-cards-panel"> <hbox id="cardColumnCaptionsHBox" stylename="accruals-cards-panel__caption"> <label value="Период"/> <label value="Договор"/> <label value="Счёт на оплату"/> <label value="Начислено, ₽"/> <label value="Пени, ₽"/> <label value="Корректировка, ₽"/> <label value="Задолженность, ₽"/> <label value="Оплачено, ₽"/> <label value=""/> </hbox> <vbox id="accrualsCardsList" stylename="accruals-cards-panel__list"> </vbox> </vbox> <vbox id="accrualsTablePanel" expand="billsTable"> <groupTable id="billsTable" dataContainer="billsTableDc" width="AUTO"> <columns> <group> <column id="period" caption="msg://period" width="150"/> </group> <column id="download" caption="" width="260"/> <column id="documentDate" caption="msg://documentDate.caption" width="150"/> <column id="documentNumber" caption="msg://billNumber" link="true" linkInvoke="showBillTranscriptScreen" width="150"/> <column id="volume" caption="msg://amount" width="150"> <aggregation type="SUM"/> </column> <column id="price" caption="msg://tariff" width="150"/> <column id="sum" caption="msg://summa" width="200"> <aggregation type="SUM"/> </column> <column id="accountingMethod" caption="msg://accountingMethod.caption"/> <column id="type" caption="msg://type.caption"/> <column id="paymentStatus" caption="msg://paymentStatus.caption" width="165"/> <column id="paid" caption="msg://paidColumn.caption" width="200"/> <column id="contractNumber" caption="msg://contractNumber" width="300"/> <column id="relevance" width="150"/> <column id="readyToSendTo1c" width="150"/> <column id="sentTo1c"/> <column id="creationDate" caption="msg://creationDate.caption"/> <column id="creator" caption="msg://creator.caption" width="300"/> </columns> </groupTable> </vbox> </vbox> </layout>
и стили, используемые в экранах:
.calculation {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: max-content 1fr;
align-items: start;
width: 100%;
height: 100%;
position: relative;
overflow: auto;
padding-bottom: 2px;
}.v-slot-calculation-action-panel {
position: sticky;
top: 0;
z-index: 2;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.05);
background-color: var(–default-color);
margin-bottom: 30px;
align-items: center;
height: max-content;
}.calculation-action-panel {
padding: 20px 0;
display: grid;
grid-auto-flow: column;
grid-column-gap: 20px;
justify-content: flex-start;
}.calculation-item {
border: 0;
box-sizing: border-box;
}.calculation-item .v-panel-caption {
padding: 0 13px;
box-sizing: border-box;
}.calculation-item .v-panel-content {
padding: 0 13px;
box-sizing: border-box;
}.calculation-item .v-panel-content .v-widget {
overflow: visible;
}.calculation-item__title {
line-height: 1.6;
font-size: 16px;
user-select: text;
font-weight: 600;
color: var(–black-color)
}.calculation-item__title .label-caption {
color: #017aff;
font-weight: 500;
}.calculation-item__title .label-round-geekblue {
margin-left: 8px;
}.v-slot-calculation-item-image {
margin-right: 12px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}.v-slot-calculation-item-image img {
display: block;
max-width: 220px;
}.calculation-item-description {
margin-bottom: 10px;
line-height: 22px;
}.calculation-item-card__body {
display: grid;
grid-template-columns: 125px 230px repeat(6, minmax(125px, 1fr)) 1fr;
grid-auto-rows: 22px;
grid-gap: 20px;
line-height: 22px;.calculation-item-card__body-item {
font-weight: 600;
color: var(–black-color);
}.calculation-item-card__body-item_contract {
display: flex;
flex-direction: row;
}.calculation-item-card__body-item_contract-name,
.calculation-item-card__body-item_contract-date {
flex-basis: 180px;
flex-grow: 1;
display: inline-block;
margin-right: 2px;
}.calculation-item-card__body-item_contract-name {
font-weight: 600;
color: var(–black-color);
}.calculation-item-card__body-item_dept-sum {
font-weight: 600;
color: var(–dust-red-color)
}.calculation-item-card__body-item_all-documents .v-button-wrap {
display: flex;
flex-wrap: nowrap;
}
}.calculation-item-card__payment {
display: grid;
grid-template-columns: repeat(3, max-content);
grid-gap: 5px;.v-slot-button-secondary {
margin-left: 15px;
}.v-slot-button-secondary,
.v-slot-calculation-item-card__payment-description,
.v-slot-calculation-item-card__payment-sum {
display: flex;
align-items: center;
}.button-secondary {
padding: 0 33px;
}.calculation-item-card__payment-description {
color: var(–neutral-color)
}.calculation-item-card__payment-sum {
font-weight: 600;
color: var(–black-color)
}
}.v-slot-calculation-item-card {
border-bottom: 1px solid var(–border-list-color);
padding: 30px 13px;.calculation-item-card {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: max-content;
grid-gap: 30px
}&:last-child {
border-bottom: 0;
}
}.v-panel-caption-calculation-item {
background-color: var(–default-color);
border: 0;
}.v-slot-fragment-content {
overflow-y: auto;
}.calc-tabs {
.v-tabsheet-tabitemcell .v-caption .v-captiontext {
display: grid;
}.v-caption {
padding: 0;
}.v-captiontext {
grid-template-columns: max-content;
grid-gap: 3px;
color: var(–border-dim-focused-color);
font-size: 16px;
line-height: 24px;
text-align: left;
}.calc-tabs-sum {
color: var(–text-main-color);
font-weight: 600;
font-size: 16px;
line-height: 24px;
}.v-tabsheet-tabitemcell-selected .v-captiontext {
color: var(–primary-color);
font-weight: 600;
}.v-tabsheet-tabitemcell-selected .calc-tabs-sum {
color: var(–primary-color);
}.fragment-content {
padding: 10px;
box-sizing: border-box;
}.fragment-content.fragment-content__fine-table {
padding-top: 60px;
}.v-tabsheet-content {
background-color: #F4F8FF;
}
}.v-tabsheet-tabcontainer-calc-tabs:before {
border-top: 1px solid #d9d9d9;
}.v-tabsheet-tabcontainer-calc-tabs .calc-tabs-sum–red {
color: #cf1322;
}.calculation-item–first {
background: #fff2cf;
}.calculation-item–first .v-panel-caption {
background: transparent;
}.calculations-filter {
display: flex;
gap: 12px;
justify-content: flex-start;
flex-wrap: wrap;
align-items: flex-end;
}.calculations-filter .button-link {
height: 32px;.link {
height: 100%;
}.v-button-wrap {
display: flex;
align-items: center;
height: 100%;
}
}.calculations-filter .v-filterselect {
width: 100%;
}.v-scrollable .v-table-body-wrapper .v-table-body {
min-height: 50px;
}.accruals-cards-panel {
display: grid;
grid-gap: 3px
}.accruals-cards-panel__list {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;.v-slot-calculation-item {
border-radius: 10px;
background-color: var(–default-color);
border: 1px solid var(–border-list-color);
}.v-slot-calculation-item:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}.v-slot-calculation-item:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}.bill-list-layout {
overflow: hidden;
}.accruals-action-panel {
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;.accruals-cards-panel__caption {
display: grid;
grid-template-columns: 125px 230px repeat(6, minmax(125px, 1fr)) 1fr;
grid-gap: 20px;
padding: 20px 13px;
box-sizing: border-box;
background-color: var(–default-text-color);
margin-bottom: -1px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid var(–border-list-color);
}
}