Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Искажение div в табличном виде 
:(
    Опции темы
Aver78
Дата 19.3.2018, 00:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Код

div.table{
  display: table;
  width: 100%;
  border-collapse: collapse;
}
div.tr{
  display: table-row;
}
div.td{
  display: table-cell;
  text-align: center;
  border: none;
  border: 1px solid #ccc;
  vertical-align: middle;

}

Код

echo "<div class='option'>
  <div class='tr'>
        <div class='td'>Тип</div>
        <div class='td'>Название</div>
        <div class='td'>Ед. изм.</div>
   </div>
    </div>";


Через ajax добавляется в <div class='option'>

Код

<form>
  <div class='tr'>
        <div class='td'>поле ввода</div>
        <div class='td'>поле ввода</div>
        <div class='td'>поле ввода</div>
   </div>
</form>


Если есть тег формы, то итог получается кривой. Заголовки расятгиваюся, строка сжимается. Если тега формы нет, то все в порядке. Но он мне нужен. Как победить ?



PM MAIL   Вверх
ksnk
Дата 19.3.2018, 02:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



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



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aver78
Дата 19.3.2018, 07:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Да вроде никаких заблокированых свойств не нашел. Хотя попробовал в  опере, вообще такая разметка не катит.
PM MAIL   Вверх
ksnk
Дата 19.3.2018, 11:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Процесс называется отладка. Для примера - возьмем Хром, в нем все довольно прозрачно. 
Правой кнопкой мышки кликаешь на том элементе, который выглядит неправильно и в контекстном меню выбираешь пункт "Просмотреть код элемента". Появится окошко отладчика в нем будет выбранный элемент и примененные к нему css правила.
Если сделать тестовый пример, то можно будет дать более конкретные рекомендации


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aver78
Дата 19.3.2018, 16:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Не понятно при чем тут отладка. Все это я смотрел, только в фф а не в хроме. Почему тег формы корежит разметку, и как этого избежать. Вот что я не могу понять. А что там перестало работать, по большому счету по фиг.
PM MAIL   Вверх
ksnk
Дата 19.3.2018, 17:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Aver78,  https://jsfiddle.net/go62ax05/ вот что такое тестовый пример. На нем не видно что происходит что-то неправильное. Каким образом кто-либо еще сможет определить что происходит?
P.S. первоначальная ссылка поправлена

Это сообщение отредактировал(а) ksnk - 19.3.2018, 20:26


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aver78
Дата 19.3.2018, 22:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



PM MAIL   Вверх
ksnk
Дата 19.3.2018, 22:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Тег form вставляется не в .option, а почему то во второго чилда этого элемента, при этом логика "табличной" разметки ломается. Есть специальная функция в jQuery - wrap, возможно ее использование будет более удобным.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aver78
Дата 20.3.2018, 00:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Тег форм не вставляется отдельно. он вставляется вместе со всей строкой.  Я пробовал ставить form и до tr, и после tr (<div class=tr> понятно) и даже запихивать в первый div с td. Не помогает. 
Wrap'оп тоже не помогает.
PM MAIL   Вверх
ksnk
Дата 20.3.2018, 09:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



https://jsfiddle.net/h3w9wzce/2/
неубедительно. 


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aver78
Дата 20.3.2018, 10:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Э нет. Мне нужна обернутая каждая строка, а не вся таблица.
PM MAIL   Вверх
ksnk
Дата 20.3.2018, 13:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



<form class="tr"> не поможет?


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aver78
Дата 20.3.2018, 15:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Не помогает, получается такое же, в точности, искажение. 

Как то непонятно откуда это пошло. Раньше тегом форм можно было даже табличные tr оборачивать.

Ну да ладно. Может стоит попробовать решить проблему шире. Суть в том, что требуется каждую созданную строку иметь возможность сохранить(как собственно, думаю, понятно из разметки). Сохранение идет с помощью $.ajax и .serializeArray(). 

this - это буттон в конце каждой строки соответственно.  
$(this).closest('form').serialize(); - такой запрос вполне корректно обрабатывется. Однако если попробовать не обьернуть form, то например если использовать таблицу и ориентироваться по tr то $(this).closest('tr').serialize(); - ни фига не обрабатывает, хотя $(this).closest('tr').html(); показывает что выдирается нужный кусок с полями ввода. Если обертывать tr таблицы, то, либо он не создается, либо браузер закрывает тег формы сам, сразу после открытия, а не там где прописано.

Это собственно конечная задача, из который вылез гемморой с разметкой.


В принципе можно, наверное, можно выдрать все возможные поля ввода, и их сериализировать. Но код при этом усложнится и серверный в том числе. Хочется этого избежать, ибо, как мне кажется, вопрос решаем.
PM MAIL   Вверх
ksnk
Дата 20.3.2018, 17:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Сериализуется на самом деле не форма, а элементы формы. Так что сработает такое 
$(this).closest('tr').find('input, select, textarea').serialize()


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aver78
Дата 20.3.2018, 18:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Цитата

$(this).closest('tr').find('input, select, textarea').serialize() 


Это как раз то, чего я хочу избежать. 
PM MAIL   Вверх
ksnk
Дата 20.3.2018, 18:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Ты хочешь избежать именно того, о чем просишь? 

https://jsfiddle.net/h3w9wzce/7/ В каком броузере не работает так?


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aver78
Дата 20.3.2018, 21:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Цитата

Ты хочешь избежать именно того, о чем просишь? 


Я хочу избежать выборки элементов формы путем перечисления всех возможных.


Цитата(ksnk @  20.3.2018,  18:37 Найти цитируемый пост)
https://jsfiddle.net/h3w9wzce/7/ В каком броузере не работает так? 


например в фф. Если я копирую из браузера исходник и вставляю его на jsfiddle.net, то все показывает хорошо, но при динамичном создании такая же кривизна как с div.

PM MAIL   Вверх
ksnk
Дата 20.3.2018, 22:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



всех возможных - всего 3. Можно теоретически еще button приплюсовать, но его практическая ценность не особо велика.
Цитата(Aver78 @  20.3.2018,  21:36 Найти цитируемый пост)
но при динамичном создании такая же кривизна как с div.

https://jsfiddle.net/h3w9wzce/24/ ?


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aver78
Дата 20.3.2018, 22:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Цитата(ksnk @  20.3.2018,  22:26 Найти цитируемый пост)
https://jsfiddle.net/h3w9wzce/24/ ? 


Угу, именно оно. Не поленился попробавл и не динамичное. Тупо вписал 1 строку с полями в исходник. При диве - все в порядке, при добавлении формы, или замене дива-тр формой - кривит, а тут - jsfiddle.net, да, показывает что все в порядке.

Это сообщение отредактировал(а) Aver78 - 21.3.2018, 00:24
PM MAIL   Вверх
ksnk
Дата 23.3.2018, 12:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Получилось продвинутся? Кстати, в том примере, который по твоим ссылкам - не закрыт один из блоков div, возможно это что-то прояснит


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aver78
Дата 23.3.2018, 14:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Забил пока что. Позже вернусь к этому вопросу. Пока поставил целиковые таблицы на каждую строку.
PM MAIL   Вверх
Mariia
Дата 7.4.2018, 12:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 23
Регистрация: 7.4.2018

Репутация: нет
Всего: нет



Прошу прощения, но мне кажется это какой-то колхоз. Зачем использовать <div> в табличном формате, если во-первых есть таблицы, а во-вторых, нынче есть более приемлемые способы для манипуляции содержимым, нежели display: table.
Если приходится так колхозить, хорошенько задумайся о подходе!

PM MAIL WWW   Вверх
Aver78
Дата 12.4.2018, 17:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Прежде чем комментировать, неплохо бы прочитать. Вдруг в предыдущецй переписке указана причина такого подхода, например 

Цитата

...
$(this).closest('form').serialize(); - такой запрос вполне корректно обрабатывется. Однако если попробовать не обьернуть form, то например если использовать таблицу и ориентироваться по tr то $(this).closest('tr').serialize(); - ни фига не обрабатывает, хотя $(this).closest('tr').html(); показывает что выдирается нужный кусок с полями ввода. Если обертывать tr таблицы, то, либо он не создается, либо браузер закрывает тег формы сам, сразу после открытия, а не там где прописано.
....

PM MAIL   Вверх
Aver78
Дата 28.8.2018, 12:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет



Цитата

Получилось продвинутся? 

В общем наступил на эти грабли в еще в одном месте и решил что лучший вариант пойти, таки, путем предложенным тобой где то ранее, то есть
Цитата

('input, select, textarea')

На первый взгляд все не так страшно как мне думалось, но будем посмотреть что вылезет со временем.
PM MAIL   Вверх
OleksMone
Дата 31.7.2019, 15:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 30.7.2019
Где: Dallas

Репутация: нет
Всего: нет




Модератор: Сообщение скрыто.

PM MAIL WWW   Вверх
Страницы: (2) [Все] 1 2 
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.2427 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.