try use 80% area of browser

This commit is contained in:
Luiz Costa 2024-06-07 12:19:07 +01:00
parent 4906e374de
commit 7e37d40f31

View File

@ -8,7 +8,7 @@ function loadLeafletAndInitMap(frm, callback) {
function create_dialog_and_init_map(frm) { function create_dialog_and_init_map(frm) {
const dialog = new frappe.ui.Dialog({ const dialog = new frappe.ui.Dialog({
title: 'Show Route', title: 'Show Route',
fields: [{ fieldtype: 'HTML', fieldname: 'map_html', label: 'Map', options: '<div id="map" style="width:800px;height:600px;"></div>' }], fields: [{ fieldtype: 'HTML', fieldname: 'map_html', label: 'Map', options: ' < div id="map" style="width:100%;height:100%;" ></div>' }],
primary_action_label: 'Close', primary_action_label: 'Close',
primary_action() { primary_action() {
if (currentMap) { if (currentMap) {
@ -19,9 +19,11 @@ function create_dialog_and_init_map(frm) {
} }
}); });
// Adjust the size of the dialog // Adjust the size of the dialog dynamically to 80% of the browser window
dialog.$wrapper.find('.modal-content').css("width", "850px"); const modalContent = dialog.$wrapper.find('.modal-content');
//dialog.$wrapper.find('.modal-content').css("height", "600px"); modalContent.css("width", "80%");
modalContent.css("height", "80%");
modalContent.css("max-width", "none"); // Ensure no max-width restrictions
// Add hide event to reload the page when the dialog is closed // Add hide event to reload the page when the dialog is closed
dialog.onhide = function () { dialog.onhide = function () {
@ -125,6 +127,11 @@ function init_map(frm) {
function show_map(frm) { function show_map(frm) {
console.log("Loading map..."); console.log("Loading map...");
// Ensure the map container expands to fit its parent
document.getElementById('map').style.width = "100%";
document.getElementById('map').style.height = "100%";
loadLeafletAndInitMap(frm, create_dialog_and_init_map); loadLeafletAndInitMap(frm, create_dialog_and_init_map);
} }