Я использую плагин toChecklist для jQuery.Все отлично работает на моей машине развития.Однако, когда я устанавливаю свое приложение, которое использует плагин, на моем промежуточном сервере, плагин toChecklist выглядит неправильно.
По сути, вместо того, чтобы все флажки были выстроены в столбец, одинповерх других, флажки формируют больше как пошаговый взгляд.Каждый флажок имеет отступ от одного над ним.
Когда я устанавливаю приложение на свой локальный компьютер, оно также отлично выглядит.
Я занимаюсь разработкой в среде ASP.NET MVC.
Я предполагаю, что оно что-тоделать с CSS.Итак, я поиграл с CSS.Если я удалил размер шрифта как из css по умолчанию, который поставляется вместе с плагином, так и из тега body в моем css для всего сайта, флажки будут правильно выстроены.Однако, это не жизнеспособное решение, очевидно, так как это влияет на весь мой сайт.
Я не дизайнер, скорее парень среднего уровня, поэтому любое предложение будет высоко оценено.
Вот css по умолчанию, который поставляется с подключаемым модулем:
div.checklist, div.checklistHighlighted { overflow-y: auto; overflow-x: hidden; /* If
you don't want scrollbars, leave this one blank. */ }
div.checklist { border: 1px solid gray; border-left: 3px solid #ccc; color: #555; font-family: arial; font-size: 10px; line-height: 1.6em; clear:both;}
div.checklistHighlighted { border: 1px solid gray; border-left: 3px solid ##93BFE5; }
ul.checklist { list-style-type: none; margin: 0; padding: 0; }
div.checklist li { padding: 2px; }
div.checklist li.even { background-color: white; }
div.checklist li.odd { background-color: #f7f7f7; }
div.checklist li.even:hover, div.checklist li.odd:hover, div.checklist li.focused, div.checklist li:hover label { background-color: #93BFE5; }
div.checklist li.checked { background: #93BFE5; font-style: italic; }
div.checklist li.checked:hover, div.checklist li.checked:hover label { background: #93BFE5; font-style: italic; }
div.checklist label.disabled { color: #ddd; }
/*div.checklist li { position: relative; }*/
div.checklist li input { display: block; float: left; }
div.checklist label { display: block; margin: 0; padding: 0; }
div.checklist label.leaveRoomForCheckbox { display: block; padding-left: 25px; /* If hiding checkboxes, set padding-left to 3px */ }
ul.showSelectedItems { color: #770; font-size: .8em; list-style-position: outside; margin-left: 0; padding-left: 1.4em; }
/**** Search box ****/
div.findInList { margin-bottom: 5px; }
div.findInList input { background-color: #ffffef; border: solid 1px #eee; color: black; font-family: arial; font-size: .8em; padding: 2px; }
div.findInList input.blurred { background-color: white; color: gray; }
div.checklist li.optgroup { font-size: 1.1em; font-weight: bold; font-style: italic; background-color: #ccc; border-top: 1px solid #777; border-bottom: 1px solid #777; padding-left: 7px; }
div.checklist li.optgroup:hover { background-color: #ccc; }
Джереми,
Я все еще работаю над этой проблемой (меня отвлекли в конце прошлой недели)
По вашей просьбе он является ссылкой: http://jsfiddle.net/kMkqk/
По сути, я удалил почти все со своей страницы, кроме CSS и кода для плагина.Надеюсь, что эту проблему легче выявить.
Теперь вот странная часть.Когда я запускаю ссылку на моей локальной машине для разработки, все флажки располагаются друг над другом, что я и хочу.Однако, когда я перехожу на ссылку на моем промежуточном сервере и сервере QA, флажки имеют этот шаг (каждый флажок имеет отступ от одного над ним), чего я не хочу.
Дайте мне знать, что вы видите и каковы ваши мысли.
Любая помощь будет высоко ценится.Спасибо за помощь.
R