Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
Топик располагается на нескольких страницах: [1] 2 3 4 5 6   вперед  Ctrl      все
 Form Layout, текущая печальная ситуация  [new]
dbpatch
Member

Откуда:
Сообщений: 1130
Собственно вопрос.

Нужно получить нечто вроде, т.е. классическую-каноническую экранную форму.

Картинка с другого сайта.

но чтоб единообразно и хорошо работало под IE11, Chrome, FF, etc: мы указываем в html только label, inputs, а оно само,
считает нужную ширину колонки с label и соотсвественно оступает колонку с inputs, ну и само собой labels, inputs на одном baseline


Попытки заиспользовать grid-layout закончились пшиком, даже Example 24 из https://drafts.csswg.org/css-grid-1/
работает толком только в Chrome, и в целом ситуация с display:grid похоже печальная на еще N лет вперед.

На коленке удалось запилить через самый обычный <table><tr><td><label ..></td><td><input...> </td></tr>
но сразу сомнения, потому что аккуратно впилить <fieldset> не получается (только если его представлять как отдельнй вид <tr>).

Ну и в целом - tables are bad (хотя непонятно почему bad, действительно, почему?)

Поиграться с display:table тоже не сильно получилось - там и вовсе расползается колонка с inputs и опять-же не решается fieldset,
да и по сути это тот-же <table>, только на <div>, чем оно теперь лучше, чем просто <table> не понятно, реально, почему это уже не tables are bad?


Вопрос - как можно красиво и без тонны всякой bootstrap/vue/react ерунды и прочих polyfill/mixin костылей в современных браузерах сделать html формочки?

Лично я бы остался на <table>, если бы не <fieldset>
23 янв 18, 13:21    [21130305]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
skyANA
Member

Откуда: Зеленоград
Сообщений: 26400
dbpatch
Вопрос - как можно красиво и без тонны всякой bootstrap/vue/react ерунды и прочих polyfill/mixin костылей в современных браузерах сделать html формочки?

Раскурить HTML5 semantic elements и сделать.
23 янв 18, 14:00    [21130545]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
hVostt
Member

Откуда:
Сообщений: 15267
dbpatch,

любая CSS Grid библиотека решает твою задачу прям в лоб, например на Bootstrap такая форма делается прям по сетке и получается очень даже приемлимый результат.

без bootstrap и прочей ерунды, ты хочешь изобрести велосипед, чтобы и нефигово выглядело, и работало норм во всех браузерах, и было расширяемо, и было удобно использовать... ну так далее, там ребята делают свои поделки годами, тупицы, чем вообще занимаются? зачем?
23 янв 18, 14:06    [21130589]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
hVostt
Member

Откуда:
Сообщений: 15267
skyANA
Раскурить HTML5 semantic elements и сделать.


использовать семантику это очень хорошо, но даже самый простейший энтерпрайз формочки и рюшечки не тянет от слова совсем.
23 янв 18, 14:08    [21130598]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
hVostt
Member

Откуда:
Сообщений: 15267
dbpatch
Лично я бы остался на <table>, если бы не <fieldset>


flex не пробовал посмотреть?
23 янв 18, 14:10    [21130628]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
dbpatch
Member

Откуда:
Сообщений: 1130
hVostt
dbpatch,

любая CSS Grid библиотека решает твою задачу прям в лоб, например на Bootstrap такая форма делается прям по сетке и получается очень даже приемлимый результат.

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


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

спасибо, плавали.

тем боее, эти "ребята" решают обычно "задачи" вроде поддержки IE6, IE9, мне это не интересно, у меня ограничение edge версиями браузеров.

частично магия достижима, вот первый ответ
https://stackoverflow.com/questions/9325426/css-how-to-create-a-label-width-of-the-longest-containing-text

но его решение не покрывает элемент Department выше, ну и в разных fieldset отступы будут разные, мне это не сильно подходит - на Department я бы еще забил, но вот разные отступы в fieldset - нет.

в целом все это как-то странно, уже 23 года прошло, а никак даже обычные forms на html запилить не могут. чем эти ребята из w3c вообще занимаются?
23 янв 18, 14:14    [21130654]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
dbpatch
Member

Откуда:
Сообщений: 1130
skyANA
dbpatch
Вопрос - как можно красиво и без тонны всякой bootstrap/vue/react ерунды и прочих polyfill/mixin костылей в современных браузерах сделать html формочки?

Раскурить HTML5 semantic elements и сделать.


ты уже раскрурил и сделал? пример покажешь?
23 янв 18, 14:14    [21130657]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
dbpatch
Member

Откуда:
Сообщений: 1130
hVostt
dbpatch
Лично я бы остался на <table>, если бы не <fieldset>


flex не пробовал посмотреть?


пробовал, он разве решает проблемы колонок?

все примеры, из просмотренных, напирают на то, чтоб я константой вбивал ширину labels, я такое и без всяких flexbox-ов могу сделать на обычных блоках
23 янв 18, 14:20    [21130705]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
hVostt
Member

Откуда:
Сообщений: 15267
dbpatch
а я не хочу их поделки, из нужно сопровождать и поддерживать (обновлять), не говоря уже об изучении и багфиксах.
при том, что через три года оно окончательно загниет.


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

так что рассказывать сказки не нужно :)

https://jsfiddle.net/251ue64h/
23 янв 18, 14:28    [21130750]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15471
dbpatch,

https://habrahabr.ru/company/microsoft/blog/140715/
https://habrahabr.ru/post/325760/
https://habrahabr.ru/company/nixsolutions/blog/326098/
https://habrahabr.ru/company/edison/blog/343796/
23 янв 18, 14:29    [21130754]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
dbpatch
Member

Откуда:
Сообщений: 1130
вадя
dbpatch,

https://habrahabr.ru/company/microsoft/blog/140715/
https://habrahabr.ru/post/325760/
https://habrahabr.ru/company/nixsolutions/blog/326098/
https://habrahabr.ru/company/edison/blog/343796/


Зачем это? это не работает с IE11, от которого по определению отказаться нельзя - в корпоративе он будет жить еще лет 10.
23 янв 18, 14:30    [21130766]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
hVostt
Member

Откуда:
Сообщений: 15267
dbpatch
Зачем это? это не работает с IE11, от которого по определению отказаться нельзя - в корпоративе он будет жить еще лет 10.


В мире вади есть только один единственный браузер -- хром, так что забей ))
23 янв 18, 14:32    [21130777]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
hVostt
Member

Откуда:
Сообщений: 15267
dbpatch
пробовал, он разве решает проблемы колонок?

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


вообще-то, ты должен вбивать ширину лабелс. тебе за резиновые лабелс в горизонтальных формах любой UX-дизайнер оторвёт руки по самую шею.

хотя, если программист взялся делать дизайн, катастрофу уже никто не остановит
23 янв 18, 14:34    [21130788]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15471
dbpatch
Зачем это? это не работает с IE11,

не совсем
https://caniuse.com/#search=CSS Grid
Partial support in IE refers to supporting an older version of the specification.
может что-то сработает.
23 янв 18, 14:36    [21130797]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
dbpatch
Member

Откуда:
Сообщений: 1130
hVostt
dbpatch
а я не хочу их поделки, из нужно сопровождать и поддерживать (обновлять), не говоря уже об изучении и багфиксах.
при том, что через три года оно окончательно загниет.


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

так что рассказывать сказки не нужно :)

https://jsfiddle.net/251ue64h/


интригующе, но спорно.

я сделал первую метку "First name name name" и растянул форму на 1920px. Вместо того, чтоб расположить все одну строку, он сделал перенос.

Фонарь-с...

Хотя да, интригующе, надо наверное поизучать этот ваш boostrap более детально, хотя первое впечатление было не очень, слишком много кода, чтоб это было сопровождабельно своими силами.
23 янв 18, 14:39    [21130826]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
dbpatch
Member

Откуда:
Сообщений: 1130
вадя
dbpatch
Зачем это? это не работает с IE11,

не совсем
https://caniuse.com/#search=CSS Grid
Partial support in IE refers to supporting an older version of the specification.
может что-то сработает.


то, что работает - ничем не отличается от обычного <table> или display:table, мотивации это "заюзать" - ноль целых ноль десятых
23 янв 18, 14:42    [21130847]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
hVostt
Member

Откуда:
Сообщений: 15267
dbpatch
я сделал первую метку "First name name name" и растянул форму на 1920px. Вместо того, чтоб расположить все одну строку, он сделал перенос.


он сделал абсолютно правильно. по всем канонам. в приложении могут быть десятки и сотни форм. если каждая форма будет прыгать и скакать в угоду каким-то кривым лейблам, это здорово ухудшает юзабилити. у нас даже проводились А/Б тесты именно на эту тему. по результатам мы никогда не делаем резиновые лабелс в горизонтальных формах.


dbpatch
Хотя да, интригующе, надо наверное поизучать этот ваш boostrap более детально, хотя первое впечатление было не очень, слишком много кода, чтоб это было сопровождабельно своими силами.


зато он работает одинаково на браузерах. и разметка под бутстрап просто пишется, без согласовывания с таблицами стилей. разработчики взаимозаменяемы. кастомизируется, тысячи решений и ответов на stacjoverflow. как можно этим пренебрегать?

да, есть и такое, бутстрап головного мозга. надо знать меру )
23 янв 18, 14:43    [21130853]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
hVostt
Member

Откуда:
Сообщений: 15267
hVostt
dbpatch
я сделал первую метку "First name name name" и растянул форму на 1920px. Вместо того, чтоб расположить все одну строку, он сделал перенос.


там надо точнее настраивать col-XX, под разные размеры экранов, понимать когда тебе нужен перенос блока, а когда нет.
23 янв 18, 14:44    [21130867]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
dbpatch
Member

Откуда:
Сообщений: 1130
hVostt
dbpatch
пробовал, он разве решает проблемы колонок?

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


вообще-то, ты должен вбивать ширину лабелс. тебе за резиновые лабелс в горизонтальных формах любой UX-дизайнер оторвёт руки по самую шею.

хотя, если программист взялся делать дизайн, катастрофу уже никто не остановит


у меня нет задачи "дизайна". у меня кодогенератор форм от базы данных, что-то вроде Oracle Apex, для сугубо внутренних задач, там невиданные лебедевые красоты не нужны.

считать фиксированно ширину меток - да, это похоже и придется делать.

в конце концов это уже приходится делать, чтоб сделать fixed-header, fixed-footer таблицы, там тоже - иначе никак, кроме как на server-side считать em-ки с запасом 20% чтоб не "налезало", но признаться я не думал, что и в области форм все настолько печально в этом вашем html.
23 янв 18, 14:46    [21130884]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
dbpatch
Member

Откуда:
Сообщений: 1130
hVostt
разработчики взаимозаменяемы. кастомизируется, тысячи решений и ответов на stacjoverflow. как можно этим пренебрегать?

да, есть и такое, бутстрап головного мозга. надо знать меру )

то-же самое говорили и про jQuery, дескать как этим можно пренебрегать?

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

т.е. в случае "протухания" меняем только собственную библиотеку, и все работает :)

но в контексте текущей задачи - вариант посчитать на сервере (в библиотеке) ширину label в em-ках с запасом - мне кажется куда меньшим злом, чем донавешивание еще и boostrap в зависимости
23 янв 18, 14:54    [21130941]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15471
dbpatch,
+100500
23 янв 18, 14:56    [21130957]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
skyANA
Member

Откуда: Зеленоград
Сообщений: 26400
dbpatch
skyANA
пропущено...

Раскурить HTML5 semantic elements и сделать.


ты уже раскрурил и сделал? пример покажешь?
Книга дома лежит. В ней примеры.
Как буду дома, то скину название.
23 янв 18, 15:10    [21131059]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
hVostt
Member

Откуда:
Сообщений: 15267
dbpatch
у меня нет задачи "дизайна". у меня кодогенератор форм от базы данных, что-то вроде Oracle Apex, для сугубо внутренних задач, там невиданные лебедевые красоты не нужны.


и что это меняет для пользователей?


dbpatch
считать фиксированно ширину меток - да, это похоже и придется делать.


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

dbpatch
в конце концов это уже приходится делать, чтоб сделать fixed-header, fixed-footer таблицы, там тоже - иначе никак, кроме как на server-side считать em-ки с запасом 20% чтоб не "налезало", но признаться я не думал, что и в области форм все настолько печально в этом вашем html.


вот здесь, признаться, ничего не понял
23 янв 18, 15:11    [21131065]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
hVostt
Member

Откуда:
Сообщений: 15267
dbpatch
то-же самое говорили и про jQuery, дескать как этим можно пренебрегать?


и что jQuery куда-то делся? живёт и здравствует. полегчал в размерах в связи с отказом от поддержки старых браузеров в новых версиях. но также используется везде и повсеместно. нет смысла отказываться.

dbpatch
т.е. в случае "протухания" меняем только собственную библиотеку, и все работает :)


кто заплатит за разработку собственной библиотеки? и сколько это займёт времени?


dbpatch
но в контексте текущей задачи - вариант посчитать на сервере (в библиотеке) ширину label в em-ках с запасом - мне кажется куда меньшим злом, чем донавешивание еще и boostrap в зависимости


если кажется, то конечно, ради бога. но никаких объективных причин, хотя бы одной, отказываться от бутстрапа или других решений, пока не увидел.
23 янв 18, 15:14    [21131086]     Ответить | Цитировать Сообщить модератору
 Re: Form Layout, текущая печальная ситуация  [new]
skyANA
Member

Откуда: Зеленоград
Сообщений: 26400
dbpatch
у меня нет задачи "дизайна". у меня кодогенератор форм от базы данных, что-то вроде Oracle Apex, для сугубо внутренних задач, там невиданные лебедевые красоты не нужны

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

Вот если бы стояла задача спроектировать (задизайнить) свой набор компонентов с определённым поведением, то да...
23 янв 18, 15:22    [21131143]     Ответить | Цитировать Сообщить модератору
Топик располагается на нескольких страницах: [1] 2 3 4 5 6   вперед  Ctrl      все
Все форумы / HTML, JavaScript, VBScript, CSS Ответить