स्लिक ग्रिड हेडर पंक्ति सेल संरेखण

Question

मैं ग्रिड में डेटा प्रदर्शित करने के लिए एक स्लिम ग्रिड का उपयोग कर रहा हूं। स्लिम ग्रिड ऊंचाई, चौड़ाई जैसी सभी चीजों की गणना करता है जब उस विशेष ग्रिड को बनाया जाता है और ग्रिड वास्तव में ठीक दिखता है। जब ग्रिड बनाया जाता है तो परेशानी होती है लेकिन छिपी हुई है और किसी और चीज की कार्रवाई (चेकबॉक्स/रेडियो बटन का चयन) ग्रिड दिखाई देता है। इस बार गणना बहुत खराब हो जाती है और हेडर और पंक्ति कोशिकाओं (शीर्षलेख के लिए कॉलम) लंबवत रूप से संरेखित नहीं होते हैं ..

मैं इसे नियंत्रित करने में असमर्थ हूं। अगर किसी और को भी स्लिम ग्रिड के हाथों पीड़ित हैं और खुद को बचाने में सक्षम हैं तो कृपया गोला बारूद करें।

प्रत्याशा में, Premanshu

Answer 1

मैं जब गतिशील JQuery .show() और .hide() का उपयोग कर ग्रिड छुपा प्रदर्शित/एक ऐसी ही समस्या थी।

यदि आप div टैग display: none के साथ बनाते हैं (इसलिए यह प्रारंभ में छिपा हुआ है) तो ग्रिड कॉलम ठीक से प्रारंभ नहीं होते हैं। इसे हल करने के लिए मैं visibility: hidden के साथ div टैग बना देता हूं और .hide() और .show() विधियों का उपयोग करने से पहले इस शैली को हटा देता हूं।

मेरे कोड इस तरह मोटे तौर पर दिखता है:

<div id="mygrid" style="visibility: hidden"></div> 

    $grid = $("#mygrid") 

    grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions); 

    // Hide grid by default, remembering to remove the visibility style 
    $grid.hide(); 
    $grid.css("visibility", "visible"); 

    // You can now show and hide the grid using normal jQuery methods 
    $grid.show(); 
    $grid.hide(); 

एक बार जब यह initialised जाता है और visibility: hidden; संपत्ति निकाल दिया जाता है, मैं .hide() और .show() उपयोग कर रहा हूँ, लेकिन मैं इस अगर तुम में हेरफेर display: none; सीधे यदि विशेषता काम करेंगे शक आप JQuery का उपयोग नहीं कर रहे हैं।

उम्मीद है कि इससे मदद मिलती है।

Answer 2

यह समर्थित है और नहीं होना चाहिए। वास्तव में, अधिकांश उदाहरण (http://mleibman.github.com/SlickGrid/examples/example1-simple.html सहित) में यह सुनिश्चित करने के लिए कि यह सही तरीके से काम करता है, वही कार्यान्वयन है।

क्या आप एक jsfiddle.net repro शामिल कर सकते हैं?

Answer 3

मुझे एक ही समस्या थी और @Premanshu और @Tin I के उत्तरों को पढ़ने के बाद इसे हल करने के लिए एक अलग मार्ग मिला।

असल में आपको एक ईवेंट चक्र छोड़ना होगा और ग्रिड को प्रदर्शित करने से पहले डोम को पकड़ने की आवश्यकता होगी जिससे यह सही कॉलम चौड़ाई ढूंढ सके। मैंने इसे करने के लिए setTimeout का उपयोग किया।

var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>"); 
    grid = new Slick.Grid(myGrid, data, columns, options); 


    // ... later on, append the container to the DOM and initialize SlickGrid 
    setTimeout(function(){ 
    myGrid.appendTo(that.$el); 
    grid.init(); 
    },1); 

Answer 4

मुझे उस पृष्ठ पर इसका उपयोग करते समय भी इसी तरह की समस्या थी जिस पर ट्विटर बूटस्ट्रैप सीएसएस था। समाधान सामग्री-बॉक्स

*, *: पहले, *: { -webkit-box-sizeizing के बाद बॉक्स-साइजिंग को ओवरराइड करना था: सामग्री-बॉक्स; -मोज़-बॉक्स-आकार: सामग्री-बॉक्स; बॉक्स आकार: सामग्री-बॉक्स; }

शायद यह पता लगाना चाहिए कि वास्तव में कौन से वर्गों की आवश्यकता है, लेकिन यह मेरे लिए चीजों को हल करता है।

Answer 5

मैं (ऐसा माहौल box-sizingborder-box पर सेट है) बस .slick-header-column को box-sizing: content-box लगाने से इस बूटस्ट्रैप 3 में काम करने के लिए प्राप्त करने में सक्षम था।

.slick-header > .slick-header-columns > .slick-header-column { 
    -webkit-box-sizing: content-box;                
    -moz-box-sizing: content-box; 
    box-sizing: content-box; } 

---

बस सावधान जब .slick-header-column की border गुण उनमें संशोधन कर।

.slick-header > .slick-header-columns > .slick-header-column:last-child { 
    border-right-color: transparent; 
} 

नोट:: मैं transparent करने के लिए रंग की स्थापना द्वारा सही पर सीमा को दूर करने में सक्षम था आप चयनकर्ता विशिष्टता के साथ चारों ओर खेल सकते हैं - चयनकर्ता आप अधिलेखित कर रहे हैं:

इन समाधानों में से

.slick-header-column.ui-state-default { ... } 

Answer 6

कोई भी मेरे लिए काम किया, हो सकता है क्योंकि SlickGrid के कोड 2012 के बाद से बदल गया :) मैंने पाया इस post में एक समाधान है, यह @ WEX के लिए इसी तरह की है, लेकिन छोटे अंतर के साथ:

.slickgrid, 
.slickgrid *, 
.slick-header-column { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
} 

जहां .slickgrid एक ग्रिड कंटेनर तत्व का चयनकर्ता है।

Answer 7

इसे मेरे लिए हल किया गया। 1. आरंभ ग्रिड 2. संलग्न डेटा इसे करने के लिए 3. वर्तमान div युक्त ग्रिड के मोडल का उपयोग कर इसे

मैं ऐसा किया हल करने के लिए:: 1. वर्तमान में यह div के मोडल का उपयोग कर यह मैं क्या कर रहा था है ग्रिड 2. ग्रिड प्रारंभ करें 3. डेटा संलग्न करें