Closed suyogupatil closed 4 years ago
Can you link a JSFiddle where I can reproduce the problem ?
I don't have JSFiddle link as it is in my application. However, below is the CSS:
/* TREE TABLE */
.cp_tree-table {
font-size: 14px;
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
display: inline;
}
/* Cells */
.cp_tree-table .cp_tree-table_cell,
.cp_tree-table .cp_tree-table_header-cell {
display: flex;
align-items: center;
padding: 0 10px;
}
/* Index cell */
.cp_tree-table .cp_tree-table_cell .toggle-button {
position: relative;
display: inline-block;
border: none;
height: 14px;
vertical-align: middle;
padding: 0 5px 0 0;
margin: 0;
cursor: pointer;
background-color: transparent;
outline: none;
}
.cp_tree-table .cp_tree-table_cell .toggle-button::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #040402 transparent transparent transparent;
padding: 0;
vertical-align: middle;
}
.cp_tree-table .cp_tree-table_cell .toggle-button
.cp_tree-table .cp_tree-table_cell .toggle-button+span {
vertical-align: middle;
}
.cp_tree-table .cp_tree-table_cell>.without-children>span {
padding-left: 15px;
}
.cp_tree-table .cp_tree-table_cell>.with-children>span {
font-weight: 600;
}
.cp_tree-table .cp_tree-table_cell .toggle-button::after{
height: 12px;
}
.cp_tree-table_cell .checkbox, .radio {
margin-bottom: 12px;
margin-top: 15px;
}
/* .cp_tree-table_viewport {
max-height: 50vh !important;
} */
.login-page .input-group-addon:last-child {
background: #000;
border: 1px solid #000 !important;
}
.cp_tree-table_cell .form-control {
height: 20px !important;
line-height: 1;
margin-top: 4px !important;
}
.cp_tree-table_viewport::-webkit-scrollbar-thumb {
background: #848d94 !important;
}
.cp_tree-table_viewport::-webkit-scrollbar-track {
background: #d2d2d2;
border: 1px solid #b1b5b8;
}
.cp_tree-table_viewport {
overflow-y: auto !important;
}
.cp_tree-table_viewport::-webkit-scrollbar {
display: inline !important;
}
and source:
<TreeTable
value={treeValue}
onChange={this.handleOnChange}>
<TreeTable.Column basis="50px" grow="0"
renderCell={this.renderSelectCell}
renderHeaderCell={() => <span></span>} />
<TreeTable.Column basis="400px" grow="1"
renderCell={this.renderIndexCell}
renderHeaderCell={() => <span>Name</span>} />
<TreeTable.Column basis="175px" grow="0"
renderCell={(row) => <div className="text-right">{row.data.pricing}</div>}
renderHeaderCell={() => <span>Pricing</span>} />
</TreeTable>
Please spend 10 min and create a JSFiddle where I can reproduce the problem (you can use https://jsfiddle.net/constantin_p/hb8597sr/ as a base, paste over your code, data and css). I cannot reproduce the problem with just the information you listed.
I tried to reproduce with the base code on JSFiddle but unable to do that. Also, I tried pasting the demo code, data and css in my application but problem persist. May be there is some other issue. However, if I give height property to the TreeTable, rows upto that height are displayed. So wondering, something is overwriting the height property?
The workaround that I have implemented is - I am calculating the table height dynamically by determining the $state.isVisible property. With this full data is displayed, but my table is expanding vertically.
It's still impossible for me to solve this without having an instance where I can reproduce the problem.
I'm just going to list some point that may help you identify the source of the bug:
v1.0.0-beta.8
.TreeTable
is a number (or try without having it set).increasing height in .cp_tree-table .cp_tree-table_viewport causes some rows not to be visible
https://jsfiddle.net/asLfgdn3/1/ on your JS fidde change .cp_tree-table { font-size: 14px; color: #040402; background: #fff; border: 1px solid rgba(55, 53, 47, 0.2); font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; height: 100vh !important; }
.cp_tree-table .cp_tree-table_viewport { height: 100vh !important; }
I have multiple nesting with the configuration: font size: 14px, cell height: 12px, table height: default. I am trying to expand nested childs but table displays only 13 rows. I can see the table scrolls down with empty rows. The scroll bar is also visible but after 13 rows, empty space equivalent to the expanded rows is displayed.
If I increase the table height, more rows are visible.
This is becoming a showstopper for me. Please help if I am missing any configuration.