| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > Искажение div в табличном виде |
| Автор: Aver78 19.3.2018, 00:36 | ||||||
}
Через ajax добавляется в <div class='option'>
Если есть тег формы, то итог получается кривой. Заголовки расятгиваюся, строка сжимается. Если тега формы нет, то все в порядке. Но он мне нужен. Как победить ? |
| Автор: ksnk 19.3.2018, 02:42 |
| Нужно посмотреть на получающуюся разметку в отладчике и все станет ясно. Вероятно, одно из правил больше не соответствует своему элементу |
| Автор: Aver78 19.3.2018, 07:48 |
| Да вроде никаких заблокированых свойств не нашел. Хотя попробовал в опере, вообще такая разметка не катит. |
| Автор: ksnk 19.3.2018, 11:27 |
| Процесс называется отладка. Для примера - возьмем Хром, в нем все довольно прозрачно. Правой кнопкой мышки кликаешь на том элементе, который выглядит неправильно и в контекстном меню выбираешь пункт "Просмотреть код элемента". Появится окошко отладчика в нем будет выбранный элемент и примененные к нему css правила. Если сделать тестовый пример, то можно будет дать более конкретные рекомендации |
| Автор: Aver78 19.3.2018, 16:56 |
| Не понятно при чем тут отладка. Все это я смотрел, только в фф а не в хроме. Почему тег формы корежит разметку, и как этого избежать. Вот что я не могу понять. А что там перестало работать, по большому счету по фиг. |
| Автор: ksnk 19.3.2018, 17:31 |
| Aver78, https://jsfiddle.net/go62ax05/ вот что такое тестовый пример. На нем не видно что происходит что-то неправильное. Каким образом кто-либо еще сможет определить что происходит? P.S. первоначальная ссылка поправлена |
| Автор: Aver78 19.3.2018, 22:12 |
| https://jsfiddle.net/go62ax05/4/ |
| Автор: ksnk 19.3.2018, 22:48 |
| Тег form вставляется не в .option, а почему то во второго чилда этого элемента, при этом логика "табличной" разметки ломается. Есть специальная функция в jQuery - wrap, возможно ее использование будет более удобным. |
| Автор: Aver78 20.3.2018, 00:36 |
| Тег форм не вставляется отдельно. он вставляется вместе со всей строкой. Я пробовал ставить form и до tr, и после tr (<div class=tr> понятно) и даже запихивать в первый div с td. Не помогает. Wrap'оп тоже не помогает. |
| Автор: ksnk 20.3.2018, 09:54 |
| https://jsfiddle.net/h3w9wzce/2/ неубедительно. |
| Автор: Aver78 20.3.2018, 10:21 |
| Э нет. Мне нужна обернутая каждая строка, а не вся таблица. |
| Автор: ksnk 20.3.2018, 13:09 |
| <form class="tr"> не поможет? |
| Автор: Aver78 20.3.2018, 15:38 |
| Не помогает, получается такое же, в точности, искажение. Как то непонятно откуда это пошло. Раньше тегом форм можно было даже табличные tr оборачивать. Ну да ладно. Может стоит попробовать решить проблему шире. Суть в том, что требуется каждую созданную строку иметь возможность сохранить(как собственно, думаю, понятно из разметки). Сохранение идет с помощью $.ajax и .serializeArray(). this - это буттон в конце каждой строки соответственно. $(this).closest('form').serialize(); - такой запрос вполне корректно обрабатывется. Однако если попробовать не обьернуть form, то например если использовать таблицу и ориентироваться по tr то $(this).closest('tr').serialize(); - ни фига не обрабатывает, хотя $(this).closest('tr').html(); показывает что выдирается нужный кусок с полями ввода. Если обертывать tr таблицы, то, либо он не создается, либо браузер закрывает тег формы сам, сразу после открытия, а не там где прописано. Это собственно конечная задача, из который вылез гемморой с разметкой. В принципе можно, наверное, можно выдрать все возможные поля ввода, и их сериализировать. Но код при этом усложнится и серверный в том числе. Хочется этого избежать, ибо, как мне кажется, вопрос решаем. |
| Автор: ksnk 20.3.2018, 17:39 |
| Сериализуется на самом деле не форма, а элементы формы. Так что сработает такое $(this).closest('tr').find('input, select, textarea').serialize() |
| Автор: Aver78 20.3.2018, 18:24 | ||
Это как раз то, чего я хочу избежать. |
| Автор: ksnk 20.3.2018, 18:37 |
| Ты хочешь избежать именно того, о чем просишь? https://jsfiddle.net/h3w9wzce/7/ В каком броузере не работает так? |
| Автор: Aver78 20.3.2018, 21:36 | ||||
Я хочу избежать выборки элементов формы путем перечисления всех возможных.
например в фф. Если я копирую из браузера исходник и вставляю его на jsfiddle.net, то все показывает хорошо, но при динамичном создании такая же кривизна как с div. |
| Автор: ksnk 20.3.2018, 22:26 | ||
всех возможных - всего 3. Можно теоретически еще button приплюсовать, но его практическая ценность не особо велика.
https://jsfiddle.net/h3w9wzce/24/ ? |
| Автор: Aver78 20.3.2018, 22:57 | ||
Угу, именно оно. Не поленился попробавл и не динамичное. Тупо вписал 1 строку с полями в исходник. При диве - все в порядке, при добавлении формы, или замене дива-тр формой - кривит, а тут - jsfiddle.net, да, показывает что все в порядке. |
| Автор: ksnk 23.3.2018, 12:54 |
| Получилось продвинутся? Кстати, в том примере, который по твоим ссылкам - не закрыт один из блоков div, возможно это что-то прояснит |
| Автор: Aver78 23.3.2018, 14:39 |
| Забил пока что. Позже вернусь к этому вопросу. Пока поставил целиковые таблицы на каждую строку. |
| Автор: Mariia 7.4.2018, 12:45 |
| Прошу прощения, но мне кажется это какой-то колхоз. Зачем использовать <div> в табличном формате, если во-первых есть таблицы, а во-вторых, нынче есть более приемлемые способы для манипуляции содержимым, нежели display: table. Если приходится так колхозить, хорошенько задумайся о подходе! |
| Автор: Aver78 12.4.2018, 17:33 | ||
Прежде чем комментировать, неплохо бы прочитать. Вдруг в предыдущецй переписке указана причина такого подхода, например
|
| Автор: Aver78 28.8.2018, 12:36 | ||||
В общем наступил на эти грабли в еще в одном месте и решил что лучший вариант пойти, таки, путем предложенным тобой где то ранее, то есть
На первый взгляд все не так страшно как мне думалось, но будем посмотреть что вылезет со временем. |
| Автор: OleksMone 31.7.2019, 15:56 |
Модератор: Сообщение скрыто. |
