Two Bootstrap modals with customized maximum width and height dimensions

I'm working on designing 2 modals for a Bootstrap themed webpage.

https://i.sstatic.net/N4gNl.png

One of the modals, the wider one, has been successfully created. Below is the CSS code:

.modal-dialog {
    width: auto;
    height: auto;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width:900px;
}

The wider modal looks exactly how I wanted it to look with the given code.

However, I am facing an issue with the smaller modal now.

For the smaller modal, I need it to be responsive with a maximum width of 360px and maximum height of 340px.

Do I need to modify the .modal-dialog CSS specifically for the smaller modal?

htmlcsstwitter-bootstrap

Answer №1

To address various sizes and behaviors, consider creating custom variations of the standard modal:

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myWiderModalLabel">
  <div class="modal-dialog modal-wider">
    <div class="modal-content">
      <div class="modal-body> ... </div>

    </div>
  </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallerModalLabel">
  <div class="modal-dialog modal-smaller">
    <div class="modal-content">
      <div class="modal-body> ... </div>

    </div>
  </div>
</div>

.modal-dialog {
  &.modal-wider {
    width: auto;
    height: auto;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width: 900px;
  }

  &.modal-smaller {
    width: auto;
    height: auto;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width:360px;

    .modal-body {
        max-height: 340px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
  }
}

Answer №2

If you're looking for an alternative approach (without relying on Bootstrap), consider the following solution:

HTML :

<div class="modal-dialog">
    <div class="modal-dialog-small">
        Lorem ipsum dolor sit amet...
    </div>
</div>

CSS :

.modal-dialog {
    width: auto;
    height: auto;
    position: fixed;
    text-align: center;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width:900px;
    background: red;
}

.modal-dialog-small {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: left;
    background: blue;
    max-width: 360px;
    max-height: 340px;
    margin-top: 50vh;
    transform: translateY(-50%);
}

Check out this Fiddle JS link for a live demo.

Kudos to Danny H for providing a more thorough answer!

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

Styling for the bootstrap dropdown menu is missing

While attempting to incorporate a bootstrap dropdown menu, I noticed that despite applying the appropriate class to the sublist, the formatting and padding that is typically associated with bootstrap are not being retained. My current setup involves using ...

htmltwitter-bootstraptwitter-bootstrap-4

The alignment of Bootstrap input fields is off center

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); <div class="row"> <div class="col-xs-12 text-center btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Customize the appearance of Angular components by altering their color schemes

When working on my project, I often utilize pre-made Angular components. However, some of these components come with colors that do not align with the overall aesthetic of my project (refer to image above). To rectify this issue, I am looking to replace t ...

cssangular

Is it possible to integrate a Twitter bootstrap theme into a Rails 4 application if the Vendor/assets directory is missing?

My goal is to integrate a theme from wrapbootstrap.com into my rails 4.1 application. After creating a new app with rails 4 scaffolding, I proceeded to extract the downloaded zip directory which contains 4 directories and an index.html file. I then placed ...

javascriptcssruby-on-railstwitter-bootstrap

Why does the Material button style take time to apply when my Angular application first loads instead of being immediate?

Inside the Angular application I'm working on, there is a toolbar component that consists of three different links. The first link directs to the main app page, while the other two lead to distinct components within the app. Each link is styled with c ...

cssangularangular-material

The reliability of jQuery posting varies

My current setup involves using jQuery to send data to an external source with the code snippet provided below. As part of the process, I'm also ensuring that all input fields are filled out correctly. However, there has been a strange issue where the ...

jqueryhtml

The website is failing to adapt properly to smaller screen sizes

I would share some code here, but it might be easier for you to just check out the URL instead. The issue is that the website was responsive across different screen sizes at first, but after making some changes in the CSS and HTML, it's not working pr ...

htmlcss

css - design your layout with floating div elements

I used to design layouts using tables, but now I'm trying it out with divs. However, I'm still struggling to get the layout right. It's not as straightforward as using tables. For instance, my code looks like this: var html_output = "< ...

jquerycsshtml

Angular 14: Enhance Your User Experience with Dynamic Angular Material Table Row Management

My inquiry: I have encountered an issue with the Angular material table. After installing and setting up my first table, I created a function to delete the last row. However, the table is not refreshing as expected. It only updates when I make a site chang ...

htmlangulartypescriptangular-material

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Using jQuery, I am adding HTML code to a div. One part of this code involves referencing a div's ID by concatenating a variable from a loop. $(... + '<div class="recommendations filter" id="recCards-'+ i +'">' + &apo ...

javascriptjqueryhtmlcssconcatenation

Struggling to pass a function argument as a string for use within the function

Although the title may seem unclear, I will clarify. I have a collection of images on the left side and I have implemented an onclick function on each one to display the image and some information on the right side. It's like having thumbnails on the ...

javascripthtmlfunction

Insert a new HTML element only if it is not already present

<p id="main_class"> <span class="new_class"></span> </p> In this code snippet, I am attempting to append <span class="new_class"></span> to the element with the id of main_class. If the span element with the class o ...

javascriptjqueryhtml

Creating a page turn effect during the loading of a page within an iframe

Is there a way to create a page turn effect similar to reading a book for an iframe that is loading dynamic content? Any suggestions would be greatly appreciated. Link: ...

jqueryhtmlcss

Guide to activating the 'Next' button on WP Forms using JavaScript code when certain conditions are fulfilled

Is there a way to adjust the JavaScript code provided so that the visibility of the "Next" button is dependent on whether at least one item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class on the current page or ...

javascripthtmlcsswordpresswpforms

What is preventing me from extracting all information from online shopping sites?

Recently, I've been tackling a project that involves scraping data from various e-commerce websites. However, I've encountered difficulties in extracting the desired information from these sites. For instance, when attempting to scrape all the li ...

pythonhtmlweb-scrapingbeautifulsoup

Exploring methods to detect when a PHP page has been printed using the 'ctrl+p' shortcut and then subsequently updating

Hey there! I'm currently managing a php website that functions as an accounting system. Within this system, there are receipts, invoices, and other forms of documentation in use. However, I've encountered a problem with the main table in my myS ...

javascriptphphtmlmysqlcss

Can you direct me to resources on the internet that provide information about support for 12 Bit color depth?

I am curious to know when the w3specs will support colors in 12 bits instead of the current 8-bit format used for webcolors like sRGB (#FFFFFF or rgba(255,0,0,100). I wonder if there will ever be a new standard called 12-Bit sRGB where colors can be defin ...

csscolorsphotocolor-depthsrgb

What is the best way to ensure my content is properly placed across all of my pages?

I could use some assistance, please. I am currently working on my website's structure, but I'm encountering some issues... I have created a file named "page-container.php" and its content is: <!DOCTYPE html> <html> <head> ...

phphtml

Why is my HTML5 class unable to locate the contents of my observable array?

Any help would be greatly appreciated. I've been coding for over fifty years, but I'm relatively new to JavaScript, HTML, and knockout. This project seems promising if I can just get it to function correctly. What follows is one of the many appro ...

htmlajaxknockout.js

Responsive design of HTML forms

I'm curious about the technology or concept behind Google's animations on their forms. I'm interested in incorporating it into my personal project. The use of radio buttons, checkboxes, and placeholders is particularly appealing. Is there ...

jqueryhtmlformsresponsive-design