불필요한 가로 스크롤 막대 jqGrid

내 jqGrid (버전 4.0.0 사용)에서 불필요한 가로 스크롤 막대가 생기지 만 세로 스크롤 막대도 있습니다. 이 문제는 Chrome 및 Firefox에서만 발생하지만 Internet Explorer에서는 발생하지 않습니다.불필요한 가로 스크롤 막대 jqGrid

가로 스크롤은 한두 개의 픽셀이기 때문에 표 폭 계산에 문제가있는 것처럼 보입니다. 폭의 테이블 속성으로 autowidth: true을 사용합니다. 약 8 개의 열이 있으며 일부는 고정 너비 (매우 작음), 다른 하나는 동적 너비가 있습니다.

사용자가 특정 열을 확대하고 가로 스크롤 막대가 필요하기 때문에 가로 스크롤을 사용하지 않도록 설정하는 것은 해결책이 아닙니다. 하지만 initialy 난 작은 화면에 테이블을 표시하는 데 필요한 때 테이블 너비와 수직 스크롤바에 정렬 열로로드 싶어요.

아래 코드

$("#grid").jqGrid({ 
    datatype: 'json', 
    mtype: 'POST', 
    colNames:loadColumns(columns)[0], 
    colModel:loadColumns(columns)[1], 
    height: $(window).height() - 160, 
    rownumbers: false, 
    pager: '#pager', 
    rowNum:25, 
    rowList:[25,50,100], 
    sortname: 'invid', 
    sortorder: 'desc', 
    viewrecords: true, 
    autowidth: true, 
    beforeSelectRow: function(){ 
     return false; 
    }, 
});

출처

2011-04-13 Erwin

당신은 당신이 당신의 CSS에서 테이블의 일부 설정이없는 것을 확인해야합니다 그리드 속성의 exerpt입니다.

내 제안 here의 예를 들어 내가 설명하는 ASP.NET MVC 프로젝트 (3.0까지 1.0의 모든 버전) 다음 설정 등의 표준 CSS :

table 
{ 
    border: solid 1px #e8eef4; 
    border-collapse: collapse; 
} 
table td 
{ 
    padding: 5px; 
    border: solid 1px #e8eef4; 
}

이

이 설정은 고려에서 촬영하지 않습니다를 최적 격자 폭을 계산하여 설정을 제거하거나 다음 추가 설정을 추가하는 경우

div.ui-jqgrid-view table.ui-jqgrid-btable 
{ 
    border-style:none; 
    border-top-style:none; 
    border-collapse:separate; 
} 
div.ui-jqgrid-view table.ui-jqgrid-btable td 
{ 
    border-left-style:none 
} 
div.ui-jqgrid-view table.ui-jqgrid-htable 
{ 
    border-style:none; 
    border-top-style:none; 
    border-collapse:separate; 
} 
div.ui-jqgrid-view table.ui-jqgrid-btable th 
{ 
    border-left-style:none 
}

가로 스크롤 막대 문제가 해결됩니다.

ASP.NET MVC를 사용하지 않으면 다른 이유로 문제가 발생할 수 있지만 table, td 또는 th에 대한 CSS 정의를 검색하는 것이 좋습니다.

$("#gridtofix").closest('.ui-jqgrid-bdiv').width($("#gridtofix").closest('.ui-jqgrid-bdiv').width() + 1);

출처

2011-04-13 10:11:23 Oleg

빠른 반응을 보내 주셔서 감사합니다. 나는 실제로 ASP.NET MVC를 사용하고 있지만, 불행히도 당신의 솔루션은 새로운 속성이 제대로 적용되었지만 (문제가 생기지 만), 문제를 해결하지 못했습니다. 또한 제공 한 링크의 다른 솔루션도이를 해결하지 못했습니다. 그러나 문제는 항상 CSS 스타일링의 문제에서 오는 것입니까? 그런 다음 나는 더 자세히 살펴볼 것입니다. – Erwin

@ 에림 : 방금 문제를 재현하려고했습니다. [대답] (http://stackoverflow.com/questions/5500805/asp-net-mvc-2-0-implementation-of-searching-in-jqgrid/5501644#5501644)에서 MVC 예제를 사용하여'autowidth : true'이고 스크롤 막대가 없어도 모두 작동합니다. 그런 다음 jqGrid 4.0으로 업데이트되었으며 이전과 동일하게 작동합니다. 그래서 아마 당신의 테스트가 잘못되었거나 ASP.NET MVC에 대한 표준이 아닌 추가 CSS가 있습니다. – Oleg

이 하나가 내 문제를 해결했습니다. +1. – Grubsnik

는 presonally 솔루션이 없었다

.ui-jqgrid .ui-jqgrid-btable 
{ 
    table-layout: auto; 
}

출처

2011-12-06 11:50:38 Steve

내가 CSS 파일 "ui.jqgrid.css"및 수평 스크롤이 코드를 추가 더 이상 나타납니다 : 그리드가로드 된 후 나를 위해

출처

2012-08-16 12:46:22

스크롤 막대를 제거하지만 열 이름과 테이블 데이터의 정렬이 잘못되었습니다. – abhihello123

동일한 규칙을 ** ui-jqgrid .ui-jqgrid-htable **에 추가하고 정렬 문제를 수정했습니다. –

불필요한 가로 스크롤 막대 jqGrid

답변

관련 문제