การปรับขนาดส่วนหัวของคอลัมน์ slickgrid ทำให้ไม่สอดคล้องกับเนื้อหา

ฉันใช้ SlickGrid 2.2 กับ Bootstrap 3.1.0 css เมื่อฉันพยายามปรับขนาดส่วนหัวของคอลัมน์ เซลล์ส่วนหัวของคอลัมน์ไม่สอดคล้องกับเซลล์ในร่างกาย ส่วนหัวมีขนาดใหญ่กว่าลำตัวอย่างสม่ำเสมอไม่ว่าฉันจะหดตัวหรือยืดออกก็ตาม ฉันใช้รหัสจากตัวอย่างที่ 1:

html

<div id="myGrid" style="width:600px;height:500px;">

จาวาสคริปต์

 var grid;
 var columns = [{
     id: "title",
     name: "Title",
     field: "title"
 }];

 var options = {
     enableCellNavigation: true,
     enableColumnReorder: false
 };

 $(function () {
     var data = [];
         data[0] = {
             title: "Task ",
             duration: "5 days",
             percentComplete: Math.round(Math.random() * 100),
             start: "01/01/2009",
             finish: "01/05/2009",
             effortDriven: 10
         };

     grid = new Slick.Grid("#myGrid", data, columns, options);
 })

http://jsfiddle.net/stryecho/n58Cq/7/

ใน Bootstrap 2.3.2 ดูเหมือนว่าการปรับขนาดจะทำงานตามที่คาดไว้

ฉันสังเกตเห็นโพสต์เกี่ยวกับปัญหาที่คล้ายกันที่ https://github.com/mleibman/SlickGrid/pull/699. ดูเหมือนว่าจะบ่งบอกว่าปัญหาการเรนเดอร์ได้รับการแก้ไขแล้ว แต่ฉันเชื่อว่าสภาพของฉันในส่วนที่มีการปรับขนาดรายการนั้นยังคงใช้งานไม่ได้


javascript css twitter-bootstrap slickgrid
person user3267934    schedule 04.02.2014    source แหล่งที่มา

คำตอบ (3)


arrow_upward
4
arrow_downward

ฉันแก้ไขปัญหานี้ด้วยการใส่ div ของ slickgrid ลงใน div ด้วย display:table สไตล์เช่นนี้:

<div style="display:table;">
    <div id="grid1"></div>
</div>

แต่ก่อนที่ฉันจะพบวิธีแก้ปัญหา: สำหรับ css:

[class^="slickgrid_"],
[class^="slickgrid_"] div {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
     box-sizing: content-box !important;
}

สำหรับบล็อกสคริปต์:

grid1 = new Slick.Grid("#grid1", data, columns, options);

และฉันยังใช้สำหรับการพึ่งพาในตอนท้ายของโค้ด:

grid1.autosizeColumns();

ฉันยังพบว่าปัญหานี้เกิดขึ้นเมื่อฉันใช้

<center> <center>

แท็กรอบๆ div

person Kaxa    schedule 14.12.2014
comment
โซลูชัน css ก็เพียงพอสำหรับฉัน! ขอบคุณกาข่า! - person zobidafly; 28.04.2015

arrow_upward
3
arrow_downward

เป็นไปได้มากว่าเพราะ bootstrap 3 ใช้ box-sizing: border-box คุณจะต้องรีเซ็ต .slick-headers และองค์ประกอบส่วนหัว/คอลัมน์แบบเนียนที่เกี่ยวข้องเพื่อใช้ box-sizing: content-box

นอกจากนี้ - คำขอดึงที่คุณกล่าวถึงช่วยแก้ไขปัญหาเดียวกัน แต่ไม่ได้รับการอนุมัติ / รวมเข้ากับโค้ดกริดที่ลื่นไหลจริง

person helion3    schedule 04.02.2014
comment
ขอบคุณ ฉันลองแก้ไข css เพื่อใช้ content-box ซึ่งแก้ไขปัญหาได้ อย่างไรก็ตาม จะทำให้เกิดปัญหาอื่น ๆ เมื่อเส้นขอบไม่ได้รับการแสดงอย่างถูกต้อง และจากสิ่งที่ฉันบอกได้ ดูเหมือนว่ามีการใช้การแก้ไขแล้ว อย่างน้อยใน slickgrid 2.2 (ฉันเห็นในโค้ด) Slickgrid มีโค้ดที่ตรวจสอบ border-box อย่างชัดเจน จากนั้นข้ามการคำนวณขนาดใหม่โดยใช้การเติม/ฯลฯ แต่ดูเหมือนจะไม่สามารถแก้ไขข้อผิดพลาดได้เนื่องจากความกว้างของคอลัมน์ส่วนหัวยังคงลดลง 9 พิกเซลจากเนื้อหา - person user3267934; 04.02.2014
comment
ตรวจสอบให้แน่ใจว่าคุณใช้การกำหนดขนาดกล่องเนื้อหากับตารางทั้งหมด ฉันมีปัญหาเดียวกันและสามารถแก้ไขได้ด้วยตัวเลือกที่ลื่นไหลหลายตัวที่เกี่ยวข้อง เราต้องทิ้ง bootstrap 3 เนื่องจาก IE7 ไม่เช่นนั้นฉันจะมีโค้ดตัวอย่างที่แชร์ได้ วันนี้ฉันอาจจะมองย้อนกลับไปใน repo ของเราและดึงมันออกมาได้ - person helion3; 04.02.2014
comment
ฉันได้โพสต์คำถามอื่นเพื่อแก้ไขปัญหาที่ฉันมีหากฉันใช้รหัสขนาดกล่อง คุณสามารถดูได้ในโค้ดนั้นว่าฉันนำไปใช้กับคลาสทั้งหมดที่มี 'slickgrid_' ตามโพสต์นี้: github.com/mleibman/SlickGrid/issues/742 คำถามอื่น ๆ ของฉัน (พร้อมซอประกอบ) สามารถพบได้ที่นี่: stackoverflow.com/questions/21557847/ - person user3267934; 04.02.2014

arrow_upward
1
arrow_downward

ขอบคุณ ฉันยังประสบปัญหาใน Firefox (เท่านั้น) โดยที่คอลัมน์ส่วนหัวไม่ตรงแนวกับเนื้อหาของตาราง โพสต์นี้ช่วยแก้ไขปัญหาของฉัน ฉันใช้ slick.grid.css และตามที่โพสต์ก่อนหน้าแนะนำ ฉันเพิ่ม:

   -moz-box-sizing: border-box;
   box-sizing: border-box;

to: .slick-header-columns, .slick-headerrow-columns .slick-header-column.ui-state-default

ฮ

person user1313798    schedule 24.02.2014