The grid does not appear properly on the mobile screen.

[coniParticipant]

hi

The grid does not appear properly on the mobile screen.

my iPhone Screen

my iPad Screen

<script type="text/javascript">
$(document).ready(function () {  
    var shirts = ["예","아니오"];
    var user = ["김영민","이민호","장현석"];
    var countries = new Array("Afghanistan", "Albania");
    var ch = ["2014-11-05"];
    var jugi = ["VoIP 청구(25일납기)","전화부가(매월1일))"];
    var data = [ {
         'UserId' : 'coni',
         'UserName' : '김영민',
         'UserGroup' : '000_Developer',
         'Email' : 'ymk@tnctec.co.kr',
         'Phone' : '010-3919-1404'
       }, {
         'UserId' : 'jhkim',
         'UserName' : '김주한',
         'UserGroup' : '999_Admin',
         'Email' : 'jhkim@tnctec.co.kr',
         'Phone' : '010-3374-4549'
       }, {
         'UserId' : 'episode09',
         'UserName' : '권영구',
         'UserGroup' : '888_Server',
         'Email' : 'episode09@tnctec.co.kr',
         'Phone' : '010-3356-4901'
       }, {
         'UserId' : 'shjeong',
         'UserName' : '정수환',
         'UserGroup' : '777_System',
         'Email' : 'shjeong@tnctec.co.kr',
         'Phone' : '010-7709-0915'
       }, {
         'UserId' : 'mino8301',
         'UserName' : '이민호',
         'UserGroup' : '000_Developer',
         'Email' : 'mino8301@tnctec.co.kr',
         'Phone' : '011-877-1595'
       }, {
         'UserId' : 'jhs',
         'UserName' : '장현석',
         'UserGroup' : '000_Developer',
         'Email' : 'jhs@tnctec.co.kr',
         'Phone' : '010-4424-5134'
       } ];
    var source = {
           localdata : data,
           datatype : "json",
           datafields : [ {
             name : 'UserId',
             type : 'string'
           }, {
             name : 'UserName',
             type : 'string'
           }, {
             name : 'UserGroup',
             type : 'string'
           }, {
             name : 'Email',
             type : 'string' 
           }, {
             name : 'Phone',
             type : 'string'
           } ]
         };
    var dataAdapter = new $.jqx.dataAdapter(source); 
   $("#input").jqxInput({placeHolder: "청구계정명", height: 23, minLength: 1 ,  source: countries });
     $('#useYn').jqxDropDownList({
         filterable: true, selectedIndex: 0, source: shirts, height: 24, width: '91%'
     });
     $('#user').jqxDropDownList({
         filterable: true, selectedIndex: 0, source: user, height: 24, width: '91%'
     });
     $('#ch').jqxDropDownList({
         filterable: true, selectedIndex: 0, source: ch, height: 24, width: '91%'
     });
     $('#jugi').jqxDropDownList({
         filterable: true, selectedIndex: 0, source: jugi, height: 24, width: '91%'
     });
     $("#fromDt").jqxDateTimeInput({width: '90%', height: '25px',formatString: "yyyy-MM-dd"});
     $("#toDt").jqxDateTimeInput({width: '83%', height: '25px',formatString: "yyyy-MM-dd"});
     
     $("#search").jqxButton({ width: '120', height: '35px'});
     $("#download").jqxButton({ width: '120', height: '35px'});
     
     
     
   //접기 셋팅
     $("#jqxExpander").jqxExpander({
       width : '100%',
       expanded : true,
       initContent : function() {
         
         //그리드셋팅
         $("#jqxGrid").jqxGrid({
           width : '100%',
           source : dataAdapter,
           showfilterrow : true,
           filterable : true,
           sortable : true,
           scrollbarsize: 10,
           pageable : true,
           autoheight : true,
           autoshowfiltericon:false,
           columnsresize : true,
           toolbarHeight : 35,
           showToolbar : true,
           selectionmode : 'singlerow',
           renderToolbar : function(toolBar) {
             var toTheme = function(className) {
               return className;
             }
             var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
             var buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>";
             var addButton = $(buttonTemplate);
             var editButton = $(buttonTemplate);
             var deleteButton = $(buttonTemplate);
             container.append(addButton);
             container.append(editButton);
             container.append(deleteButton);
             toolBar.append(container);
             addButton.jqxButton({
               cursor : "pointer",
               enableDefault : false,
               disabled : false,
               height : 25,
               width : 25
             });
             addButton.find('div:first').addClass(toTheme('jqx-icon-plus'));
             addButton.jqxTooltip({
               position : 'bottom',
               content : "추가"
             });
             editButton.jqxButton({
               cursor : "pointer",
               disabled : true,
               enableDefault : false,
               height : 25,
               width : 25
             });
             editButton.find('div:first').addClass(toTheme('jqx-icon-edit'));
             editButton.jqxTooltip({
               position : 'bottom',
               content : "수정"
             });
             deleteButton.jqxButton({
               cursor : "pointer",
               disabled : true,
               enableDefault : false,
               height : 25,
               width : 25
             });
             deleteButton.find('div:first').addClass(toTheme('jqx-icon-delete'));
             deleteButton.jqxTooltip({
               position : 'bottom',
               content : "삭제"
             });
             //이벤트에 따른 버튼 상태 설정
             var updateButtons = function(action) {
               switch (action) {
               case "Select":
                 addButton.jqxButton({
                   disabled : false
                 });
                 deleteButton.jqxButton({
                   disabled : false
                 });
                 editButton.jqxButton({
                   disabled : false
                 });
                 break;
               case "Unselect":
                 addButton.jqxButton({
                   disabled : false
                 });
                 deleteButton.jqxButton({
                   disabled : true
                 });
                 editButton.jqxButton({
                   disabled : true
                 });
                 break;
               }
             }
             var rowKey = null;
             var args = null;
             var selectRow = -1;
             $("#UMjqxGrid").on('rowselect', function(event) {
               args = event.args;
               rowKey = args.key;
               selectRow = event.args.row.uid;
               updateButtons('Select');
             });                 
           },//renderToolbar
           //컬럼설정
           columns : [ {
             text : '사용자ID',
             columntype : 'textbox',
             filtercondition : 'starts_with',
             align : 'center',
             cellsalign : 'center',
             datafield : 'UserId',
             width : '20%',
             minwidth : '100'
           }, {
             text : '사용자명',
             columntype : 'textbox',
             filtercondition : 'starts_with',
             align : 'center',
             cellsalign : 'center',
             datafield : 'UserName',
             width : '20%',
             minwidth : '100'
           }, {
             text : '사용자그룹',
             filtertype : 'checkedlist',
             columntype : 'textbox',
             filtercondition : 'starts_with',
             align : 'center',
             cellsalign : 'center',
             datafield : 'UserGroup',
             width : '20%',
             minwidth : '100'
           }, {
             text : '이메일',
             columntype : 'textbox',
             filtercondition : 'starts_with',
             align : 'center',
             cellsalign : 'center',
             datafield : 'Email',
             width : '20%',
             minwidth : '100'
           }, {
             text : '전화번호',
             columntype : 'textbox',
             filtercondition : 'starts_with',
             align : 'center',
             cellsalign : 'center',
             datafield : 'Phone',
             width : '20%',
             minwidth : '100'
           } ]
         });//Grid Set
       }//function
     });//expander
 });
    </script>
</head>
<body>
  <ul class="breadcrumb">
    <li>청구/수납</li>
    <li>청구</li>
    <li>조정등록</li>
  </ul>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 borderall">
          <div class="row">
            <div class="col-xs-3 searchtitle">청구계정</div>
            <div class="col-xs-9" style="padding:3px 0 0 3px;"><input type="text" id="input" class="form-control" /></div>
          </div>
        </div>
        <div class="col-md-6 borderall">
          <div class="row">
            <div class="col-xs-3 searchtitle">적용여부</div>
            <div class="col-xs-9" style="padding:3px;"><div id="useYn"></div></div>            
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 borderall">
          <div class="row">
            <div class="col-xs-3 searchtitle">작업일시</div>
            <div class="col-xs-4"><div id="fromDt" style="margin:3px 0 0 3px;"></div></div>
            <div class="col-xs-5"><div id="toDt" style="margin-top:3px;"></div></div>
          </div>
        </div>
        <div class="col-md-6 borderall">
          <div class="row">
            <div class="col-xs-3 searchtitle">작업자</div>
            <div class="col-xs-9" style="padding:3px;"><div id="user"></div></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 borderall">
          <div class="row">
            <div class="col-xs-3 searchtitle">청구주기</div>
            <div class="col-xs-9" style="padding:3px;"><div id="jugi"></div></div>
          </div>
        </div>
        <div class="col-md-6 borderall">
          <div class="row">
            <div class="col-xs-3 searchtitle">청구기준일</div>
            <div class="col-xs-9" style="padding:3px;"><div id="ch"></div></div>
          </div>
        </div>
      </div>
    </div>
    <div style="padding:6px 6px 20px 0;float:right;">
        <!--<button class="btn btn-danger" value="조회" id='search'>조회</button>&nbsp;&nbsp;
        <button class="btn" value="다운로드" id='download'>다운로드</button> -->
        <input class="btn-info" type="button" value="조회" id='search' /> <input class="btn-warning" type="button" value="다운로드" id='download' />
    </div>
    
    
    <div id='jqxExpander'>
      <div>사용자 관리</div>
      <div>
        <div id="jqxGrid"></div>
      </div>
    </div>
    
</body>
</html>

[DimitarParticipant]

Hi coni,

To test your example we also need to know what styles you have applied with CSS and what external libraries you have included. Please share a JS Editor or JSFiddle example with your project. We will then test it on an iPhone to see if we can reproduce the issue.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[coniParticipant]

hi

Thank you for responding to.

I will send you a link JS Editor or JSfiddle example.

JSFIDDLE Share Link
full screen result

[DimitarParticipant]

Hi coni,

We tested the full screen version of your fiddle on an iPhone and everything works fine. However, the fiddle does not look exactly like your first image.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[coniParticipant]

hi Dimitar,

Reduce the window sized.

Then, the image looks like a link.

Image Link

[Peter StoevKeymaster]

Hi coni,

The problem are your minwidth settings. Don’t set minwidth to ‘100’ if you want your columns to be fully displayed on Small Screen. In addition, you should set it to Number i.e to 100, not to String like ‘100’.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[coniParticipant]

Thank you.

It has been resolved.^^

[Author]

Posts