Tips for creating a Material UI (next) dialog with generous top and bottom margins that extend off the screen

I am encountering a challenge with the layout.

What am I looking for?

I need a modal dialog that expands vertically, extending beyond the screen, centered both horizontally and vertically, with minimal margin on the top and bottom.

Is this feature not documented in MUI? The prescribed method in MUI displays a dialog with scrollable content, keeping the action button constantly visible. However, this does not align with our app's design concept. While it may defy Material Design guidelines, it is necessary for our application.

Have you conducted a Google search on this issue? Yes

What have I achieved so far? I have managed to make the dialog grow beyond the screen, with background scrolling appropriately. Nevertheless, I am unable to maintain top and bottom margins as desired; it stretches until it hits the top at 0 (refer to screenshot 2).

To better illustrate this problem, I will showcase two significant scenarios: the dialog smaller than the viewport (A) and larger than the viewport (B).

Screenshot 1 - state A - ideal scenario

Screenshot 2 - state B upper functioning adequately without top / bottom margins

Screenshot 3 - state B upper preferred

Screenshot for state A highlighting the issue by adding top / marginTop / paddingTop

Explore this example here: https://codesandbox.io/s/lxw7ylxy8z

Thus, utilizing a marginTop or top property on the paper element of MUI, or a paddingTop within the root element of the MUI Component dialog property, disrupts state A’s vertical centering while failing to apply bottom margin in state B.

I am contemplating solutions like EQCSS or computations based on the dialog's computed size. Nevertheless, I believe there should be a more efficient approach using only CSS and flexbox. The challenge lies in inserting elements within the MUI Hierarchy, or perhaps I lack the knowledge on how to achieve this.

Hoping for assistance on this matter, Feel free to request additional information if needed.

javascriptmaterial-ui

Answer №1

Adding fixed height divs at the top and bottom made it a breeze to implement. Take a look at the demo here:

I'm going with this solution for the time being.

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

I am facing an issue with file manipulation within a loop

I need to set up a folder with different files each time the script runs. The script should not run if the folder already exists. When I run the script, an asynchronous function is called and one part of this function causes an issue... This is my code : ...

javascriptnode.jsjsondiscord.js

Node - Creating personalized error handling functions

Currently in the process of developing custom helper methods to eliminate redundancies, utilizing express-promise-router app.js has set up the error handler middleware //errorHandler app.use((err, req, res, next) => { //const error = a ...

javascriptnode.jsexpresserror-handlingecmascript-6

What is the best way to send the value of this variable through the parameters?

In jQuery: initializeSliders(socket, '!{requestData}'); requestData is a special object (an HTTP request object in my Express.js web application) that contains information such as my session. However, when I pass this object into the initialize ...

javascriptjquerynode.jshttpexpress

What is causing the error message "TypeError: expressJwt is not a function" to appear? Is there a way to resolve it and fix the issue?

Authentication with JWT in Node.js: const expressJwt = require('express-jwt') function setupAuth() { const secret = process.env.SECRET_KEY return expressJwt({ secret, algorithms: ['HS256'] }) } module.expor ...

javascriptnode.jsauthorizationtokenexpress-jwt

State change shows the previous and current values simultaneously

I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected. Essentially, entriesNum receives a number as an event and changes th ...

javascripthtmlcssreactjsjsx

Troubleshooting notifications encountered while detaching hooks from a class component - Custom Navigation Bar based on User Roles

To create a header using Material UI, Redux, and React with a dropdown menu that displays only sections accessible to the user, I have modified my code. However, I am encountering errors different from what I initially had when using class component hooks. ...

reactjsreduxmaterial-ui

What is the process for removing a range of keys from indexeddb?

I need help deleting keys that start with tracklist/RANDOM_STRING and 'songBook/RANDOM_String'. I attempted to do this using IDBKeyRange but I am struggling to understand how it works. The documentation I referred to was somewhat confusing: Mdn ...

javascriptreactjsindexeddb

Easy task tracker in Vue.js

I’m currently delving into the world of VueJS and working on a simple to-do list application. The issue I’m facing is that I can't seem to successfully pass an array to the child component responsible for displaying the list: Parent Component < ...

javascriptarraysvue.jsobjectvue-component

The fs.fsync(fd, callback) function in the node.js API allows you

Can you explain the purpose of fs.fsync(fd, callback) in the Node.js API? fs.fsync(fd, callback) This function is used for asynchronous fsync(2). The completion callback only returns an exception if there is one. fs.fsyncSync(fd) This function is for ...

javascriptnode.js

Uploading files on a web page using AJAX technology

I'm attempting to perform a file upload on an ajax response page. The main.php file contains basic ajax code as shown below: <html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if ...

phpjavascriptajaxxmlhttprequest

Guide to reference points, current one is constantly nonexistent

As I work on hosting multiple dynamic pages, each with its own function to call at a specific time, I encounter an issue where the current ref is always null. This poses a challenge when trying to access the reference for each page. export default class Qu ...

javascriptreactjstypescriptreact-native

Is it possible for images underneath to receive focus when hovering over them?

I'm struggling with a layout of thumbnails on my page. We'll refer to them as A, B, C, etc. They are currently displayed like this: A, B, C, D, E, F, G, H, I, J, K, L, M, N... and so on. When you hover over one thumbnail, it enlarges by 2.5 t ...

javascriptjqueryhtmlcss

What is the most elegant way to retrieve a new item from Firebase and read it?

My goal is to display the result of a successful read on a page, with only one attempt available before the headers are set and the page is sent. I am looking to retrieve one new value, generated after a listener was initiated so as not to pull existing da ...

javascriptnode.jsexpressfirebase

conceal the mustard-colored dots within the overlay

Whenever I trigger the link, a modal window pops up, but it comes with an unwanted black background color and yellow dots. How can I prevent the yellow dots from showing up on the overlay? http://jsfiddle.net/y88WX/18/embedded/result/ <nav class="da-d ...

javascriptjqueryhtmlcss

Executing a function in the view/template with Angular 2+

Whenever a function is called in the view of an Angular component, it seems to be executed repeatedly. A typical example of this scenario can be seen below: nightclub.component.ts import { Component } from '@angular/core'; @Component({ selec ...

javascriptangulartypescriptangular-components

Tips for sending information to a modal window

I need to transfer the userName from a selected user in a list of userNames that a logged-in user clicks on to a twitter bootstrap modal. I am working with grails and angularjs, where data is populated using angularjs. Set-Up The view page in my grails a ...

javascripttwitter-bootstrapgrailsangularjs

What is the best way to close ngx-simple-modal in angular7 when clicking outside of the modal component?

Can anyone help me with closing the modal in my angular7 app when the user clicks outside of the modal component? I have been using the ngx-simple-modal plugin, and I tried implementing the following code: this.SimpleModalService.addModal(LinkPopupCompone ...

javascriptangulartypescript

Encountering an Error in Node.js When Defining Routes Using Variable Routes

Here is the code snippet from my App.js file- var routes = require('./routes'); app.get('/', routes.index); //var abt = require('./routes/about'); app.get('/about', routes.about); This is the code from my index.j ...

javascriptnode.js

Reposition the element at the bottom of its parent element

I am facing an issue with the HTML structure in my application: <div class="work-item"> <div class="image-container"> </div> <div class="text-container"> </div> </div ...

javascriptjqueryhtmlcss

How to Determine If a String Represents an HTML Tag Using jQuery

Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...

javascriptjqueryhtml