Возможные причины, по которым липкое позиционирование CSS в не работает ⇐ CSS

Разбираемся в CSS
Ответить
Anonymous
 Возможные причины, по которым липкое позиционирование CSS в не работает

Сообщение Anonymous »

Я создал собственный элемент, имитирующий представление datagridview в C#. Мне удавалось закрепить вверху, как заголовок списка или datagridview в dot net, пока совсем недавно я не заметил, что он больше не работает.
Все в этом пользовательском элементе создано программно. генерируется, включая правила CSS. Вот код для создания правил CSS:

Код: Выделить всё

class ListView extends HTMLElement {
static #lvwId = null;
static #lvwCss;
static #initId() {
if (ListView.#lvwId == null) {
ListView.#lvwId = '-lvw-' + Array.from(Date.now().toString()).map(b => ('00' + b.toString(16)).slice(-2)).join('');
ListView.#lvwCss = ListView.#lvwId + '-css';
}
}
connectedCallback() {
ListView.#initId();
let style = document.getElementById(ListView.#lvwId);
if (style == null) {
ListView.#style = style = document.createElement('style');
style.type = 'text/css';
style.id = ListView.#lvwId;
const fn = (...b) =>  {
if (b.length == 1) {
let c = b[0];
let d = '.' + ListView.#lvwCss;
if (c[0] == '-')
c = c.substr(1);
else
d += ' ';
d += c;
ListView.#style.appendChild(document.createTextNode(d));
}
else {
let c = '';
for (let d of b[0]) {
if (c != '') c += ',';
c += '.' + ListView.#lvwCss + ' ' + d;
}
ListView.#style.appendChild(document.createTextNode(c + ' ' + b[1]));
}
};
fn('{position:relative;background-color:white;outline:none;display:block;overflow:auto;}');
fn('*{user-select:none;box-sizing:border-box;position:relative;padding:0px;margin:0px;background-color:transparent;color:inherit}');
fn('{--gridcolor:lightgray;--xmargins:5px;--itembackcolor:white;--itemforecolor:black;--headerbackcolor:gray;--headerforecolor:black;--headerhoverback:forestgreen;--headerhoverfore:black;--headerpadding:4px;--itempadding:4px;}');
fn('table{border-collapse:collapse;z-index:0;left:0px;top:0px;background:white;table-layout:fixed;display:block}');
fn('thead{position:sticky;top:0px;z-index:3}');
fn('thead>tr{position:sticky}');
fn(['th', 'td'], '{text-align:left;vertical-align:top;}');
fn('th{position:sticky;top:-1px;background-color:var(--headerbackcolor);color:var(--headerforecolor);border-right:1px solid var(--gridcolor);transition:background-color .5s}');
fn('-:not([headeronly]) th{cursor:pointer;}');
fn('-:not([headeronly]) th:hover{background-color:var(--headerhoverback);color:var(--headerhoverfore)}');
fn(['th>div', 'td>div'], '{height:100%;display:flex;flex-direction:row;justify-content:flex-start;align-content:flex-start;align-items:flex-start}');
fn('th>div{margin-left:var(--xmargins);padding: var(--headerpadding) var(--xmargins) var(--headerpadding) 0px;}');
fn('th>div>p{width:100%}');
fn('td{background:var(--itembackcolor);color:var(--itemforecolor);}')
fn('th::after{content:"";width:var(--xmargins);position:absolute;right:0px;top:0px;height:100%;cursor:ew-resize}')
fn('th:not(:first-child)::before{content:"";width:var(--xmargins);position:absolute;left:0px;top:0px;height:100%;cursor:ew-resize}')
fn('td>div{padding:var(--xmargins) var(--itempadding);width:100%;}');
fn('td>div>p>img{float:left;margin-right:5px}');
fn('td>input{height:100%;width:100%;outline:0px solid transparent;border:none;padding:1px;background:white;color:black;}');
fn('td{color:black}');
fn('tr[selected]{background:#018;color:white}');
fn('tr[selected]>td:not([selected]){background:transparent;color:white}');
fn('tr[selected]>td[selected]{background:rgba(255,255,255,.2);}');
fn('tbody>tr:nth-child(even){--bg-color:rgba(0,0,0,.05)}');
fn('tbody>tr:nth-child(even) td{background-color:var(--bg-color);}');
fn('.sticky-hdr{position:sticky;overflow:hidden;z-index:1;top:0px;width:100%}');
fn('tbody>tr{border-bottom:1px solid var(--gridcolor);color:black}');
fn('.splits{border-top:1px solid var(--gridcolor)}');
fn('tbody>tr>td p{outline:none;width:100%;}');
fn('tbody td{border-right:1px solid var(--gridcolor)}');
fn('-[nogrid] tbody * {border-color:transparent}');
fn('-[nogrid] tbody>tr:nth-child(even)>td{border-color:var(--bg-color)}');
fn('-[nowrap] p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}');
fn('-[checkboxes] td>div>div[checkbox]{float:left;border:1px solid gray;margin-right:5px;width:16px;height:16px;background:white}')
fn("-[checkboxes] td>div>div[checkbox=\"checked\"]::after{content:  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewbow='0 0 16 16'%3E%3Cpath fill='black' d='M4,9l0,-3l3,3l5,-5,l0,3l-5,5Z' /%3E%3C/svg%3E\");width:16px;height:16px;position:absolute;left:-1.5px;top:-1px}");
document.body.insertAdjacentElement('beforebegin', style);
}
this.tabIndex = $(this).index();
$(this).addClass(ListView.#lvwCss);
this.#headerPlaceholder = document.createElement('div');
this.#headerPlaceholder.setAttribute('style', 'width:100%;height:32px;overflow:none;position:sticky;left:0px;top:0px;background:gray');
this.#headerPlaceholder.innerHTML = ' ';
this.append(this.#headerPlaceholder);
this.#table = document.createElement('table');
this.#table.style.top = '0px';
this.#thead = document.createElement('thead');
this.#table.appendChild(this.#thead);
this.#tbody = document.createElement('tbody');
this.#table.appendChild(this.#tbody);
this.#header = document.createElement('tr');
this.#table.firstChild.insertAdjacentElement('afterbegin', this.#header);
$(this).append(this.#table);

this.#handleEvents();
this.#handleHeaderEvents();

const observer = new ResizeObserver(entries => {
const ofh = this.#thead.offsetHeight - 1;
this.#headerPlaceholder.style.height = ofh + 'px';
this.#table.style.top = (-ofh) + 'px';
});
observer.observe(this.#thead);
}
}
Внутри функции linkedCallback создается this.#headerPlaceholder:

Код: Выделить всё

        this.#headerPlaceholder = document.createElement('div');
this.#headerPlaceholder.setAttribute('style', 'width:100%;height:32px;overflow:none;position:sticky;left:0px;top:0px;background:gray');
this.#headerPlaceholder.innerHTML = ' ';
Как видите, этот элемент липкий и прилипает. Но дело в том, что липкое позиционирование не работает. Опять же, он работал, и я не знаю, почему он внезапно перестал работать.
Я много искал, чтобы найти причину этого, но понятия не имел. Я следовал предложенным решениям и принятым решениям, которые нашел в stackoverflow, например, объединению липкой позиции с верхним правилом CSS, но все равно это не работает. Я пробовал использовать фиксированную позицию, но это создало еще одну проблему с размерами столбцов, например. Элемент не соответствует значению ширины, а ширина столбца заголовка и ширина td не совпадают. Я проверил, влияют ли внешние правила, но пока ничего не нашел. Я также распространил закрепленную позицию на все и , но безрезультатно.
Решение, отличное от jquery, предпочтительнее, хотя вы можете заметить, что есть некоторые jquery. звонки в фрагменте, который я опубликовал. Я стараюсь, чтобы мой пользовательский элемент имел меньше или ноль зависимостей, но на данный момент он в некоторых частях использует jquery.
Обновить
Я не могу напрямую вставить сюда сгенерированный CSS и разметку, но думаю, ссылки подойдут:
Сгенерированный CSS: https://pastebin.com/embed_js/9tVx409n< /p>
Сгенерировано разметка: https://pastebin.com/embed_js/6EmpvY6Q
Изменить: добавление фрагмента SO:

Код: Выделить всё








Name




Bio Name




Date Hired




Service Length




Position




Salary




Payments








Employee 1









Aug 1, 2019




4 years, 10 months & 9 days




Sales Executive




9,000.00











Employee 2









May 3, 2023




1 year, 1 month &  7 days




Installer




9,100.00











Employee 4









Dec 7, 2021




2 years, 6 months & 3 days




Installer




10,400.00











Employee 5









May 1, 2023




1 year, 1 month & 8 days




Installer




9,999.00











Employee 6









Apr 4, 2024




0 year, 2 months &  6 days




Office Admin




9,750.00











Employee 7









Mar 1, 2024




0 year, 3 months & 9 days




Installer




10,444.00











Employee 8









Apr 3, 2024




0 year, 2 months & 6 days




Installer




9,750.00











Employee 9









Sep 11, 2023




0 year, 8 months &  29 days




Area Supervisor




9,750.00











Employee 10









Feb 1, 2024




0 year, 4 months & 9 days




IT Programmer




12,000.00











Employee 11









Feb 26, 2024




0 year, 3 months &  13 days




Office Admin




9,750.00














.-lvw-01070107090900090401010003-css {
position: relative;
background-color: white;
outline: none;
display: block;
overflow: auto;
}

.-lvw-01070107090900090401010003-css * {
user-select: none;
box-sizing: border-box;
position: relative;
padding: 0px;
margin: 0px;
background-color: transparent;
color: inherit
}

.-lvw-01070107090900090401010003-css {
--gridcolor: lightgray;
--xmargins: 5px;
--itembackcolor: white;
--itemforecolor: black;
--headerbackcolor: gray;
--headerforecolor: black;
--headerhoverback: forestgreen;
--headerhoverfore: black;
--headerpadding: 4px;
--itempadding: 4px;
}

.-lvw-01070107090900090401010003-css table {
border-collapse: collapse;
z-index: 0;
left: 0px;
top: 0px;
background: white;
table-layout: fixed;
display: block
}

.-lvw-01070107090900090401010003-css thead {
position: sticky;
z-index: 11;
top: 0px
}

.-lvw-01070107090900090401010003-css th,
.-lvw-01070107090900090401010003-css td {
text-align: left;
vertical-align: top;
}

.-lvw-01070107090900090401010003-css th {
position: sticky;
top: 0px;
background-color: var(--headerbackcolor);
color: var(--headerforecolor);
border-right: 1px solid var(--gridcolor);
transition: background-color .5s
}

.-lvw-01070107090900090401010003-css:not([headeronly]) th {
cursor: pointer;
}

.-lvw-01070107090900090401010003-css:not([headeronly]) th:hover {
background-color: var(--headerhoverback);
color: var(--headerhoverfore)
}

.-lvw-01070107090900090401010003-css th>div,
.-lvw-01070107090900090401010003-css td>div {
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start
}

.-lvw-01070107090900090401010003-css th>div {
margin-left: var(--xmargins);
padding: var(--headerpadding) var(--xmargins) var(--headerpadding) 0px;
}

.-lvw-01070107090900090401010003-css th>div>p {
width: 100%
}

.-lvw-01070107090900090401010003-css td {
background: var(--itembackcolor);
color: var(--itemforecolor);
}

.-lvw-01070107090900090401010003-css th::after {
content: "";
width: var(--xmargins);
position: absolute;
right: 0px;
top: 0px;
height: 100%;
cursor: ew-resize
}

.-lvw-01070107090900090401010003-css th:not(:first-child)::before {
content: "";
width: var(--xmargins);
position: absolute;
left: 0px;
top: 0px;
height: 100%;
cursor: ew-resize
}

.-lvw-01070107090900090401010003-css td>div {
padding: var(--xmargins) var(--itempadding);
width: 100%;
}

.-lvw-01070107090900090401010003-css td>div>p>img {
float: left;
margin-right: 5px
}

.-lvw-01070107090900090401010003-css td>input {
height: 100%;
width: 100%;
outline: 0px solid transparent;
border: none;
padding: 1px;
background: white;
color: black;
}

.-lvw-01070107090900090401010003-css td {
color: black
}

.-lvw-01070107090900090401010003-css tr[selected] {
background: #018;
color:  white
}

.-lvw-01070107090900090401010003-css tr[selected]>td:not([selected]) {
background: transparent;
color: white
}

.-lvw-01070107090900090401010003-css tr[selected]>td[selected] {
background: rgba(255, 255, 255, .2);
}

.-lvw-01070107090900090401010003-css tbody>tr:nth-child(even) {
--bg-color: rgba(0, 0, 0, .05)
}

.-lvw-01070107090900090401010003-css tbody>tr:nth-child(even) td {
background-color: var(--bg-color);
}

.-lvw-01070107090900090401010003-css tbody>tr {
border-bottom: 1px solid var(--gridcolor);
color: black
}

.-lvw-01070107090900090401010003-css .splits {
border-top: 1px solid var(--gridcolor)
}

.-lvw-01070107090900090401010003-css tbody>tr>td p {
outline: none;
width: 100%;
}

.-lvw-01070107090900090401010003-css tbody td {
border-right: 1px solid var(--gridcolor)
}

.-lvw-01070107090900090401010003-css[nogrid] tbody * {
border-color: transparent
}

.-lvw-01070107090900090401010003-css[nogrid] tbody>tr:nth-child(even)>td {
border-color: var(--bg-color)
}

.-lvw-01070107090900090401010003-css[nowrap] p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
}

.-lvw-01070107090900090401010003-css[checkboxes] td>div>div[checkbox] {
float: left;
border: 1px solid gray;
margin-right: 5px;
width: 16px;
height: 16px;
background: white
}

.-lvw-01070107090900090401010003-css[checkboxes] td>div>div[checkbox="checked"]::after {
content: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' x=\'0\' y=\'0\' viewbow=\'0 0 16 16\'%3E%3Cpath fill=\'black\' d=\'M4,9l0,-3l3,3l5,-5,l0,3l-5,5Z\' /%3E%3C/svg%3E");
width: 16px;
height: 16px;
position: absolute;
left: -1.5px;
top: -1px
}



Подробнее здесь: https://stackoverflow.com/questions/786 ... o-not-work
Вернуться к началу
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»