JQueryUI аккордеон вызывает перенос при использовании значка - PullRequest
Новая
       6

JQueryUI аккордеон вызывает перенос при использовании значка

3 голосов
/ 26 сентября 2011

Используя тему baic redmond из jQueryUI, мои аккордеоны не сидят правильно. Я думал, что что-то в моей таблице стилей вызывает проблемы, но я удалил это, и это все еще фанк. Я удалил его, вернемся к этому, и он все еще оборачивает значок треугольника и текст в 2 x строки. 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nodes</title>
<link rel="stylesheet" type="text/css" href="/DFCx/css/jQueryUI_redmond/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="/DFCx/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/DFCx/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/DFCx/js/page/Nodes/view.js"></script>
</head>
<body>
  <div id="accordion" class="accordion">
        <h3>Title</h3>
        <div>junk</div>
        <h3>Title</h3>
        <div>junk</div>
        <h3>Title</h3>
        <div>junk</div>
        <h3>Title</h3>
        <div>junk</div>
    </div>
</body>
</html>

Скрипт аккордеона (view.js) просто имеет: 

$( "#accordion" ).accordion({ 
    autoHeight: false, 
    collapsible: true, 
    header: 'h3' 
});

Аккордеон работает отлично, открывает, закрывает, помещает и т. Д., Он просто оборачивает h3, когда ставит иконку на место!

см. http://i.imgur.com/1fwD2.png для примера скриншота результата

Когда я использую "icons: false" в конфигурации аккордеона, он оставляет значки выключенными и работает как положено, но я бы хотел, чтобы они были там! Пробовал разные таблицы стилей пользовательского интерфейса (облачность и т. Д.) И все ту же проблему в разных цветах.

Есть ли что-то, что я пропускаю?

- обновить (пока не уверен, что это решение) В файле jQueryUI css была эта строка: 

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

который я отредактировал как 

.ui-icon { display: block; float: left; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

(примечание добавлено с плавающей точкой: слева;)

Это исправило положение иконки в заголовках и работает как угощение. Скрестим пальцы, что у него нет никаких неприятных эффектов для других значков :(

Ответы [ 4 ]

2 голосов
/ 26 декабря 2013

У меня та же проблема, и я исправил ее: 

/* correct accordion headers*/
.ui-accordion-header span{ position: absolute; }
.ui-accordion-header a { margin-left: 20px; }
2 голосов
/ 26 сентября 2011

Ваши заголовки также должны быть заключены в тег <a>: 

<h3><a href="#">Title</a></h3>
1 голос
/ 27 сентября 2011

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

Попробуйте использовать другой CSS, например, такой: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css.

Иливыберите тему, которую вы используете на этой странице: http://blog.jqueryui.com/2010/09/jquery-ui-1-8-5/.

Вам все еще нужно убедиться, что вы стилизовали заголовки аккордеона , как описано (и предложено Ларри): 

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>
0 голосов
/ 19 июля 2015

Для меня сработало комбинированное решение @ton и @ LarryLustig.

  1. Ваши заголовки должны быть обернуты в <a>

    <h3><a href="#">Title</a></h3>

  2. Стиль на странице

    .ui-accordion-header span{ position: absolute; } .ui-accordion-header a { margin-left: 20px; }

...