Scrolling in CSS Modals

Take a look at this Plunk for reference: https://plnkr.co/edit/se1lRiXuQ4JtvqQcEtOA

I'm attempting to design a mobile-friendly modal. I require the CSS to maintain the following layout without changing the HTML ordering:

  1. Keep the Header fixed at the top when scrolling
  2. Ensure the Buttons stay fixed under the header (always visible)
  3. Make the Item list scrollable

Since element heights can vary, I'd like a generic solution that automatically adjusts heights.

I'm stuck on this problem, any suggestions?

HTML

<div class="modal">
  <div class="modal-title">
    Header
  </div>
  <div class="modal-content">
    <div class="button-group">
      <div class="button selected">Button One</div>
      <div class="button">Button Two</div>
    </div>
    <div class="list"></div>
      (remaining HTML code here...)

CSS

(CSS code here...)
htmlcssmodal-dialog

Answer №1

Below are the modifications to be made in your CSS:

1. Start by setting your title with position: fixed;, and ensure it has a width: 100%.

.modal-title {
  position: fixed;
  width: 100%;
}

2. Apply the same adjustments to the title, but include top: 52px; so it doesn't overlap with your header.

.button-group {
  top: 52px;
  position: fixed;
  width: 100%;
}

3. To enable scrolling for the list, remove position: absolute; from the .modal class, and add some margin to prevent your list from hiding beneath the header and buttons.

.modal {
  position: absolute; //<--- Remove this
}

.modal-content {
  margin-top: 78px;
}

JSFiddle

In terms of addressing the dynamic height issue, CSS alone is insufficient. For situations where you want the buttons or title to vary in height, refer to this JavaScript solution.

Answer №2

  1. .popup-title{
    display: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
}

  2. .button-container{
    display: fixed;
    top: 52px; 
    width: 100%;
}

  3. .popup-box{
    overflow: auto;
}

currently, some elements are being obscured by the header. Solution:

.popup-content {
    margin-top: 78px;
}

UPDATE: Oops Hunter beat me to it, my apologies

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

Can the submit ID value be utilized in PHP?

name="submit" functions as expected. if(isset($_POST["submit"])) <input type="submit" ID="asdf" name="submit" value="Save" class="ui blue mini button"> I want to change it to use ...

javascriptphphtml

incorrect text alignment issue on mobile devices, potentially limited to iOS as Android has not been tested

I am experiencing an issue with the alignment of two forms on my webpage when viewed on iOS devices such as iPhone and iPad Safari. Strangely, the forms display correctly on computers (Windows and even Mac with Safari), but on mobile devices the inputs are ...

htmlcssios

Instructions on changing row color with button click and reverting back to original color upon subsequent click

When the button is pressed, I'd like to change the color. When the same button is pressed again, I want it to revert back to its original color. Currently, when the button is clicked, all rows change color. Sample Code Snippet: <table> & ...

htmlcssangularjs

Retrieve the ID of the image element using Jquery from a collection of images within a div container

I'm encountering a simple issue that I can't seem to solve. I am working on a basic slider/gallery with the following functionalities: 1) "If button 1 is clicked, image one will appear." 2) "Clicking on button 2 will make IMAGE 1 slide left and I ...

javascriptjqueryhtmlcssimage

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

I included this code in the basic module HTML block of a WordPress page builder and encountered the white screen of death. According to the Chrome developer console, the following error occurred: helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is ...

javascriptjqueryhtmlcsswordpress

Tips for clearing out text in a <p> tag with javascript when it exceeds a specific length of 100 characters

Is there a way to automatically truncate text to (...) when it exceeds 100 characters inside a paragraph with the class .class? For instance, if I have a long paragraph like this: <div class='classname'> <p>Lorem ipsum dolor sit ame ...

javascripthtmlcsstypescript

The use of a custom padding on a text input with the Bootstrap 3 form-control class can cause the text to be hidden

It seems like the code is working fine in Opera and Chrome, but in Firefox and IE11, the text is getting hidden, which is not very enjoyable. I don't have a Mac, so I can't test it on Safari. You can see the issue in action on this Plunker. I&a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Adjust the background color of the panel heading when it is toggled in a Bootstrap collapsible panel group

I'm currently working on a collapsible panel group design using Bootstrap. I want the panel heading to have a different background color when the panel group is expanded versus when it is collapsed. I initially attempted to use the :active selector, b ...

htmlcssbootstrap-4collapsable

Encountering issues with accessing image files located in the public folder of my Next.js project - Receiving a 404 Error message

I am currently facing an issue with my Next.js project where I am unable to use image files from the public folder. Despite checking that the file paths, names, and extensions are correct, as well as ensuring my configurations are accurate, I keep encounte ...

javascriptcssnext.js

Expansive image coverage

My footer design includes a rounded left image, a repeating middle section, and a rounded right image. How can I ensure that it scales perfectly responsively without overlapping? Ideally, the solution would involve adjusting the width of the middle section ...

javascripthtmlcsswidth

The contents within the <div> element are not appearing on the webpage

I've been attempting to design a card that performs a 3D rotation when the mouse hovers over it. While I've successfully incorporated the background and front image of the card, I'm facing an issue with adding text to it. Here is the incorr ...

htmlcss

Developing an object that displays animated effects when modifying its properties, such as visibility, and more

Exploring the realm of animations in JavaScript and AngularJS has led me to the idea of creating a unique JavaScript object. Imagine having the ability to define an object where setting an attribute like obj.visible = true Would automatically make the ...

javascripthtmlcssangularjsionic-framework

I'm looking to customize the text displayed on the screen from my JSON file. Is there a way to hide this text?

I am currently working with a JSON data file that contains values and displays them on the screen alongside a CSS property width. However, I do not want the output to be the actual numerical data; instead, I aim to connect the JSON file so that the value s ...

jquerycssjson

What is the method for a HTML button to trigger the execution of a Selenium (Java) code located in a remote location through a

I need to run a Selenium Code written in Java from a NAS (Network Attached Storage) or another connected machine. My goal is to create a web page with a button that, when clicked, triggers the execution of the Selenium script located on the connected mac ...

javascripthtmlseleniumuibuttonbuttonclick

Styling with CSS: Using a Base64 Encoded Image in the Background URL

Can a Base64 encoded image be loaded as a background image URL without exposing the actual encoded string in the page source? For example, if a Node API is used to GET request at "/image", it returns the serialized Base64 data. res.json("da ...

javascripthtmlcssnode.js

Tips for ensuring the middle row remains sandwiched between the header and footer rows in Bootstrap

After adding styles for img with max-height:100% and max-width:100%, the display looked fine with just images. However, upon further inspection, I noticed that if the middle row (which can contain one or two columns side by side) has multiple images or an ...

javascripthtmlcssbootstrap-4responsive

What is the best way to extend a column across multiple rows with bootstrap?

https://i.sstatic.net/uPsLe.jpg Looking to convert the design above into HTML and CSS, specifically trying to achieve a layout where the image spans across 2 rows. However, I've been having trouble making it responsive even after trying some code sni ...

htmlcsstwitter-bootstrap

When an image is loaded, use Jquery to automatically open a new tab, instead of

I need to implement a function where, on loading an image on a page, a new tab opens and starts downloading a file from a specific URL while keeping the original page open. This task is part of a WordPress site with a jQuery section in the backend. I' ...

javascriptjqueryhtmlwordpress

Modifying Bootstrap Grid Layouts

I need to reorganize the columns for better responsiveness as the current order is not ideal. Below is the code snippet: <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" ari ...

htmlcssbootstrap-4

Gather information that is dynamic upon the selection of a "li" option using Python Selenium

I need to extract data from this website (disregard the Hebrew text). To begin, I must choose one of the options from the initial dropdown menu below: https://i.stack.imgur.com/qvIyN.png Next, click the designated button: https://i.stack.imgur.com/THb ...

pythonhtmlseleniumweb-scrapingscreen-scraping