jQuery 모바일, 접을 수있는 키 - 값 표 : 크기 조정 헤더 50/50 (아이콘 포함)

Question

많은 표/키 - 값 데이터가 있습니다. 사용자가 첫 번째 항목을 클릭 할 때 항상 한 항목을 표시하고 나머지는 this jsFiddle : jQuery를 모바일 헤더 항목에 아이콘 ("고객 : 마리오의 배관 공사")을 추가

그러나

<div data-role="collapsible"> 
    <h3><div class="ui-grid-a"> 
     <div class="ui-block-a">Customer:</div> 
     <div class="ui-block-b">Mario's Plumbing</div></div></h3> 
    <ul data-role="listview"> 
    <li><div class="ui-grid-a"> 
     <div class="ui-block-a">Phone:</div> 
     <div class="ui-block-b">1-800-MUS-ROOM</div></div></li> 
    ... 
    </ul> 
</div> 

, 값 필드, 즉 "마리오의 배관"는의 값 필드와 일치하지 않습니다 <ul> 목록, 즉 "1-800-MUS-ROOM".

jQuery는 아이콘이 "Customer : Mario 's Plumbing"상자와 나란히 놓여 있다고 생각합니다. 이것은 내가 보는 것과 호환됩니다. 정렬 오류는 키 필드의 버튼 폭의 100 %와 비슷한 것처럼 보입니다. value 필드에 대한 버튼의 50 %는 ui-grid-a (50/50 분할을 사용함)를 사용하면 기대할 수 있습니다. 아이콘을 왼쪽 50 %의 일부가되도록하고 싶습니다. 즉, 그 상자 옆에있는 것이 아니라 내부가됩니다. 내가 할 수 있을까? 방법? 그것은 쉬운 CSS일지도 모릅니다. 나는 CSS 지연을 느낍니다.

Answer 1

jQuery 모바일 요소 스타일이 함께 연주되지 않는 것처럼 보입니다.이 경우 collapsible block 및 grid layout 스타일입니다.

접을 수있는 블록은 아이콘과 헤더를 채우는 스타일을 추가합니다.

.ui-btn-inner { 
    padding:.6em 20px; 
} 

추가 규칙은 훨씬 더를 왼쪽으로 채 웁니다

.ui-collapsible-heading .ui-btn-inner, .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner { 
    padding-left: 40px; 
} 

을 (거리 아이콘에서 텍스트를 이동) 그러나 이것은 40px 남긴 모든 헤더 텍스트를 푸시합니다.

불일치를 해결할 수있는 유일한 방법은 추가 규칙을 추가하여 두 번째 블록을 왼쪽으로 이동하는 것입니다. 다음 규칙을 추가하면 텍스트가 다시 정렬됩니다.

.ui-collapsible-heading .ui-btn-inner .ui-grid-a .ui-block-b { 
    margin-left:-10px; 
} 

로컬 Chrome 브라우저 테스트에서 다른 페이지 확대/축소 수준에서 제대로 작동하는 것으로 보이지만 모바일 장치에서 테스트하지 않았습니다.

편집 :는 또한, 예와 바이올린에 오타가, 당신이 un-block-b 및 마리오의 배관에 대한하지 ui-block-b 있습니다.