LINUX.ORG.RU

Какой же CSS извращенный

 , ,


0

1

Итак, есть банальнейшая задача:

Сверху страницы полоса известной высоты, снизу полоса известной высоты, между ними текстовый редактор, заполняющий всю доступную высоту.

В качестве редактора взял codemirror, но не суть. Для заполнения всей высоты использовал flex div-контейнер и flex-grow: 1, и height:100% для .CodeMirror,

Чтобы все было высотой с страницу браузера, указал для html, body height:100%, max-height:100%.

Все здорово, но когда я в редакторе ввожу много строк, вместо того, чтобы создавать полосу прокрутки (как он делает при фиксированной высоте редактора) вся страница становится больше по высоте, появляется полоса прокрутки всего окна.

Капец.

★★★★★

Ответ на: комментарий от mimico

Console на jsfiddle во всех браузерах элемент с абсолютным позиционированием, поверх вьюпорта.

На твоём скриншоте что-то не заметно что поверх, внезапно. Выделенный элемент заканчивается на Console. Это тоже так задумано - выделять 80 пикселей и писать что это 100? :)

Вопрос вот в чем. Как ты умудрился дожить до своих седин таким идиотом?

То, что вебмакака считает меня идиотом - весьма лестно, вообще-то. Я бы даже наверно оскорбился, если бы кто-то подобный счёл мой интеллект тождественным своему.:)

Stanson ★★★★★ ()
Ответ на: комментарий от Stanson

Работает только с конкретным прямым указанием высоты header и footer

4.2 же

overflow: auto; надо чтобы скролл был

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

примерно 20 пикселей куда-то внезапно просрались

Примерно 20 пикселей - это jsfiddle console, отключи в настройках если размер блока линейкой меряешь.

dsxl ()
Ответ на: комментарий от Stanson

Это тоже так задумано - выделять 80 пикселей и писать что это 100? :)

Зачем ты продолжаешь позориться, рассказывая всем, что не имееешь представления о том, как работает devtools и инспекция элементов?

В общем, ладно. Этот троллинг твоей тупостью зашел слишком далеко. Твоя взяла. Живи с этим.

mimico ()
Ответ на: комментарий от dsxl

4.2 же

Только Firefox и Chrome. Safari и IE11 - херня. Safari у меня правда только 10, может поновее и прожуёт.

Примерно 20 пикселей - это jsfiddle console, отключи в настройках если размер блока линейкой меряешь.

Это я уже понял.

Stanson ★★★★★ ()
Ответ на: комментарий от dsxl

В чём кривизна флекса?

Кроме хрома уже где-то хоть 80% фич поддерживаются?

это же после каждого чиха придётся высоту править.

Не чихай так часто.

ya-betmen ★★★★★ ()
Последнее исправление: ya-betmen (всего исправлений: 1)
Ответ на: комментарий от Shadow

Ты можешь сколько угодно противиться реальности. Странно лишь то. что все такие противники - не занимаются тем, чему противятся. И никак не могут иметь объективного взгляда. Как и ты - не занимаешься разработкой и программирование UI. Это если говорить о стороне разработчика. А сли говорить о стороне пользователя - то успех веб-платформы говорит сам за себя. Мнения же маргиналов с шапочками из фольги и криворуков у которых браузеры внезапно жрут гигабайты на две вкладки, просто погрешнсость, которая не учитывается.

anonymous ()
Ответ на: комментарий от anonymous

Привет, телепат.
Я как раз занимаюсь (правда, периодически) разработкой UI под веб и кордову.
И мне нравятся ionic и angular - но всё равно, в кастомных виджетах, для сохранения адаптивной вёрски в элементах с canvas, мне нужно вешать вотчер на изменение размера документа и перерисовывать canvas.
И у меня всё потребляет очень мало памяти и не лагает, в отличии от поделок на React.
И программирование через жопу остаётся программированием через жопу, даже на C++ в mfc с коллбэками это проще и прямее.
А со стороны пользователя - веб-интерфейс google mail доставляет неконсистентностью. И, например, как мне быстро посмотреть почту, полученную 6 месяцев назад? Скролла по всей почте нет, только листать экраны.
Веб - это, если хотите, аналог latex или pdf в первую очередь. Поэтому интерактивный ui на этой технологии всегда будет черезжопным, а позиционирование будет уезжать, как у автора топика.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 3)
Ответ на: комментарий от Shadow

Ого, внезапно - canvas еявляется растровым, вот это новости. А где иначе? И что тебе меашет использовать вектор, вместо растра, разработчик?

веб-интерфейс google mail Как отедельный примеры каких-то приложений, говорят о технологии в целом? Почему ты не приводишь в пример UI какого-нибудь вк, который летает и консистентен чуть более, чем весь?

anonymous ()
Ответ на: комментарий от Shadow

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

anonymous ()
Ответ на: комментарий от Stanson

Гриды, флексы, жээсы...

Во:

* {
    margin: 0;
    padding: 0;
}
.container {
    box-sizing: border-box;
    position: absolute;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    background: #ff0;
    border-top: solid 100px #000;
    border-bottom: solid 100px #000;
}
<body>
    <div class="container"></div>
</body>

deep-purple ★★★★★ ()
Ответ на: комментарий от anonymous

Ок, виджет аплоадера картинок с редактором типа инстаграмма как в адаптивной вёрстке реализуешь? И чтоб при ресайзе не ехало. Не ехало - это ещё чтобы координаты внутри canvas не ехали, и содержимое масштабировалось.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)
Ответ на: комментарий от Shadow

Это слишком абстрактное ТЗ. Такой виджет есть все в том же вк, в чем проблема, и что там куда едет при ресайзе? Заканчивая тем, что такие виджеты просто не делаются адаптивными сами по себе, а там где подобная функциональность нужна - аля фотошоп - есть webgl.

anonymous ()
Ответ на: комментарий от anonymous

А ничего никуда не едет, только для этого нужна борьба с html документом вместо программирования. Потому что каждая фигня в интерфейсе остаётся куском html документа, и ведёт себя как кусок html документа, и приходится обмазывать его кучей css и js, чтобы он не вёл себя как кусок html, а вёл себя как обычный виджет из библиотеки UI.

Shadow ★★★★★ ()
Ответ на: комментарий от Shadow

Только потому, что ты никакой другой парадигмы работы с лэйаутом, кроме как работы с html не знаешь. На дворе давно тюрьинг полный css, web components = custom elements \ shadow dom, а ты все о каком-то html. Проблема только у тебя в голове, из-за нежелания или неспособности изучать новое.

anonymous ()
Ответ на: комментарий от anonymous

Под капотом всё равно html - и в тексовых полях скайпа непомещающиеся переводы вызывают малипусенькие скроллбары. Которые, видимо, надо было отключать в css. Что не ложится на новую парадигму работы лэйаута и поэтому было про..но программистом.
PS. Гриды недавно появились.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)
Ответ на: комментарий от Shadow

Под каопотом не может быть никакого htmlпо определению. Уже на этом этапе можно сделать выводы о твоей компетенции. Весь веб UI это иерархия компонент + их стилизация + динамика. Иерархия и стилизация описывается декларативно. HTML и CSS именно такие декларативные языки для описания.

В любом тулките у тебя есть эта самая иерархия компонент и их стилизация. А там где нет - это говно прибитое гвоздями, где каждый кастомный виджет именно что приходится рисовать с нуля практически битмапом на канвасе. И все равно в конечном счеты ты изобретешь тот же DOM и CSSOM.

anonymous ()
Ответ на: комментарий от deep-purple

И чем ишак не смузихрень своего времени? Синдром утенка налицо. О том, что он сейчас занимает меньше одного процента на рынке нужно говорить? Ты иди еще ПО пиши под все существующие архитектуры сразу, а не под целевые.

anonymous ()
Ответ на: комментарий от anonymous

чем ишак

Тем, что в те времена он был в ТЗ.

меньше одного процента

В те времена могильные телефоны были примерно в той же ситуации.

На остальное, что ты там себе выдумал — мне насрать. Синдром походу у тебя.

под все существующие архитектуры сразу

Этим занимаются конпеляторы и тулкиты. ЛивнИ.

deep-purple ★★★★★ ()
Ответ на: комментарий от Shadow

аплоадера картинок с редактором типа инстаграмма

Это про обрезание картинки до квадрата и размещение на ней подписей и значков в произвольном месте? Так это «в векторе» даже проще делается, чем на канве. Прост координаты в процентах хранишь и готово.

dsxl ()
Ответ на: комментарий от deep-purple

Зато даже в ишаке работает

Ага, ага. А ещё нужно жить в пещере и ездть на лошадях. Диды жили и мы проживём! Это всем доступно, в отличие от квахтир и ахтомобилей новамодных. Ишь чё понавыдумывали, демоны окаянныя!

dsxl ()
Ответ на: комментарий от dsxl

Так, подробнее!
Как растровая картинка становится вектором?
Или ты имеешь ввиду, не привязываться к размеру? Oh whait... Спасибо!
Но речь шла о том, что если в процессе сделать ресайз окна с этим, это выглядит отстойно и canvas надо перерисовывать.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 2)
Ответ на: комментарий от Shadow

Ты можешь привести MVP такого виджета, который ты хочешь? Абстрактный апплоадер в вакууме с возмозможностью редактирования изображения - вообще может не требовать канваса для визуализации изменений. Все изменения могут визуализироваться векторными примитивами, а канвас использрваться лишь раз для сведения изображения в конце.

anonymous ()
Ответ на: комментарий от Shadow

Демку рабочую присылай, пусть хоть неполноценную с пояснениями что и как по-твоему должно работать, но работает сейчас не так. Никто копаться в сорцах, ради того, чтобы понять что ты хочешь не будет.

anonymous ()
Ответ на: комментарий от Shadow

Как растровая картинка становится вектором?

Результирующая картинка - это набор слоёв, у каждого задать позицию и масштаб в процентах (и поворот в радинах, например). Сами слои это надписи или картинки. Картинки могут быть как векторными, так и растровыми – вообще без разницы. Вот тебе и «вектор.»

если в процессе сделать ресайз окна с этим, это выглядит отстойно и canvas надо перерисовывать.

Ресайз в чём заключается? Пропорционально увеличить размер картинки если юзер как бы зашёл с мобилки (или просто скукожил окно)? Каждый слой можно завернуть в контейнер и менять какой-нибудь базовый масштаб через @media, например. Всё само и перерисуется. А канвас не нужен.

dsxl ()
Последнее исправление: dsxl (всего исправлений: 1)
Ответ на: комментарий от anonymous

WindowsForms в VisualStudio лучше для рисования не свистопердящего UI, чем веб. Конечно, всякие GTK-поделки ещё менее пригодны для рисования UI. Говорю как человек, который начинал с формошлёпства на C#.

peregrine ★★★★★ ()
Ответ на: комментарий от dsxl

Хера ты тут навыдумывал.

Хотя... Сижу сейчас в деревне. Деревянный дом. Есть и газ и печка на дровах. Огород. Колодец. Рядом ключевая речушка, лес. А у соседа лошади есть. Отключи меня от «благ» цивилизации — я не пропаду. На ЛОР вот только не зайду.

А ты и дальше сиди, выделывайся, в бетонной коробке, зависимый от одного пшика судьбы.

deep-purple ★★★★★ ()
Ответ на: комментарий от anonymous

Да, блджад, скажи еще ты в

.v-flex 100vh
  .toolbar
  .h-flex
    .side
      .header
      .content
    .main
       .header
       .content

Сможешь в вертикальный скролл .content-ов с первого раза. Зная модель, очевидно же что надо: <предложить метод решения без гугла и тыка не обосравшись, или идти мести улицы>. Тебе такое задай на интервью, ты даже не сможешь сказать, в чем проблема собственно.

Или может ты сможешь заставить грид переносить строки в медиа принте? Для печати кучи стикеров например в три колонки. Какая проперть за это отвечает и почему не работает? А?

Ты простая макака, которая лепит сайты в 12 колонок и три брейкпоинта и считает, что она что-то там авесоме и какой-то опыт имеет с задачами. Для нормальной системы расположения не нужен сакральный опыт и знание сотен приемов. Для нормальной системы нужна нормальная базовая геометрия, из которой все логично вытекает без особых знаний, небомжовские способы распределения места, request/allocate-лайк цикл размещения, и стандартные контейнеры, которые не сосут не в одном, так в другом, на одну проперть смотрят, на другую не смотрят. Но создатели цсса поехавшие наркоманы, и каждый новый запил фич нормальные люди встречают десятками фейспалмов, потому что были шансы, но снова всё проебали на пять лет, и снова, и снова. Конченые дегенераты, что стандартизаторы, что восхвалятели.

anonymous ()