Positioning the modal toward the bottom across all screen sizes

In my current project, I am utilizing react-bootstrap modal. My goal is to position the modal at the bottom of all screen resolutions. While I have successfully achieved this by adjusting the CSS bottom property to -74% for 1080x1920 resolutions, the same method does not work for other devices.

<div role="dialog" aria-modal="true" class="fade modal show" tabindex="-1" style="display: block; padding-left: 0px;">
   <div role="document" class="modal-dialog sc-modal">
      <div class="modal-content">...
      </div>
   </div>
</div>



.sc-modal{
    width:100% !important; 
    top: unset;
    bottom:0%;
    max-width: 1080px;
    left: 50%;
    transform: translate(-50%, 0) !important;
}

Is there a way to consistently place the modal at the bottom across all device resolutions?

htmlcssmodal-dialogreact-bootstrapreact-bootstrap4-modal

Answer №1

Utilizing the CSS property <code>position
can assist in anchoring the modal to the lower section of the browser window.

.modal.in .modal-dialog {
   position: fixed;       
   bottom: 0;
   left: 50%;
   transform: translate(-50%);
}

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

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...

javascriptjquerycss

Development and build layouts are not matching up in Gatsby

Currently, I am utilizing Gatsby and pulling my data from the Airtable plugin. Additionally, I am implementing gatsby-image for lazy loading functions. However, an issue arises during the gatsby build process. The second item from Airtable data appears in ...

htmlreactjsgatsby

Adding a new element with Jquery when a dropdown option is selected

What is causing this issue to not function properly? <script> $(document).ready(function(){ $('#custom_field option').click(function(){ $('#custom_field_input').append('<tr><td></td> ...

phpjavascriptjqueryhtmlforms

Is it possible to mix units within the 'path' element in SVG?

Utilizing SVG's rectangle element, you can specify dimensions as a percentage of its owner's dimensions and set a radius in pixels. By using the code below: <div style="position: relative;"> <object class="AIRound" t ...

htmlsvg

Creating a div larger in size than the wrapper

Would it be feasible to have a container with a width of 1000px;, while simultaneously having a DIV inside the container that has a width of 100%? Is that achievable in any way? Here is a snippet of my code: <div class="block1"> <img src="i ...

html

What steps can I take to improve the smoothness of my Slick slider and ensure it functions correctly across all screen widths

I have been experimenting with a carousel slider using Slick Carousel (). My goal is to make it loop infinitely and function smoothly at different browser widths without the cards stacking, but it's not quite working as intended yet. Currently, there ...

javascriptjquerycsssliderslick.js

What is the appropriate way to add left padding or left margin to the modal footer in Bootstrap 5.3

I have been working on creating a modal that resembles a chat box. I have completed most of the work, but I am facing an issue with the input area not being fixed. My goal is to have the input text displayed on the footer of the modal, but it seems like th ...

htmlcssbootstrap-5bootstrap5-modal

In Firefox, the CSS height and width values are displayed as X pixels, whereas in Internet Explorer, they are automatically set to 'auto'

When it comes to measuring div box dimensions, jQuery can be a handy tool. Here is an example code snippet: $(document).ready(function(){ var h = $("#testbox").css("height"); }); Interestingly, the same code can give different results in different brow ...

javascriptjquerycssinternet-explorer

Incomplete Rotation CSS Animation

I am attempting to create a horizontal spinning image using only CSS3. Check out my webpage here: You can find the CSS file here: www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css The code for calling the spin effect is at the top, with the actual imp ...

cssanimation

Position a grid item in the center

Can someone help me with centering my container's item? I am struggling to align the third item to the center using display: grid. Previously, I attempted to use flexbox but found it to be less effective for a responsive layout. .projetos { f ...

htmlcsscss-grid

Finding the variance in the given situation is as simple as following these steps

To find the variance between the "Total Marks" in a question and the input texts for each answer, we need to consider specific scenarios. Firstly, if a question has only one answer, the text input should be displayed as readonly with the same value as the ...

phpjavascriptjqueryhtml

Is it possible to have the soft keyboard automatically appear when the page loads?

On an HTML5 website, I have an input element and I want the soft keyboard to automatically appear and focus on that input element. I attempted to use the 'autofocus' attribute on the 'input' element, but this only focused on the element ...

javascripthtmlinputfrontend

What is the best method for linking an HTML file to CSS, javascript, and image files?

I need assistance with running an HTML file along with its source files that I downloaded from the server. The HTML file is located in NSCachesDirectory and here is the code snippet I am using. Can someone please help me figure this out? NSArray *paths ...

javascripthtmlioszipnsurl

Ways to achieve a darker background with rgba(0,0,0,0.5)

Hey there, if this isn't the right place to post my query, could someone guide me on where to do so? TL;DR = I need to darken the background of my showcase image! I'm working on a website as part of an online course project to practice new skil ...

htmlcss

Please add content prior to the <input type="image"> tag

To improve the code for adding a product to the basket, I want to enhance the buy button by incorporating an image or background fill with HTML text on top of it. <input border="0" src="/images/buy.png" type="image" /> ...

htmlcsswebshop

What is the term for the color used to highlight selections in CSS?

After discovering the hex values of default selection colors on various systems and learning about setting text or item colors with CSS3 from this insightful answer, I find myself wondering if it is possible to highlight selections in SVG elements using th ...

htmlcsscolors

Issue with overlay functionality after updating to jQuery version 1.12.1

Hey there! I'm currently in the process of upgrading my web application system's jQuery to version 1.12.1 and I've run into an issue with the overlay not functioning properly in the new jQuery version. My setup involves using ajax to displ ...

javascriptjqueryhtmlajaxjquery-ui

Converting this HTML/PHP code into JavaScript: A step-by-step guide

I have been struggling to convert this code into JavaScript in order to set the document.getElementById().innerHTML and display it in HTML. Can anyone assist with writing this code in JavaScript? <form action='create_new_invoice.php?name="<?php ...

javascriptphphtml

Having issues getting Toggle Switches to function properly in Asp.Net Webforms

I am in need of a toggle switch that can be toggled on or off depending on the user's preference. Here is a CSS code snippet that I have come across in various examples: .switch { position: relative; display: inline-block; width: 60px; hei ...

htmlcssasp.netcheckboxtoggle

Embed shapes inside the margins of an HTML container

I'm aiming to create something unique by placing the circle and triangle on the borders of an HTML block. https://i.sstatic.net/MVYuc.png Below is the CSS code for my block: .block { color: red; } .cercle { border-radius: 50%; } .triang ...

htmlcss