Here is the HTML code containing a date picker popup implemented using SweetAlert2:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
...
I'm facing an issue with an unexpected horizontal scrollbar appearing on its own. I tried adjusting scrollbarPadding without success. How can I hide this scrollbar? And why does it appear automatically?
UPDATE
Upon modifying custom.didOpen() as shown below, the horizontal scrollbar is no longer visible:
didOpen: () => {
document.getElementById('start-date-modal').removeAttribute('disabled'),
document.getElementById('end-date-modal').removeAttribute('disabled'),
document.getElementById('date-picker-modal').style.overflow = "hidden"
}
However, when attempting to achieve the same result using CSS like this, it doesn't work:
.date-picker-modal {
overflow: hidden;
}
Can you explain why these different approaches yield different outcomes?