Вложенные складные объекты ломают макет jQuery Mobile - PullRequest
Новая
       0

Вложенные складные объекты ломают макет jQuery Mobile

0 голосов
/ 17 ноября 2011

Я пытался вложить свертываемый объект в просмотр списка, но это нарушает мой макет: http://dl.dropbox.com/u/17844821/zeug/jquery_mobile_collapsible_break.jpg

Что не так?

Вот мой код: 

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>jQMail</title> 
    <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head> 
<body> 
<div data-role="page" data-theme="d">
    <div data-role="header" data-theme="d">
        <h1>jQMail</h1>
    </div>
    <ul data-role="listview">
        <li><a href="#inbox">INBOX</a></li>
        <li><a href="#inbox">Sent</a></li>
        <li><a href="#inbox">Trash</a></li>
        <li>
            <h3>Archive</h3>
            <div data-role="collapsible" data-content-theme="d">
                <h3>By date</h3>
                <ul data-role="listview" data-inset="true" data-theme="d">
                    <li><a href="#m2010">2010</a></li>
                    <li><a href="#m2009">2009</a></li>
                    <li><a href="#m2008">2008</a></li>
                </ul>   
            </div>
        </li>
    </ul> 
</div>
</body>
</html>

1 Ответ

1 голос
/ 21 ноября 2011

CSS, импортированный из jquery.mobile.min.css, применяет поле 

.ui-collapsible-content {
  margin: 0 -8px;
  ...

Вы можете переопределить его с помощью CSS, добавив margin в стиле .ui-collapsible-content, например: 

.ui-collapsible-content {
    margin: -9px 0 0 0 ;
}

Редактировать : Если вы просто хотите воздействовать только на этот компонент, вы можете добавить id в родительский div и указать путь CSS. Например: 

<div id="dateListView" data-role="collapsible" data-content-theme="d"> ...

с этим CSS 

div#dateListView.ui-collapsible div.ui-collapsible-content {
    margin: -9px 0 0 0 ;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...