Как внутренний элемент сделать больше родительского контейнера?

Question

[weranda]

Приветствую.

На странице сайта есть комментарии. Есть форма комментирования. Есть вложенность комментариев. Каждый уровень вложенности делает отступ слева в n-пикселей. На значительном уровне вложенности комментариев форма превращается в кашу. Есть идея сделать форму комментария на вложенный комментарий шириной в размерность первого уровня, но как это сделать — не очень понимаю.

Вот пример: https://codepen.io/weranda/pen/poxJYvX

Можно ли с помощью стилей сделать так, чтобы форма занимала 100% ширины от первого уровня комментирования? В примере выше форма выделена красным цветом.

P.S.
Может быть есть какое-нибудь правило типа @media screen and (max-width ...), но для конкретного блока? Хотя как это решит проблему...

Answer 1

[Полина Емельянова]

Один из вариантов задать этой обертке отрицательный маргин влево (в данном случае), на нужную вам ширину. Рассчитать по числу левых маргинов у оберток, которые надо перекрыть.

Comments

[weranda]

Кажется, это хорошее решение. Оно работает. Спасибо вам за подсказку.
Если будут еще предложения, то буду рад их увидеть в целях познания дополнительных техник.

[weranda]

Полина Емельянова, и тут появляется новая проблема — жесткий хардкод для каждого нового уровня вложенности типа:

... .comment-text form {margin-left: -50px}
... .comment-text .comment-text form {margin-left: -75px}
... .comment-text .comment-text .comment-text form {margin-left: -100px}

Это не критично, но знаете ли пути обхода такого?

[szQocks]

weranda, изучи бэм и sass и проблема с твоими приоритетами испарится

[weranda]

szQocks, А каким образом БЭМ и SASS решают проблему хардкода в конечном/скомпилированном файле стилей в этом конкретном случае?

[szQocks]

weranda, а в собранном ? эм, извиняюсь не знал что ты в бандле хардкором меняешь, видимо не внимательно прочёл, тогда мой совет да - не актуален

[Полина Емельянова]

Ну обход такой, как я вижу, лично. НЕ ПРЕТЕНДУЮ!
Он не понравиться однозначно... Но при такой вот структуре и вложенности....
Абсолют, блин... Ну а как его еще.
У самого ПЕРВОГО родителя релатив, а у потомка - абсолют.
Тогда у нас ширина встанет по родителю... ВЫСОТУ возвращаем хаком с паддингом, т.е. у потомка есть padding-bottom: n%; Тогда его высота будет адаптиться от ширины. Ну или дать уже пиксели. Форму тянем по родителю...
Ну... Костыль, но как то такой вот варик.


НО по идее, можно конечно с гридами извратиться.
Типа дать сетку, где число колонок для ширины элемента = (число вложенных элементов - маргин слева) (чую запах JS за милю.))). Тогда можно и не париться с вложенностью...

Answer 2

[historydev]

Никакие отрицательные отступы не нужно использовать.

Избавься от смещения вложенных комментариев, добавь в сообщения логику по типу @ted Hello.

Ограничь кол-во выводимых комментариев, допустим 10 и кнопку "ещё", ниже кнопки форма для комментария, на каждом комментарии "Ответить" как на текущем ресурсе. Для примера.

Comments

[weranda]

Об этом варианте думал, но он мне кажется не очень наглядным в сравнении с вложенными комментами. Но спасибо и за ваше мнение.