The modal shatters as soon as it is rotated and then rotated back

I am currently collaborating on a computer science project that involves creating a website. My partner and I decided to incorporate a modal containing information about us, but we are facing an issue when it comes to ensuring the site functions properly on various platforms. The problem arises when I attempt to open the modal on my phone in portrait mode; everything works fine. However, upon switching to landscape mode, the layout breaks, and even reverting back to portrait mode does not resolve the issue. Here is a snippet of the HTML code:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Machine Learning</title>

    <script src="scripts/embedHTML.js"></script>

    <script src="scripts/popUp.js"></script>

    <script src="scripts/underline.js"></script>

    <script src="scripts/modal.js"></script>

    <link rel="stylesheet" href="stylesheets/main.css" />

    <link rel="stylesheet" href="stylesheets/about-us.css" />

    <link rel="stylesheet" href="stylesheets/popup.css" />

    <link rel="stylesheet" href="stylesheets/modal.css" />

    <link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>

<body>

    <header>

        <img id="logo" src="images/logo.png" alt="logo image"></img>
        
        <h1 id="title">Machine Learning</h1>
        
    </header>

    <article id="about-tijmen" class="modal-data" embed-html="pages/Tijmen.html"></article>

    <article id="about-marijn" class="modal-data" embed-html="pages/Marijn.html"></article>

    <div id="glass-pane" class="glass-pane"></div>

    <article id="modal" class="modal">

        <button id="closeModalButton" onclick="toggleModal()">x</button>

        <article id="modal-dialogue"></article>

    </article>

    <script>
        embedHTML();
    </script>

</body>

</html>

Below is the CSS styling:

.modal-data
{
    display: none;
}

.modal {
    pointer-events: none;
    opacity: 0;
    position: fixed;
    z-index: 1000;
    background: red;
    border-radius: 20px;
    border: 2px solid black;
    margin-top: 0px;
    padding-bottom: 20px;
    left: 50%;
    top: 50%;
    transition: opacity .25s linear, display .25s linear;
    transform: translateX(-50%) translateY(-50%);
    overflow: hidden;
    box-shadow: 0 0 100px 10px black inset;
    width: 80vw;
}

.modal.open
{
    pointer-events: all;
    opacity: 100;
}

.glass-pane
{
    pointer-events: none;
    transition: opacity .25s linear;
    background: rgba(0, 102, 255, 0.5);
    z-index: 110;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: 0;
}

.glass-pane.shown
{
    pointer-events: all;
    opacity: 1;
}

#closeModalButton {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    line-height: 20px;
    margin: 0;
    border: 2px solid black;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-left-radius: 20px;
    cursor: pointer;
    font-size: 15px;
}

#modal-dialogue p {
    color: rgb(250, 232, 235);
    width: 90%;
  
    }

ol{
    color: rgb(250, 232, 235);
    display: table;
    margin: 0 auto;
    
}

The JavaScript functions are as follows:

function toggleModal()
{
    let modal = document.getElementById("modal");

    let glass = document.getElementById("glass-pane")

    if(modal.classList.contains("open"))
    {
        modal.classList.remove("open");
        glass.classList.remove("shown");
    }
    else
    {
        modal.classList.add("open");
        glass.classList.add("shown");
    }
}

function setModalContent(id)
{
    let dialogue = document.getElementById("modal-dialogue");

    let data = document.getElementById(id);

    dialogue.innerHTML = data.innerHTML;
}

Lastly, here's a video demonstrating the issue: https://youtu.be/s3bsN72-qYE

javascripthtmlcssmodal-dialog

Answer №1

To ensure your modal content has a scrollbar and stays within the page boundaries, you can add CSS properties like max-height and overflow-y.

You might need to use an @media query for responsiveness, for example:

article {
  overflow-y: auto;
}

@media screen (height:300px) {
  article {
    max-height: 200px;
  }
}

@media screen (height:600px) {
  article {
    max-height: 400px;
  }
}

Alternatively, you can consider using relative units like % or vh. Take a look at this resource:

article {
  max-height: 75vh;
  overflow-y: auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the toggle enabled div is clicked, the drag event is triggered

My draggable div has a "splitter" for expanding and collapsing, but it should only do so on double click or drag. However, when I single click the splitter while the div is collapsed, it repositions to around 10px width. I've attempted using 'st ...

javascriptcsshtmldojo

Is it necessary to use JS/JQ to trigger PHP form data?

Can PHP files/functions be executed without reloading the page? It can be quite disruptive when developing a chat app and every time you send a message, the entire page refreshes. I attempted to use AJAX but it didn't work. Is it not possible to send ...

javascriptphpjqueryajax

Optimize Material-UI input fields to occupy the entire toolbar

I'm having trouble getting the material-ui app bar example to work as I want. I've created a CodeSandbox example based on the Material-UI website. My Goal: My goal is to make the search field expand fully to the right side of the app bar, regar ...

javascripthtmlcssreactjsmaterial-ui

Leveraging async/await to handle the insertion of SQL data

function Scan_Insert_Recursive (dir_path) { //scans dir_path recursively and inserts file path into a temporary list Scan_Recursive(dir_path, (err, files) => { //using npm recursive_readdir for scanning if(err) { console.log(err) ...

javascriptnode.jsasync-await

Having trouble with the Jquery remove function on a Mustache Template reconsider removing this function

I am currently working on implementing a form using Mustache and jQuery. I have added a button that allows users to add new forms, as well as a delete button that removes the respective form. The HTML for each form is generated using Mustache, and every fo ...

javascriptjquerymustache

Retrieving a boolean value from a function that includes an asynchronous AJAX request

In my calendar application, I am working with an array of dates: <div v-for="date in dates">{{ date }}</div> I want to apply a conditional class based on the outcome of an isWeekend() method that involves making an API call: <div v-for="d ...

javascriptvue.js

Executing a function once the loading of images in Laravel is completed through an ajax call

I have a fantastic image gallery on my website that operates similar to Pinterest. $images = Images::paginate(5); Initially, my image page displays 5 images. Controller: if($request->ajax()) { return [ 'images' => view(&apos ...

javascriptphpjqueryajaxlaravel-5.1

The input field displays Spanish text incorrectly when a certain value is set

I am experiencing an issue when trying to enter Spanish text into an input field, as it does not display properly. Strangely, the same text appears correctly when placed inside a div or when already set as the value for the input field. HTML <div>C ...

javascriptjqueryhtml

I am looking for a way to connect a saved phone number with a Vue tel input so that I can make changes

Currently, I am utilizing vue-tel-input to input a phone number. Below is the code snippet: <template> <div> <vue-tel-input v-model="client.ClientPhone" v-bind="bindPropsUserInfo"></vue-tel-input> </div> ...

javascriptvue.jsbindingvue-tel-input

Sort ng-repeat based on the initial character

Working in AngularJS, I am handling an array of objects and aiming to display filtered data based on the first letter. My initial method used was as follows. HTML: <p ng-repeat="film in filmList | startsWith:'C':'title'">{{film. ...

javascriptangularjsangularjs-ng-repeatangular-filters

Is there a way to transform text into a distinct element (such as a divider) when clicked?

I'm currently exploring a method to transform text on my webpage into a divider or new element when clicked. It's a bit difficult to explain, but think of it like an image with a caption underneath - when you click the caption, the image above ch ...

javascripthtmlcss

AngularJS select directive is failing to set the default option in the dropdown menu

I have been learning AngularJS through a tutorial and wanted to implement form validation. I attempted to set a default option for the select element. Despite adding selected="", the default option is not displaying in the browser. Interestingly, when I ...

javascripthtmlangularjsbrowser

Using pdfkit to create a PDF and then returning it as a base64 string from a function

I am attempting to utilize PDFKit to produce a PDF file and then retrieve it as a base64 string. Here is the code snippet I am using: function generatePDFDocument(data){ let doc = new PDFDocument(); var bufferChunks = []; doc.on('readabl ...

javascriptnode.jspdfpdfkitnode-pdfkit

Changing the look of your website with PHP and a drop-down selection bar

Recently, I implemented a drop-down menu that allows users to choose a theme for the website. While this feature works fine, I'm facing difficulty in loading the selected theme upon pressing the "Apply" button as I am fairly new to PHP. I am aware tha ...

phpcssformsdrop-down-menucookies

Customize Pagination Style with Bootstrap Label Alignment

Seeking assistance with aligning a pagination element alongside other buttons and labels within the same row. I would like to have a label displaying current and total item counts right before the pagination elements, ensuring that everything is middle-ali ...

csstwitter-bootstrap-3

Leveraging flask/jinja for incorporating dynamic content without the need for an HTML table

Although I'm not well-versed in web development, I hope this question is on the right track. In my flask app, I'm trying to create a section that showcases albums/cards in a similar style as seen on this example. My goal is to display multiple ...

htmlcssflaskjinja2

Modify the values in a textbox using JavaScript to suit your needs

unusual issue: I'm encountering a strange bug with my form. I have an ajax datepicker attached to a text box, but when I submit the form, all values are received except for those from the datepicker checkboxes. Why is the .Text property empty for th ...

c#asp.netjavascript

creating custom HTML elements in Rails forms

As a newcomer to Rails, I have scoured the internet and books for information on creating custom forms in Rails with no success. I am accustomed to writing my own HTML tags and feel comfortable doing so. I prefer not to rely on libraries like JSF (from JAV ...

htmlruby-on-railsrubycustom-component

Simple Filtering in React Data Grid

I've been delving deeper into "react-data-grid" and trying to implement the Basic Filtering feature in my React app. Here is the Basic Filtering example I'm referencing: The example code in codesandbox: https://codesandbox.io/s/w6jvml4v45?from-e ...

javascriptreactjsreact-data-grid

How can you ensure a code snippet in JavaScript runs only a single time?

I have a scenario where I need to dynamically save my .env content from the AWS secrets manager, but I only want to do this once when the server starts. What would be the best approach for this situation? My project is utilizing TypeScript: getSecrets(&qu ...

javascriptnode.jstypescriptmongodbexpress