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:
2025-10-02 18:13:37 +03:00
parent 6a184ce191
commit 415e378ab4

View File

@@ -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');
} }