HTML Tree: Fix column separators misaligned at startup. Closes #2153
This commit is contained in:
parent
d4e3a437fd
commit
6010390525
3 changed files with 14 additions and 8 deletions
|
@ -1084,10 +1084,13 @@ class VirtualizedTable extends React.Component {
|
||||||
const header = document.querySelector(`#${this.props.id} .virtualized-table-header`);
|
const header = document.querySelector(`#${this.props.id} .virtualized-table-header`);
|
||||||
const scrollbarWidth = Math.max(0,
|
const scrollbarWidth = Math.max(0,
|
||||||
tree.getBoundingClientRect().width - jsWindow.getBoundingClientRect().width);
|
tree.getBoundingClientRect().width - jsWindow.getBoundingClientRect().width);
|
||||||
|
let paddingWidth = 0;
|
||||||
|
if (Zotero.isLinux) {
|
||||||
|
paddingWidth = 2; // from the border
|
||||||
|
}
|
||||||
// Should be kept up to date with the _virtualized-table.scss value
|
// Should be kept up to date with the _virtualized-table.scss value
|
||||||
// for .virtualized-table-header
|
// for .virtualized-table-header
|
||||||
const paddingInlineStart = 6;
|
header.style.width = `calc(100% - ${scrollbarWidth-paddingWidth}px)`;
|
||||||
header.style.width = `calc(100% - ${scrollbarWidth+paddingInlineStart}px)`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -87,7 +87,11 @@ function makeItemRenderer(itemTree) {
|
||||||
|
|
||||||
// Set depth indent
|
// Set depth indent
|
||||||
const depth = itemTree.getLevel(index);
|
const depth = itemTree.getLevel(index);
|
||||||
span.style.paddingInlineStart = (CHILD_INDENT * depth) + 'px';
|
let firstChildIndent = 0;
|
||||||
|
if (column.ordinal == 0) {
|
||||||
|
firstChildIndent = 6;
|
||||||
|
}
|
||||||
|
span.style.paddingInlineStart = ((CHILD_INDENT * depth) + firstChildIndent) + 'px';
|
||||||
|
|
||||||
return span;
|
return span;
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,6 +38,10 @@
|
||||||
cursor: col-resize;
|
cursor: col-resize;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cell:first-child {
|
||||||
|
padding-inline-start: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
min-width: 30px;
|
min-width: 30px;
|
||||||
|
@ -142,7 +146,6 @@
|
||||||
height: 1.8em;
|
height: 1.8em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-inline-end: 1px solid #ddd;
|
border-inline-end: 1px solid #ddd;
|
||||||
padding-inline-start: 6px;
|
|
||||||
|
|
||||||
&.static-columns {
|
&.static-columns {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -212,10 +215,6 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
.row {
|
|
||||||
padding-inline-start: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
Loading…
Reference in a new issue