질문/공유질답게시판

flat layout 체크박스 문제

루딩

xetown 에서 무료로 배포해주신 덕분에 너무 잘사용하고 있습니다.

 

다만 회원가입 확장모듈(join_extend)사용시

 

약관을 초기페이지에 나타내주는데

 

체크박스가 보이질 않아서 선택할 수가 없는데

 

다른 레이아웃으로 변경하면 정상적으로 나타나는데

 

flat layout에선 보이질 않아 다음단계로의 진행이 어렵네요 ㅠ

 

(해당 페이지의 소스를 보면

<p class="checkAgreement"><input name="" type="checkbox" value="" id="checkPrivateAgreement" class="inputCheck" /><label for="checkPrivateAgreement">개인정보취급방침에 동의 합니다.</label></p>

이런식으로 코드가 있긴 있습니다.

 

아무래도 flatlayout의 css checkbox를 안보이게 가리는데, join_extend의 스킨에도 영향을 미친 것 같은데.. (털썩)

 

 

 

혹시 해결하신 분이 계시다면 조언 부탁드립니다.

1111.png

 

 

위로 아래로
댓글 21
  • profile
    레이아웃단에서 display:none 처리하고 flat모바일에서는 자체 디자인을 적용해서 그렇습니다.
    제가 사용한 방법은 문제가 되는 자료들마다 css요소에 !important 로 보이지 않는 것을 다시 보이게 처리 했습니다.

    레이아웃단에서 안보이게 처리하다보니 그이하 모듈이나 애드온에서 전부 그게 먹어버리더군요.
  • profile ?
    오오 고맙습니다 저도 그게 의심되었는데

    css를 몰라서 !important가 안보이게 하는 명령어군요~~! 찾아보겠습니다
  • ? ?
    display:none 속성이 지정한 태그를 보이지 않게 하는 속성입니다 ^^

    !important값의 경우, CSS 속성에서
    background-color:yellow
    background-color:red 이런 식으로 지정해 주게 되면, 나중에 적용된 red로 배경색이 나타나게 되는데요,

    background-color:yellow; !important
    background-color:red;

    이런 식으로 지정해 주게 되면, yellow라는 속성이 중요하니 뒤에 다른 값이 오더라도 그 값을 무시하라는 의미가 됩니다. ^^
  • ? ?

    아 무슨의미인지 정확히 알곘습니다.

    자칫.. yellow가 중요하지 않다라고 판단할뻔했네요..

    c언어에서 !가 반대의 경우라서..

  • ?
    style.css 의
    /* checkbox style */
    input[type="checkbox"] {display: none;}
    input[type="checkbox"] + label span {display: inline-block; line-height: 14px; vertical-align: middle;}
    input[type="checkbox"] + label span.check-dummy {width: 14px; height: 14px; background-repeat: no-repeat; background-position: left top;}
    input[type="checkbox"]:checked +label span.check-dummy {background-position: left -14px;}
    .exvar input[type="checkbox"] {display: inline;}

    이 부분이 display: none;으로 되어있었네요!

    해당 부분을 지우면 보이긴하는데
    다른 문제가 생길 것 같아서 못건들이겠고

    join_extend/skins/default/css
    에서
    .joinContent input[type="checkbox"] {display: none; !important}
    .joinContent input[type="checkbox"] + label span {display: inline-block; line-height: 14px; vertical-align: middle; !important}
    .joinContent input[type="checkbox"] + label span.check-dummy {width: 14px; height: 14px; background-repeat: no-repeat; background-position: left top; !important}
    .joinContent input[type="checkbox"]:checked +label span.check-dummy {background-position: left -14px;}
    .joinContent input[type="checkbox"] {display: inline; !important}
    를 추가하면 정상적으로 보입니다..

    혹시 다른분들을 위해 남겨둡니다@.@
  • ?

    @웹지기 @라쿠 혹시 위젯이 레이아웃 메뉴를 덥쳐버리는데 이 부분은 어딜 손봐야할까요..?

     

    리쿠님 말씀대로라면 사이드 메뉴 부분 css 뒤에 !important를 넣어주면 위젯위로 올라갈 수 있을 것 같은데

    side를 담당하는 css 이름이 뭘까요?

     

    .menu 붙은 css들이 많이 보이는데

     

     

    123567.png

     

  • profile
    그냥 필요한 자료들에 input[type=checkbox]{display:inline !important} 이런식으로 처리하시면 원래 자료에서 출력하려고 했던 체크박스가 나와요.
  • profile ?

    엌 체크박스 문제는 해결했는데 ㅠ
    또 위젯이 사이드 메뉴바를 덮어버리는 문제가 있네요..

     

    이번에는 레이아웃보다 위젯이 우선순위가 더 높나보네요.

    기존 레이아웃들엔 그런 문제가 없었는데

  • ? profile
    질문 자체가 그림으로 잘 이해가 안갑니다.
    메뉴가 뒤로 숨는거로 설명하신거라면...

    해당부분 z-index 를 높여주면 메뉴가 올라올듯 합니다. 그림으로 그걸 질문한건지 알수가 없네요.
  • profile ?

    아 질문이 정확하지 않아서 죄송합니다.

    레이아웃 좌측 최상단에
    -
    -
    -

    버튼을 누르면 좌측에서 옆으로 나오면서 사이드 메뉴가 보이는데

    저 위젯 페이지에서는 해당 버튼을 눌러도 사이드 메뉴가 뒤로가있는지 덮인건지..
    다른 메뉴들의 버튼을 누를수가 없네요 ㅠ

    (그림에서 나타난 것처럼 메뉴를 누르면 최상단에 로그인/회원가입 사이드 메뉴는 보이는데

    그 아래 부분 메뉴들이 보이지 않아요..)

  • ? profile
    Flat 레이아웃 css 열으셔서 z-index 차으시면 사이드쪽이 있을거에요. 그거 숫자를 높이세요. 없으면 추가요
  • ?
    통합검색 버튼을 눌러보니 위젯 메뉴 뒤에서 깜박깜박 거리는걸로보아 덮어진듯합니다..ㅠ

    이걸 flat레이아웃 css에서 !important로 우선순위를 주면 될 것 같은데.. menu 부분 여기저기에 !important를 붙여는 보고 있는데
    문제 해결은 되지 않네요;ㅁ;
  • profile ?
    아 말씀해주신 z-index를 찾아보니

    레이어를 최상단에 넣는 옵션인 것으로보아 말씀하신 대로 옵션을 주면 될 것 같네요

    고맙습니다~
  • ? profile
    !important는 그런의미가 아닙니다.
  • ? profile
    그게 아니고 요소마다 높이값을 조절하는 옵션이에요

    아.. 비슷하게ㅜ설명 하셨군요. 레이아웃으로 읽었습니다 ㅠㅋ
  • profile ?
    네이버에 css !important 검색해서 답변본 것인데 헛,..

    잘못된 답변이었군요 ㅠ
  • ? profile
    상속되는것 무시하고 지금것을 강제하는 문구에요. 레이아웃에서 체크박스를 감춰서 이게 상속되어버리니 다시 각 모듈 애드온에서 !important 로 살리라는 답변이에요~
  • profile ?
    와~~ 덕분에 해결했습니다 고맙습니다:)
  • profile ?
    헉 그리고 지금까지 보니까 모바일에서 답변해주셨네요

    더 감동입니다+_+
  • ? ?
    웹지기님이 이미 정확하게 말씀해 주셨지만 부연하자믄...

    웹의 경우에는 레이어가 존재합니다. 그렇기 때문에 어떤 요소가 어떤 요소 위에 존재하고, 어떤 요소가 어떤 요소 밑에 존재하는지 정해줄 필요가 있죠.

    이때 사용하는 속성이 z-index입니다. z축(수직축)을 기준으로 해서 얼마나 높은 위치에 존재하냐는걸 z-index 수치를 통해서 규정해 줍니다.

    A[z-index : 800]
    ...
    A[z-index : 3]
    A[z-index : 2]
    A[z-index : 1]

    이런 식으로 z-index를 이용해서 각 레이어를 어떻게 쌓는지 알려주는 셈이죠. 만약 특정 레이어가 말씀하신대로 '윗쪽'으로 올려주는 기능이 필요할때는 z-index를 사용해줘야 합니다.
  • ?
    감사합니다 덕분에 잡았네요
    .opt_chk input[type=radio],.opt_chk input[type=checkbox]{display:inline !important;margin:0}
    스케치북은 이렇게 수정하시면 됩니다.