Модераторы: 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   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




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


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

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