अनावश्यक क्षैतिज स्क्रॉलबार jqGrid

Question

मेरे jqGrid (संस्करण 4.0.0 का उपयोग करके) में, मुझे एक अनावश्यक क्षैतिज स्क्रॉलबार मिलता है लेकिन जब एक लंबवत स्क्रॉलबार भी होता है। यह समस्या केवल क्रोम और फ़ायरफ़ॉक्स में होती है, लेकिन इंटरनेट एक्सप्लोरर में नहीं।

ऐसा लगता है कि तालिका चौड़ाई की गणना के साथ कुछ गड़बड़ है, क्योंकि क्षैतिज स्क्रॉलिंग केवल एक या दो पिक्सल है। मैं चौड़ाई के लिए तालिका संपत्ति के रूप में autowidth: true का उपयोग करता हूं। लगभग आठ कॉलम हैं, कुछ में एक निश्चित चौड़ाई (बहुत छोटी) है, अन्य की गतिशील चौड़ाई है।

क्षैतिज स्क्रॉलिंग को अक्षम करना कोई समाधान नहीं है, क्योंकि उपयोगकर्ता अभी भी कुछ कॉलम बढ़ा सकते हैं और फिर एक क्षैतिज स्क्रॉलबार की आवश्यकता होती है। लेकिन प्रारंभिक रूप से मैं इसे छोटी स्क्रीन पर तालिका प्रदर्शित करने के लिए आवश्यक होने पर तालिका चौड़ाई और एक ऊर्ध्वाधर स्क्रॉलबार पर गठित कॉलम के साथ लोड करना चाहता हूं।

नीचे कोड

$("#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; 
    }, 
}); 

Answer 1

आप को सत्यापित करना चाहिए कि आप अपने सीएसएस में तालिका में से कुछ सेटिंग नहीं में ग्रिड गुणों का एक exerpt है।

मेरे सुझाव here में उदाहरण के लिए मैं वर्णित है कि ASP.NET MVC परियोजना (1.0 3.0 तक से सभी संस्करण) निम्नलिखित सेटिंग्स में शामिल हैं के मानक सीएसएस:

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 के लिए सीएसएस के किसी भी परिभाषा के लिए खोज करने के लिए आप की सिफारिश करेंगे।

Answer 2

मेरे लिए presonally समाधान इस के बाद ग्रिड लोड किया जाता है था:

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

Answer 3

मैं सीएसएस फ़ाइल "ui.jqgrid.css" और क्षैतिज स्क्रॉलबार लिए इस कोड को जोड़ा नहीं रह गया है प्रकट होता है:

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