mengubah ukuran header kolom slickgrid menyebabkannya tidak selaras dengan isi

Saya menggunakan SlickGrid 2.2 dengan Bootstrap 3.1.0 css. Saat saya mencoba mengubah ukuran header kolom, sel header kolom tidak sejajar dengan sel di badan. Headernya selalu lebih besar dari badannya, baik saya mengecilkan atau meregangkannya. Saya menggunakan kode dari contoh 1:

html

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

javascript

 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/

Di Bootstrap 2.3.2, pengubahan ukuran tampaknya berfungsi seperti yang diharapkan.

Saya melihat postingan tentang masalah serupa di https://github.com/mleibman/SlickGrid/pull/699. Di sana sepertinya ada indikasi bahwa masalah rendering telah diperbaiki, namun saya yakin kondisi saya, saat item diubah ukurannya, masih tidak berfungsi.


javascript css twitter-bootstrap slickgrid
person user3267934    schedule 04.02.2014    source sumber

Jawaban (3)


arrow_upward
4
arrow_downward

Saya memecahkan masalah ini dengan memasukkan div slickgrid ke dalam div dengan gaya tampilan: tabel seperti ini:

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

Tapi sebelum saya menemukan solusi: untuk css:

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

untuk blok skrip:

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

dan juga saya gunakan untuk ketergantungan di akhir kode:

grid1.autosizeColumns();

Saya juga menemukan bahwa masalah ini terjadi ketika saya menggunakannya

<center> <center>

tag di sekitar div

person Kaxa    schedule 14.12.2014
comment
solusi css sudah cukup bagi saya! Terima kasih Kakha! - person zobidafly; 28.04.2015

arrow_upward
3
arrow_downward

Kemungkinan besar karena bootstrap 3 menggunakan box-sizing: border-box. Anda harus menyetel ulang .slick-headers dan elemen header/kolom apik terkait untuk menggunakan box-sizing: content-box

Juga - permintaan tarik yang Anda sebutkan memperbaiki masalah yang sama tetapi belum disetujui/digabungkan dalam kode grid apik yang sebenarnya.

person helion3    schedule 04.02.2014
comment
Terima kasih, saya sudah mencoba memodifikasi css untuk menggunakan kotak konten yang memperbaiki masalah. Namun, hal ini menyebabkan masalah lain dimana batas tidak ditampilkan dengan benar. Dan dari apa yang saya tahu, sepertinya perbaikan telah diterapkan, setidaknya di slickgrid 2.2 (saya melihatnya di kode). Slickgrid memiliki kode yang secara eksplisit memeriksa kotak perbatasan dan kemudian melewatkan penghitungan ulang ukuran menggunakan padding/dll. tapi sepertinya itu tidak memperbaiki kesalahan karena lebar kolom header masih melenceng 9 piksel dari badan. - person user3267934; 04.02.2014
comment
Pastikan Anda menerapkan ukuran kotak konten ke seluruh grid. Saya memiliki masalah yang sama dan dapat memperbaikinya dengan melibatkan beberapa penyeleksi yang apik. Kami harus membuang bootstrap 3 karena IE7, kalau tidak saya punya kode contoh yang bisa saya bagikan. Saya mungkin dapat melihat kembali repo kami hari ini dan mengeluarkannya. - person helion3; 04.02.2014
comment
Saya telah memposting pertanyaan lain untuk mengatasi masalah yang saya alami jika saya menggunakan kode ukuran kotak. Anda dapat melihat dalam kode itu bahwa saya menerapkannya ke semua kelas yang memiliki 'slickgrid_' sesuai posting ini: github.com/mleibman/SlickGrid/issues/742. Pertanyaan saya yang lain (dengan biola yang menyertainya) dapat ditemukan di sini: stackoverflow.com/questions/21557847/ - person user3267934; 04.02.2014

arrow_upward
1
arrow_downward

Terima kasih, saya juga mengalami masalah di Firefox (hanya) di mana kolom header tidak sejajar dengan badan grid. Posting ini membantu menyelesaikan masalah saya. Saya menggunakan slick.grid.css , dan seperti yang disarankan postingan sebelumnya. Saya tambahkan:

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

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

HTH

person user1313798    schedule 24.02.2014