Gridstack.js: opsi horizontalMargin untuk mencocokkan verticalMargin yang kita miliki saat ini

Memperbarui:

Mengubah nilai LEFT dan RIGHT secara manual untuk kelas CSS:

.grid-stack .grid-stack-placeholder > .placeholder-content
.grid-stack > .grid-stack-item > .grid-stack-item-content

Mengizinkan beberapa perubahan dalam talang air horizontal di antara item kisi tetapi tidak semudah mengubahnya seperti dengan opsi fungsi.

Juga hasil visualnya berbeda karena talang diterapkan secara berbeda. Margin vertikal tidak menerapkan talang di bagian bawah atau atas kisi, tetapi kelas membuat celah sisipan di kiri dan kanan kisi.

Akan sangat bagus untuk memiliki selokan/margin antara elemen kisi pada sumbu X dan Y KEDUA ditata dan diterapkan ke elemen kisi dengan cara yang sama.

Tambahkan parameter horizMargin dan terapkan margin di bagian dalam grid (seperti yang Anda miliki dengan verticalMargin).

Kita kemudian dapat memilih untuk mengatur margin kiri, atas, bawah dan kanan seperti yang kita butuhkan di CSS.

Terima kasih telah mempertimbangkan permintaan ini.

Saya juga merasa aneh kami hanya memiliki verticalMargin . Saya akan segera membutuhkan horizontalMargin (untuk mengatur keduanya ke 0 atau 1px untuk grid induk tata letak yang ketat (di dalam grid yang lebih lapang)).

@adumesny @kool-kat Saya akan menambahkan horizontalMargin ke daftar fitur yang akan ditambahkan. Saya ingat ada alasan mengapa kami tidak menerapkannya, tetapi untuk saat ini pertimbangkan itu direncanakan!

@radiolips mungkin itu harus menjadi bidang margin tunggal untuk mengontrol keduanya (tidak yakin mengapa Anda menginginkan satu tetapi tidak yang lain ... untuk saat ini saya dapat mengontrol margin horizontal menggunakan CSS (sementara vertikal dalam kode!)

Dalam kasus saya, cukup memasukkan kiri:0px di elemen div grid-stack-item-content berhasil.

<div class="grid-stack-item" id="grid6" width="300" height="300" data-gs-x="9" data-gs-y="4" data-gs-width="3" data-gs-height="4">
            <div class="grid-stack-item-content" id="events" width="300" height="300" style="border-width:1px; border-style:solid dotted;left:0px"></div>
</div>

Menyetel grid-stack-item-content css ke left:0 membuat pegangan pengubahan ukuran muncul 10px di dalam kotak kiri. Sepertinya logika ini perlu diperbaiki di basis kode agar semua hal bekerja dengan baik bersama-sama ...

horizontalMargin

Apakah parameter ini belum ditambahkan?
Bagaimana saya bisa mencapai fungsi serupa?
Terima kasih

.grid-stack .grid-stack-placeholder > .placeholder-content {
  left: 2px;
  right: 2px;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  left: 2px;
  right: 2px;
}

saya tidak memiliki horizontalMargin secara default? apa yang salah?

@crapthings Saya pikir salah satu solusinya adalah dengan mengatur css ini:

.grid-stack > .grid-stack-item > .grid-stack-item-content {
kiri: 4px !penting;
kanan: 4px !penting;
}
Ini juga dapat digunakan untuk mengubah ruang antara 2 item secara horizontal.

sekarang setelah saya terbiasa dengan basis kode, saya mengerti mengapa tidak ada param horizontalMargin seperti verticalMargin . Lebar semua dilakukan di CSS sebagai 100 / # kolom untuk masing-masing dengan padding dalam dilakukan di CSS juga, sedangkan posisi vertikal adalah piksel dalam kode (cellHeight + verticalMargin).

yang mengatakan tidak ada alasan kita tidak dapat memiliki param dan menetapkan aturan CSS, dan mengecualikan titik akhir pertama dan terakhir dari memiliki padding itu, atau memodifikasi vertikal agar memiliki padding di kedua ujungnya agar cocok.

bukan perbaikan sepele untuk memperbaiki semua logika juga ... mengubah subjek untuk membuatnya lebih jelas.

@crapthings apa yang Anda lihat adalah bug berbeda yang saya yakini telah diperbaiki sekarang. Saya mengalami kotak kasus yang akan tumpang tindih karena kami tidak mengatur atribut (digunakan untuk tata letak CSS) kadang-kadang. terutama item default yang kosong.

Adakah yang sudah menemukan solusi untuk ini?

Solusi @otionstem akan menampilkan gagang pengubahan ukuran horizontal di tempat yang salah.

Saya juga mencari solusi elegan untuk ini. Baru mulai mengimplementasikan gridStack dan ini adalah masalah pertama yang saya alami.

.grid-stack .grid-stack-placeholder > .placeholder-content {
  left: 2px;
  right: 2px;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  left: 2px;
  right: 2px;
}

Menambahkan ini juga
.grid-stack > .grid-stack-item > .ui-resizable-e {
kanan: 2px !penting;
}
.grid-stack > .grid-stack-item > .ui-resizable-w {
kiri: 2px !penting;
}

Terima kasih untuk itu. Dengan perubahan gaya itu, itu terlihat jauh lebih baik.

Terima kasih @susilon. Saya pikir saya telah mencoba ini dan mengalami masalah, tetapi solusinya terlihat bagus bagi saya.

Bergantung pada pegangan Anda yang dapat diubah ukurannya, Anda mungkin perlu memasukkan lebih dari sekadar timur dan barat. Saya harus melakukan hal berikut di dalam .grid-stack-item:

.ui-resizable-e, .ui-resizable-se, .ui-resizable-ne {
    right: 3px !important;
}
.ui-resizable-w, .ui-resizable-sw, .ui-resizable-nw {
    left: 3px !important;
}

ini akan diperbaiki dalam rilis 2.0 mendatang - seperti yang Anda lihat kisi induk memiliki margin 10px (default), 1px bersarang hanya menggunakan opsi kisi margin (tidak diperlukan CSS eksternal) dan menangani pegangan pengubahan ukuran juga .

dan contoh lain dari 60 kolom dengan jarak 1px

@adumesny bagaimana saya bisa menggunakan atribut margin di gridstack.all.js (V.1.1.2)?
Bisakah Anda membagikan file apa pun atau saya harus menunggu V.2.0?

maaf, Anda harus menunggu 2.x karena ada sedikit perubahan kode dan tidak kembali porting ke 1.x

Terima kasih @adumesny atas balasan cepatnya.
Kapan kita bisa mengharapkan versi 2.x?
Dan apakah Anda memiliki solusi untuk margin horizontal pada versi 1.x?