Fix modal display with inline styles
The CSS class 'show' was being overridden by global styles causing display:block instead of display:flex. Using inline style.display='flex' to force the modal to show properly with flexbox centering. Changes: - Added modal.style.display = 'flex' when showing modal - Added modal.style.display = 'none' when hiding modal - Added debug logging for inline style verification - This ensures modal displays regardless of CSS conflicts
This commit is contained in:
@@ -1500,8 +1500,11 @@ async function handleQZTrayPrint(selectedRow) {
|
|||||||
// Show modal with show class for proper display
|
// Show modal with show class for proper display
|
||||||
console.log('👉 Adding show class to modal...');
|
console.log('👉 Adding show class to modal...');
|
||||||
modal.classList.add('show');
|
modal.classList.add('show');
|
||||||
|
// Force display with inline style to override any CSS conflicts
|
||||||
|
modal.style.display = 'flex';
|
||||||
console.log('🔍 Modal classList after:', modal.classList.toString());
|
console.log('🔍 Modal classList after:', modal.classList.toString());
|
||||||
console.log('🔍 Modal computed display:', window.getComputedStyle(modal).display);
|
console.log('🔍 Modal computed display:', window.getComputedStyle(modal).display);
|
||||||
|
console.log('🔍 Modal inline display:', modal.style.display);
|
||||||
|
|
||||||
log.innerHTML = '';
|
log.innerHTML = '';
|
||||||
addLogEntry(`Starting print job: ${quantity} labels`, 'info');
|
addLogEntry(`Starting print job: ${quantity} labels`, 'info');
|
||||||
@@ -1657,6 +1660,7 @@ async function handleQZTrayPrint(selectedRow) {
|
|||||||
|
|
||||||
// Close modal
|
// Close modal
|
||||||
modal.classList.remove('show');
|
modal.classList.remove('show');
|
||||||
|
modal.style.display = 'none';
|
||||||
|
|
||||||
// Show success notification
|
// Show success notification
|
||||||
showNotification(`✅ Successfully printed ${quantity} labels!`, 'success');
|
showNotification(`✅ Successfully printed ${quantity} labels!`, 'success');
|
||||||
@@ -1667,16 +1671,19 @@ async function handleQZTrayPrint(selectedRow) {
|
|||||||
// Job was cancelled
|
// Job was cancelled
|
||||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||||
modal.classList.remove('show');
|
modal.classList.remove('show');
|
||||||
|
modal.style.display = 'none';
|
||||||
showNotification(`⚠️ Print job cancelled. ${printController.lastPrintedLabel} of ${quantity} labels printed.`, 'warning');
|
showNotification(`⚠️ Print job cancelled. ${printController.lastPrintedLabel} of ${quantity} labels printed.`, 'warning');
|
||||||
}
|
}
|
||||||
|
|
||||||
} catch (printError) {
|
} catch (printError) {
|
||||||
modal.classList.remove('show');
|
modal.classList.remove('show');
|
||||||
|
modal.style.display = 'none';
|
||||||
throw new Error(`Print failed: ${printError.message}`);
|
throw new Error(`Print failed: ${printError.message}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
modal.classList.remove('show');
|
modal.classList.remove('show');
|
||||||
|
modal.style.display = 'none';
|
||||||
console.error('QZ Tray print error:', error);
|
console.error('QZ Tray print error:', error);
|
||||||
showNotification('❌ QZ Tray print error: ' + error.message, 'error');
|
showNotification('❌ QZ Tray print error: ' + error.message, 'error');
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user