• 목록
  • 아래로
  • 위로

안녕하세요?


어느덧 금요일이네요!


부트스트랩 모달의 사이즈를 구해서 그 사이즈에 맞는 이모지 개수를 구하여 출력하려고 하는데요.


이상하게 PC나 iPad에서는 잘 작동하는데 스마트폰에서는 의도한대로 잘 되지 않아서 질문 드립니다.



썸머노트에서 부트스트랩3 모달을 이용하여 이모지를 사용할 수 있게 해주는 플러그인인데요.


summernote-ext-github-emojis.js 


원래는 다음과 같이 비반응형으로 한 행에 출력될 이모지의 개수를 고정하여 출력합니다.


      var COLUMN_LENGTH = 10; // 한 행에 출력될 이모지의 개수
      var COLUMN_WIDTH = 30; // 이모지가 출력될 사이즈(px)


이렇게 원본 파일대로 출력하면 모바일에서는 PC보다 모달창이 작게 열려서 이모지가 짤려서 출력되는 문제가 있더군요.



그래서 다음과 같이 수정을 해봤거든요.


위에 올려드린 파일에서 일부를 발췌한 것인데 "두 줄을 추가하였습니다!" 주석 밑에 두 줄을 추가하였습니다.


      /**
      * Make Emojis Table
      *
      * @private
      * @return {jQuery}
      */
      function makeEmojisSetTable () {
        var $table = $('<table/>');

        $.each(emojis, function (idx, emoji) {
          var $td = $('<td/>').addClass('note-specialchar-node');
          var $tr = (idx % COLUMN_LENGTH === 0) ? $('<tr/>') : $table.find('tr').last();

          // 두 줄을 추가하였습니다!
          var modal_width = $(".modal-dialog").width() - 30; // 모달창 사이즈를 구하고 양쪽의 padding을 뺌
          COLUMN_LENGTH = Math.floor(modal_width / 35); // 구한 값을 35로 나눠서 버림

          var $button = ui.button({
            callback : function ($node) {
              var content = emojiUrls[emoji];

              $node.html('<img src="' + content + '" width="20" style="margin-left:-6px"/>');
              $node.attr('title', ':'+emoji);
              $node.attr('data-value', encodeURIComponent(emojiUrls[emoji]));
              $node.css({
                width: COLUMN_WIDTH,
                height: COLUMN_WIDTH,
                'margin-right' : '5px',
                'margin-bottom' : '5px'
              });
            }
          }).render();

          $td.append($button);
          $tr.append($td);
          if (idx % COLUMN_LENGTH === 0) {
            $table.append($tr);
          }
        });

        totalRow = $table.find('tr').length;
        totalColumn = COLUMN_LENGTH;

        return $table;
      };

      /**
      * Plugin initialize
      */
      this.initialize = function () {
        var $container = options.dialogsInBody ? $(document.body) : $editor;

        var emojisHint = {
          match: /:([\-+\w]+)$/,
          search: function (keyword, callback) {
            callback($.grep(emojis, function (item) {
              return item.indexOf(keyword)  === 0;
            }));
          },
          template: function (item) {
            var content = emojiUrls[item];
            return '<img src="' + content + '" width="20" /> :' + item + ':';
          },
          content: function (item) {
            var url = emojiUrls[item];
            if (url) {
              return $('<img />').attr('src', url).css('width', 20)[0];
            }
            return '';
          }
        };

        if(options.hint){
          if(Array.isArray(options.hint)){
            options.hint.push(emojisHint);
          }else{
            var temp = options.hint;
            options.hint = [];
            options.hint.push(temp);
            options.hint.push(emojisHint);
          }
        }

        $.ajax({
          url: 'https://api.github.com/emojis',
          async: true
        }).done(function(data) {
          emojis = Object.keys(data);
          emojiUrls = data;
          var body = '<div class="form-group row-fluid">' + makeEmojisSetTable()[0].outerHTML + '</div>';
          self.$dialog = ui.dialog({
            title: lang.emojis.select,
            body: body
          }).render().appendTo($container);
        });

      };




첨부사진처럼 PC와 iPad에서는 제대로 작동하는데요.


이상하게 스마트폰(안드로이드 & iOS)에서는 1줄로만 출력되네요.






PC의 개발자도구에서 console로 로그를 찍어보면 모달의 폭이 제대로 구해지는 것을 확인할 수 있는데요.


제가 실력이 부족해서 착각하는 것인지는 모르겠지만... 모바일에서도 동일하게 작동을 할 것으로 생각되는데요.


왜 PC와 iPad에서는 제대로 작동되는데, 스마트폰에서는 위와 같이 출력되는지 도저히 원인을 알 수 없네요 ㅠㅠ



그럼 고수님들의 답변을 부탁드립니다!


항상 감사드립니다 ^-^


즐거운 주말 되세요~

작성자
이니스프리 119 Lv. (0%) 1872050/115200000EXP

당분간 일신상의 사정으로 쪽지나 댓글로 답변을 드리기 어렵습니다. 죄송합니다.

 

CSVpuymXAAAVVpd.jpg

댓글 5

Hanam09
profile image

이모지 자체에 적용된 반응형 스타일 시트가 있나요?

지금 주신 소스만으론 문제의 원인을 정확히 파악할 수 없을 것 같습니다.

 

크롬 개발자도구로 한번 문제를 직접 찾아보세요!

comment menu
2019.08.24. 01:21

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리 작성자 → Hanam09
profile image

옙 주말인데 답변해주셔서 감사합니다 ^^

에디터 자체가 부트스트랩에 의존하고 있어서 그런지

이모지 플러그인에는 CSS 파일이 따로 없고, 플러그인의 파일에서

저같은 초보는 더욱 더 감을 잡을 수가 없네요 ㅠㅠ

 

개발자도구에서 Toggle Device Toolbar로 보면 770px 까지는 제대로 출력이 되고,

그 이하에서는 1줄로 나오는 문제가 있네요 ㅜㅜ

개발자도구에서 에러가 뜨는 것은 없고, 다만 console에서 로그를 찍어 확인해보면 모달의 폭이 0으로 나오는데요 ㅠㅠ

(부트스트랩 모달의 div의 클래스 명이 바뀌는 것은 없습니다)

 

혹시 스마트폰을 연결하여 크롬에서 원격디버깅을 하는 것과 그냥 에뮬레이팅을 하는 것이 다른가요?

https://stackoverflow.com/questions/21925992/chrome-devtools-devices-does-not-detect-device-when-plugged-in

여기에 기술된대로 연결을 시도해보고 있는데 잘 안 되네요 ㅠㅠ

 

부트스트랩 홈페이지에서는 modal-lg와 modal-sm가 있다는 내용만 나오는데

아마도 이 부분과 관련된 것 같은데 좀 더 공부해볼게요~

 

그럼 좋은 주말 되세요!

다시 한 번 감사드립니다 ^-^

comment menu
2019.08.24. 06:30

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리 작성자 → 이니스프리
profile image
+1

jQuery 버전에 따라서 모바일 디바이스에서 크기를 제대로 측정하지 못한다는 언급이 있군요 ㄷㄷ

https://stackoverflow.com/questions/14094890/jquerywindow-height-doesnt-work-on-mobile-browsers

프론트엔드는 디바이스에 따라 고려할 것이 많아서 정말 어렵네요.

 

그런데 바닐라 자바스크립트로 바꿔봐도 결과가 달라지지는 않네요 ㅠㅠ

약간 주먹구구식이지만 아래와 같은 방법으로 해결을 하기는 했네요.

 

var dialog = document.querySelector('div.modal-dialog');

var modal_width = dialog.clientWidth - 30;

if (modal_width <= 0) {

modal_width = window.innerWidth - 30;

}

COLUMN_LENGTH = Math.floor(modal_width / 35);

 

제 실력에서는 정확히 어떤 문제인지 파악이 어렵네요 ㅠㅠ

모바일에서 element의 크기를 측정하는 방법에 대해 좀 더 공부를 해야겠네요~

다시 한 번 감사드립니다! 즐거운 주말 되세요 ^-^

comment menu
2019.08.24. 07:21

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 → 이니스프리
profile image

혹시,

dialog.clientWidth 라는 속성이 있나요?

comment menu
2019.08.24. 07:26

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리 작성자 → Hanam09
profile image

죄송합니다 ㅠㅠ 제가 주말인데도 5시에 일어났더니 정신이 없네요~

모바일만 확인했더니 PC에서 깨지는군요 ㅠㅠ

말씀해주신 덕분에 var modal_width = $(dialog).width() - 30; 이렇게 수정했네요!

PC와 모바일에서 모두 잘 보이네요~ 감사합니다!!

comment menu
2019.08.24. 07:33

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 264
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 3979
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4463
602 호스팅패널에서 서브도메인 사용하시는 분 계신가요? 2 joyfuI 19.08.28.18:13 249
601 스포어에서 허용하는 이미지 업로드 확장자 및 ios에서의 input 태그 줌과 관련하여 여쭤봅니다 2 이니스프리 19.08.27.23:04 231
600 Nginx 이미지 외부링크 방지 설정 여부를 확인하는 방법 2 이니스프리 19.08.26.18:48 342
599 Beautifulsoup 로그인 문제 18 Hanam09 19.08.24.01:25 1691
부트스트랩 모달의 사이즈를 구해서 사이즈에 맞게 이모지 n개/행을 출력하려고 하는데요. 5 image 이니스프리 19.08.23.20:50 362
597 Jquery 사용 시 $(window).load( function() 를 사용하시나요? 5 로우지 19.08.20.03:15 209
596 ftp.studyforus.com은 서비스를 중지하신건가요? 2 260578 19.08.19.18:15 253
595 출첵을 했는데 처리가 제대로 안됐어요! image 국내산라이츄 19.08.19.00:01 189
594 imgur 사용하시는분.... 잘아시는분...질문! 5 홀민 19.08.18.22:08 476
593 a태그를 특정 조건에서만 비활성화시키고 싶은데... +사소한 기능 문제 6 image 국내산라이츄 19.08.08.16:44 776
592 이거 도메인 사용 가능한 거 맞죠? 13 image 국내산라이츄 19.08.08.11:31 237
591 자바스크립트는 왜 이럴까요... 5 image 국내산라이츄 19.08.07.16:06 241
590 창 크기에 따라서 표의 크기가 달라지는 태그는 없나요? 6 image 국내산라이츄 19.08.05.17:41 261
589 자바스크립트 FormData와 관련된 메서드의 IE 호환성과 관련하여 질문 드립니다 ^^ 6 image 이니스프리 19.08.05.14:22 3419
588 프로알라 에디터를 사용하면 클라이언트단에서 이미지 리사이징을 할 수 있는가요? 6 이니스프리 19.08.02.16:00 330
587 IE11에서 이미지가 깨지는 현상을 해결할 수 있을까요? 2 이니스프리 19.08.02.00:01 3702
586 야후재팬 메일 이용하시는분 계신가요? 2 슬기 19.07.29.23:55 334
585 Composer 설치 가능한 웹호스팅 추천 부탁드립니다 4 이니스프리 19.07.29.21:57 852
584 싸이월드 미니홈피 크롤링 관련하여 질문 드립니다 ^^ 3 image 이니스프리 19.07.27.01:11 646
583 출석 오류 4 image 260578 19.07.25.00:02 196