Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Begini Mudahnya Mengubah Lebar Modal Dialog di PHPMaker 2022
Mudahnya Mengubah Data yang Diekspor di Aplikasi Web dari PHPMaker 2022
Item Menu Tetap Aktif Meskipun Sedang Menampilkan Halaman Tambah, Ubah, Tampilkan, Cari di PHPMaker 2022

Begini Mudahnya Mengubah Lebar Modal Dialog di PHPMaker 2022

Sen, 15 Agustus 2022 oleh Masino Sinaga Tinggalkan Komentar

Secara standar, PHPMaker 2022 menggunakan class modal-xl untuk menampilkan jendela Modal Dialog lewat bantuan CSS Framework Bootstrap 5. Class ini akan membuat lebar jendela Modal Dialog relatif besar. Nyaris mendekati sisi kiri dan kanan dari layar komputer. Apalagi jika ditampilkan pada laptop atau komputer yang ukuran layarnya relati kecil.

Jika Anda menggunakan Masino Extensions untuk PHPMaker 2022, maka class standar di atas tadi berubah menjadi modal-lg, atau satu tingkat di bawah ukuran class modal-xl. Hal ini sengaja saya lakukan, karena pada umumnya kita tidak membutuhkan lebar Modal Dialog yang terlalu besar.

Namun ada kalanya kita membutuhkan jendela Modal Dialog yang besar untuk satu atau beberapa table tertentu. Apalagi jika kita menggunakan fitur Custom Templates di PHPMaker 2022 yang dapat mengubah layout form Add dan/atau Edit menjadi 2 kolom. Untuk kondisi ini, maka sangat disarankan menggunakan class modal-xl daripada menggunakan class modal-lg.

Pertanyaan selanjutnya, bagaimana cara kita untuk mengubah atau menyesuaikan class Modal Dialog tadi tanpa harus mengubah kode pada file template maupun kode pada file yang sudah dihasilkan oleh PHPMaker 2022? Pertanyaan yang cerdas dan bagus sekali!

Jawabannya sangatlah mudah. Kita cukup menambahkan 3 baris kode jQuery berikut ke bagian Startup Script milik halaman yang terkait.

Katakanlah kita ingin mengubah lebar jendela Modal Dialog dari modal-lg menjadi modal-xl pada form/halaman Add, maka masukkan kode jQuery berikut ke lokasi Client Scripts -> Table-Specific -> Add Page -> Startup Script:

$('#ew-modal-dialog').on('shown.bs.modal', function (event) {
    $(this).find('.modal-dialog.modal-lg').removeClass('modal-lg').addClass('modal-xl');
});

Ya, hanya dengan 3 baris kode itu saja, kita sudah dapat mengubah lebar jendela Modal Dialog, dari yang sebelumnya menggunakan class modal-lg menjadi class modal-xl.

Sebaliknya, jika ingin mengubah dari modal-xl ke modal-lg, maka gunakan kode berikut:

$('#ew-modal-dialog').on('shown.bs.modal', function (event) {
    $(this).find('.modal-dialog.modal-xl').removeClass('modal-xl').addClass('modal-lg');
});

Ingat! Jangan sampai terbalik ya! Sesuaikan dengan kebutuhan!

Jika halaman Add, Edit, dan/atau View kita tampilkan dari link menu atau tombol yang terdapat di halaman List, maka pastikan kode di atas tadi juga Anda tambahkan ke lokasi berikut: Client Scripts -> Table-Specific -> List Page -> Startup Script.

Betapa mudah dan cepatnya, bukan? Kita sebagai Web Developer tidak perlu menulis kode hanya untuk membuat Modal Dialog tertentu dengan lebar atau class tertentu.

Cukup dengan menambahkan sedikit kode itu saja, dan selebihnya sudah ditangani oleh PHPMaker 2022.

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, Modal Dialog, PHPMaker 2022, PHPMaker Indonesia, Tutorial PHPMaker

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com, ilovephpmaker.com, dan phpmakerprojects.com.

Mudahnya Mengubah Data yang Diekspor di Aplikasi Web dari PHPMaker 2022
Item Menu Tetap Aktif Meskipun Sedang Menampilkan Halaman Tambah, Ubah, Tampilkan, Cari di PHPMaker 2022

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses

Pos-pos Terbaru

  • Masino Extensions for PHPMaker 2025 Now Changed!
  • Begini Mudahnya Mengurangi Lebar Combobox pada PHPMaker 2025
  • Mudahnya Mengubah Nilai Delay Auto Hide Success Message di PHPMaker 2025
  • Mudahnya Berpindah Layout dari Table ke Cards di Halaman List lewat PHPMaker 2025
  • Jangan Lupa Pakai AdjustSql Saat Insert atau Update Data Lewat ExecuteStatement

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Dendi pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Charly pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2025 | WordPress | Catat masuk | Kembali ke atas