Мне нужна полоса прокрутки для начала в содержании (не в заголовке) - JQuery Mobile

Я создаю диалоговое окно в jquery mobile с некоторыми данными. Полоса прокрутки располагается над заголовком, а не только содержимым. Можно ли запустить полосу прокрутки только для содержимого, а не для заголовка. Вот мой код: dialog.htmlМне нужна полоса прокрутки для начала в содержании (не в заголовке) - JQuery Mobile

<body > 


<div id="Dialog" style="width: 400px; min-height: 200px; max-height: 250px; overflow: auto;"> 

    <div data-role="header" class="mHeader" data-close-btn="right"> 
     <div style="overflow: hidden;"> 
      <h3 style="display: inline-block; width: 130px; text-shadow: 0 1px 0 #fff; font-size: 16px; color: #FF0000; float: left; margin-left: 48px; margin-top: 9px;">Names</h3> 
      <div style="display: inline-block; width: 130px; float: left; margin-left: 250px; margin-top: -35px; font-size: 12px; text-decoration: none; color: #5089B5; font-weight: bold; cursor: pointer;"> Reports</div> 
     </div> 
    </div> 

    <div data-role="content" style="padding: 2px 15px 15px 15px;"> 
     <div style="width: 300px; padding-left: 27px; "> 
      <ul data-role="listview" data-inset="true"> 
       <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c"> 
       <div style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222"> ABC</div> 

       </li> 
       <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222; background: #fafafa;">ABC 

       </li> 
      <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC 

       </li> 
       <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC 

       </li>  
      </ul>  
      <ul data-role="listview" data-inset="true"> 
       <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c"> 
       <div style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222"> ABC</div> 

       </li> 
       <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222; background: #fafafa;">ABC 

       </li> 
      <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC 

       </li> 
       <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC 

       </li>  
      </ul>  
      <ul data-role="listview" data-inset="true"> 
       <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c"> 
       <div style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222"> ABC</div> 

       </li> 
       <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222; background: #fafafa;">ABC 

       </li> 
      <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC 

       </li> 
       <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC 

       </li>  
      </ul>  



     </div> 
    </div> 

</div> 

</body>

источник

2014-09-05 Mm125

Для обеспечения кода необходимо использовать 4 пробелов , – doforumda

Просто поместите макс-высоту и перелив на контент DIV вместо диалогового DIV:

<div id="Dialog" style="width: 400px; "> 
    <div data-role="header" class="mHeader" data-close-btn="right"> 
     <div style="overflow: hidden;"> 
      <h3 style="display: inline-block; width: 130px; text-shadow: 0 1px 0 #fff; font-size: 16px; color: #FF0000; float: left; margin-left: 48px; margin-top: 9px;">Names</h3> 

      <div style="display: inline-block; width: 130px; float: left; margin-left: 250px; margin-top: -35px; font-size: 12px; text-decoration: none; color: #5089B5; font-weight: bold; cursor: pointer;">Reports</div> 
     </div> 
    </div> 
    <div data-role="content" style="padding: 2px 15px 15px 15px; min-height: 150px; max-height: 200px; overflow: auto;"> 
     <div style="width: 300px; padding-left: 27px; "> 
      <ul data-role="listview" data-inset="true"> 
       ...

для мобильных устройств, вы также хотите, чтобы добавить -webkit-overflow-scrolling: touch; а также переполнение: авто.

Поскольку ваш код не соответствует контексту, трудно понять вашу точную ситуацию. Вы, возможно, потребуется использовать JavaScript для расчета требуемой высоты ...

UPDATE: Adrien быть уже тряхнуло меня из моей лени :)

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

Например, вместо:

<div data-role="content" style="padding: 2px 15px 15px 15px; min-height: 150px; max-height: 200px; overflow: auto;">

Попробуйте

<div data-role="content" class="scrollableContent">

Затем создайте класс scrollableContent в файле CSS:

.scrollableContent { 
    padding: 2px 15px 15px 15px; 
    min-height: 150px; 
    max-height: 200px; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
}

источник

2014-09-05 14:51:18 ezanker

inline styling! :(Давай, я уверен, ты тоже можешь показать ему лучший способ сделать это –

Спасибо @AdrienBe! Я преодолел свою лень и обновил ответ;) – ezanker

Спасибо, ребята, я просто хотел сообщить вам, что я не используйте встроенный стиль. Я просто использовал его, чтобы показать код. – Mm125

Мне нужна полоса прокрутки для начала в содержании (не в заголовке) - JQuery Mobile

ответ

Смежные вопросы