The issue of unresponsive background on mobile devices in Bootstrap 4 Modals

<script type="text/javascript">
    $(window).on('load',function(){
        $('#loginerrormodal').modal('show');
    });
</script>

<div class="modal fade" tabindex="-1" role="dialog" id="loginerrormodal">
    <div class="modal-dialog" role="document">
        <div class="modal-content bg-white">
            <div class="modal-header">
                <h5 class="modal-title">...</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"&times;</span>
                </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>

Despite the modal showing on page load and not having launch buttons, I noticed a responsiveness issue with the black background on mobile:

https://i.sstatic.net/6anYP.png

Any ideas on how to address this? Thank you.

htmlcssbootstrap-4

Answer №1

Upon inspection of the live version provided, it is evident that there is an element extending beyond the device's total width, causing disruption to the modal.

To rectify this issue, locate the <div> with classes "card", "bg-white", and "mx-auto", and remove the inline style of width: 30rem specifically for mobile devices at the breakpoint of 480px.

If removing the style directly is not feasible, you can implement a media query using !important to override the inline style, like so:

@media (max-width: 480px) { // the breakpoint where the problem occurs
  .card.bg-white.mx-auto {
    width: 100% !important; // This should take precedence over 30rem
  }
}

Answer №2

The solution I came up with is:

.modal-backdrop {
    height: 100%;
    width: 100%;
}

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

What is the best way to split a word within a list item in Bootstrap 4?

I am currently facing an issue with a list created using Bootstrap 4, where some items contain long text that is causing problems on small screen devices. I have attempted to use white-space:nowrap and the text-nowrap class, but neither solution has fixed ...

htmlcssbootstrap-4

Utilizing Shadow Root and Native Web Components for Seamless In-Page Linking

An illustration of this issue is the <foot-note> custom web component that was developed for my new website, fanaro.io. Normally, in-page linking involves assigning an id to a specific element and then using an <a> with href="#id_name&quo ...

javascripthtmltypescriptweb-componentnative-web-component

The functionality of Jquery is successfully integrated into a specific function, however it seems to only work for one of the calls. To make the other call work,

After a user makes a selection, I am attempting to reset the 'selected' item. This process calls the Vue function tS() shown below. The issue lies with the first call $('#sel1').prop('selectedIndex',0);, as it only seems to wo ...

javascriptjqueryhtmlvue.js

How to Conceal the <th> Tag with JavaScript

I attempted to conceal certain table elements using JavaScript. For <td> elements, it works fine: function hide(){ var x=document.getElementsByTagName('td'); for(var i in x){ x[i].style.visibility='hidden'; ...

javascripthtml

What is the best way to implement validation in a textarea to restrict the word count to a minimum of 250 and a maximum

I want to implement jQuery validation for a textarea field, with a requirement of 250 minimum words and 1000 maximum words. Additionally, I need to display the word count in a span tag next to the text area. How can I ensure that this validation works even ...

javascriptjqueryhtmlvalidation

Using JQuery to limit the characters in a TextBox to only alphabets, numbers, and forward slashes

How can I limit a text field in ASP.NET to only allow alphanumeric characters and forward slashes (/)? I've tried the code snippet below: function jsCheckInput(e) { var evt = (e) ? e : window.event; var key = (evt.keyCode) ? evt.keyCode : evt ...

javascriptjqueryhtmlasp.netkeyboard

Div containing elements positioned side by side

<div class="card-body" data-bind="if :showParam() || editParameters() "> <form class="col-lg-12 col-md-12 col-sm-12 form-horizontal" data-bind="submit: submitReportData"> <div id="input-holder" data-bind ...

htmlcssbootstrap-4

Is there a better approach to accomplishing this task using jQuery?

http://jsfiddle.net/bGDME/ My goal is to display only the selected content within the scope and hide the rest. The method I used feels a bit cumbersome. I'm open to suggestions on how to improve this. Any guidance would be greatly appreciated. Tha ...

javascriptjqueryhtml

Using form.submit() alongside preventDefault() will not yield the desired outcome

My login form needs to either close the lightbox or update the error box based on the success of the login attempt. I suspect the issue lies with the onclick="formhash(this.form, this.form.password);" which is a JavaScript function that hashes a passwor ...

javascriptphpjqueryhtmlajax

variations in layout between Chrome/Firefox and Internet Explorer

I'm working with the following layout:- html:- <header> <div class="content-wrapper"> <div id="headerContainer"> <div class="headerProfileNotifications"> <img src="Images/" alt="not ...

htmlcsscross-browsercss-float

Arranging interactive DIVs in a grid formation, experiencing issues with the final DIV

Hello everyone, I'm currently working on creating a grid of clickable DIVs that contain text and link to another website when clicked. However, I've run into an issue where the last DIV in the second row is slightly raised above the others, and I ...

htmlcsshovercenter

Phonegap enables iOS keyboard to dynamically adjust screen size during use

Currently, I am developing an iOS app using phonegap 3.0 and have encountered a particular issue. In my app, there is a window where users are required to enter a promo code. The problem arises when I click on the input area (see this example) and then pr ...

javascriptioscsscordovakeyboard

Use jQuery to locate the active class within a specific list item and then transfer that class to a different item within the

I have a pair of indicator lists for a bootstrap carousel First List: <ol class="rightci carousel-indicators"> <li class="active" data-target="#carousel-example-generic" data-slide-to="0" ></li> <li data-target="#carousel-example-g ...

javascriptjqueryhtmlcsstwitter-bootstrap

Modify code on click using JavaScript

Here is some code I found for a custom style switcher: I am thinking about integrating it into my bootstrap dropdown button. The current code for the style switcher is as follows: <form id="switchform"> <input type="radio" name="choice" value= ...

javascripthtmltwitter-bootstrap

Encountering a perpetual loop error when trying to set the useState() function in React

In my case with the multiSelect component, when the Value prop is set to an empty array [], I want to also set my useState to an empty array. I attempted to achieve this with the following code: const [selected, setSelected] = useState([]); useEffect(() ...

javascripthtmlreactjsreact-hooksantd

What is the best way to ensure a navigation bar remains fixed at the top of a webpage?

My goal is to create a navigation bar that remains at the top of the page much like how it appears on forbes.com I am aware that I can achieve this by using the following CSS: nav { position: fixed; top: 0; } However, in my case, the navigation ba ...

htmlcssnavigationfixed

Applying a CSS transition to transform properties excluding rotation effects

I'm looking to apply a transitional animation to an element's transform property without affecting the rotation. Here is the code snippet: <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js ...

javascriptjquerycsscss-transitions

Identify HTML elements within a textarea or text input using JavaScript while also accommodating the common special characters ">" and "<"

Is there a way to accurately detect HTML tags in textarea or text input fields before submitting a form? While it may seem straightforward to use regular expressions like /<\/?[^>]*>/gi.test(str) for this purpose, the challenge arises when de ...

javascripthtml

Internet Explorer reverts back to default fonts once the webpage has completed loading

I'm encountering a minor problem with a website I'm currently working on. My CSS and web fonts are from Fonts.com, and everything seems fine except in Internet Explorer. Initially, the page displays with the fonts correctly applied, but once the ...

cssinternet-explorerwebfonts

Is there a way to modify a tumblr og:image to meet a minimum size of 200x200 pixels?

My friend asked for my help with his tumblr blog because he doesn't know how to code. Facebook Open Graph guidelines state that an og:image must be at least 200x200 for the image to display when you link to your site. However, tumblr forces a 128x128 ...

jqueryhtmlfacebookfacebook-graph-api