안녕하세요

예전에 의뢰를 통해 만든 "훈련일지 모듈(게시판+통계 정도의 기능 포함)"을 수정중인데요

스마트폰에서 볼 때는 PC버전과 다른 테이블을 보여주려고

css 파일에 @media 를 추가해주는 중인데요

기존에 리스트를 보여주는 부분이

<div class="moneybook-list-page">...</div> 이렇게 묶여있길래

그대로 하나 복사해서 <div class="moneybook-mobile"></div>로 묶고

기존 부분을 <div class="moneybook-pc"></div>로 묶었습니다

그리고 css 에서 

.moneybook-mobile{display:none;}

으로 하고 max-width:1023px 에서는

.moneybook-pc{display:none;}

.moneybook-mobile{display:inherit:]

이렇게 했습니다

한마디로 기존것 복사 -> 피씨용 테이블 / 모바일용 테이블 2개를 만들어서 너비에 따라 둘 중 하나를 보여주려고 꼼수를 쓴 건데요

 

그런데 PC버전에서는 목록 아래 페이지 넘버(누르면 페이지 이동되는) 가 뜨는데

왜 그대로 복사해서 만든 모바일용에서는 그게 안뜰까요? ㅠㅠㅠ

태그 수정으로 꼼수만 부리는 초보를 도와주세요

자세한 현재 상황을 사진 첨부합니다

 

formobile.jpg

 

 

 

forpc.jpg

 

참고로 저 페이지 넘버 부분 코드는

<block loop="$page_no=$page_navigation->getNextPage()">
<strong cond="$page==$page_no">{$page_no}</strong>
<a cond="$page!=$page_no" href="{getUrl('page',$page_no,'document_srl','','division',$division,'last_division',$last_division)}">{$page_no}</a>            </block>

이렇게 되어있습니다.

 

답변 기다리겠습니다 꾸벅.

 

  • ?
    자문자답이네요. 완전히 해결한 건 아니고 또 꼼수로 대충 해결했습니다.
    검색해보니 한 페이지에 페이지 네비게이션 두개는 안 되나보더군요.
    두개를 넣으면 위에껀 정상으로 보이고 아래껀 안보인다는 질문글이 있더라구요.
    근데 제 방법이 한 페이지에 넓은화면용(pc,태블릿), 좁은화면용(스마트폰) 으로 두개를 만들어서
    폭에 따라서 둘 중 하나를 보여주도록 만든거라 딱 그 상황이거든요.
    이리저리 해봐도 잘 모르겠어서 그냥 좁은화면용(모바일용)에는 이전/다음 을 추가하고 말았습니다.
    그래서 처음으로 이전 다음 끝으로 이렇게 나오도록 했고요
    해당 소스 부분 각각을 따로 파일로 빼서 include로 처리해볼까 생각중인데 왠지 그래도 똑같을 거 같긴 하네요.