Is there a way to eliminate the additional space on the right side of this bootstrap 4 modal?

Take a look at this fiddle: https://jsfiddle.net/apo5u0mt/

Below is the code snippet:

HTML

<div class="modal" id="galleryModal">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
    <div class="modal-content">
      <div class="gallery">
        <div class="gallery-item">
          <img src="https://preview.ibb.co/kPE1D6/clouds.jpg">
        </div>
        <div class="gallery-item">
          <img src="https://preview.ibb.co/mwsA6R/img7.jpg">
        </div>
        <div class="gallery-item">
          <img src="https://preview.ibb.co/kZGsLm/img8.jpg">
        </div>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#galleryModal">
Modal
</button>

CSS

.gallery {
  overflow-y: auto !important;
}

.gallery-item {
  margin: 5px;
  float: left;
}

.gallery-item img {
  height: 150px;
  width: 200px;
  object-fit: cover;
}

.btn {
  margin: 5px;
}

Is there any way to remove the extra space on the right side of the modal? The goal is for the modal to adjust to fit the images it contains. Struggling with this issue and seeking assistance.

htmlcssbootstrap-4bootstrap-modal

Answer №1

Bootstrap is making the following adjustments:

.modal-dialog {
  max-width: 500px;
}
  • The .modal-dialog element is set to a maximum width of 500px by Bootstrap's styling, even though it would normally default to 100% width as a block element.
  • If your images are explicitly sized at 200px each, without considering margins, the total width only amounts to 400px.


Here are two potential solutions:

1. Override Bootstrap's modal styling to restrict the width:

/*
  The value below is based on testing,
  accounting for margins and floating. Initially, expected to be
  420px = (200px width + 5px left margin + 5px right margin) * 2
  but testing in jsfiddle showed that 422px was necessary to prevent wrapping
*/

.modal-dialog {
  max-width: 422px;
}

https://jsfiddle.net/nftj9s7y/1/

If maintaining exact image widths of 200px is crucial, then this fix should suffice. However, relying solely on fixed dimensions may lead to issues if you modify the image sizes or view them on smaller screens.


A more adaptable approach is:

2. Utilize flexbox to allow images to fill the modal space

.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

/* with parent element as display: flex, floats are no longer needed */
.gallery-item {
  padding: 5px;
  width: 50%;
}

.gallery-item img {
  height: 150px;
  object-fit: cover;
  width: 100%; /* enables image to fill container width */
}

https://jsfiddle.net/vzs98n6b/2/


Lastly,.gallery { overflow-y: auto } will not take effect unless a specific height or max-height is specified for that element.

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

Error in identifying child element using class name

I need help accessing the element with the class "hs-input" within this structure: <div class = "hbspt-form".......> <form ....class="hs-form stacked"> <div class = "hs_firstname field hs-form-field"...> <div class = ...

javascripthtmlcss

Preventing the dropdown options from appearing in Angular when clearing the input field

In a reusable component, I implemented some simple logic to clear the value of a select input when the 'x' button is clicked. select.component.ts @Input() selectFormControlName: string; @Input() selectAbstractControl: AbstractControl; ... ...

cssangularinputdrop-down-menu

Creating a volume shadow effect with CSS is a great way to add

Can anyone help me achieve a shadow effect like the one shown in this image example? I've attempted to use the after pseudo element, radius, and clip, but haven't been able to get the desired result. https://i.sstatic.net/pqUtb.png .page{ w ...

cssbox-shadow

Aligning a collapsible feature while ensuring that the content descends

My dilemma involves a centered menu with a dropdown feature. The issue arises from the absolute positioning, causing the entire menu to shift upward when the dropdown is activated due to the increased height. I am struggling to find an effective solution ...

css

Guide to building a container/palette for buttons in Angular 8

I am looking to design a unique container or palette to house some of the buttons on my webpage, allowing me to customize their background color and add other effects. Here is an example of what I am envisioning, with 3 buttons (Question, Action, Output) ...

htmlangularangular-materialcontainerspalette

The PHP action form seems to be malfunctioning as the root of the form displays a 404 error, despite the file being present

Previously, the .PHP files (with the form and the action) were located in the same folder and everything worked flawlessly. However, due to security reasons, I now need to have the 'action' file outside the folder with a different path. I believ ...

phphtmlmysqlformsaction

Tips for converting all elements (divs) on a website from pixels to percentages

Recently, I received this website project from a friend for development. I haven't worked with CSS for a while, and I'm facing a few challenges. My main goal is to ensure that the website adjusts seamlessly to different browser sizes. The issue ...

htmlcsspixel

Utilizing a variable in a for loop with Django

I am a beginner in the world of Python and Django framework and I am encountering a small hurdle when trying to assign a variable to my for loop. Within my html file, there are buttons and a list (generated through a loop). For example: Buttons <li&g ...

javascriptpythonhtmldjango

How to locate and extract specific data from a webpage table using JavaScript and Node.js for web scraping and storing in an array of objects

Exploring the realm of web scraping by targeting a UFC betting site for data extraction. JavaScript, alongside request-promise and cheerio packages, is utilized in this endeavor. Site: The primary aim is to retrieve the fighters' names along with th ...

javascripthtmlnode.jsdomweb-scraping

Send a MySQL query and an HTTP request to an SMS gateway through JavaScript

I have a scenario where data is being received by my confirm.php file. In this file, I have the following code and currently facing an issue with the javascript part. Any help and suggestions would be greatly appreciated. The objective of my javascript is ...

javascriptphpjqueryhtmlmysql

Convert Jupyter notebook to an executable html file

Looking for a way to export a Jupyter notebook in HTML to get an executable version? Currently, I upload the notebook to a git repository and use binder to obtain its executable form. However, I want to directly upload the notebook to my website without ha ...

htmljupyter-notebookjupyterandroid-binder

What is the solution for incorporating multiple elements in knockout's applyBindingsToNode function?

I am currently using knockout applyBindingsToNode to dynamically add and remove elements in order to update my html. I need to cut the binding, which is why I am utilizing applyBindingsToNode. In an example I have provided, if you click on the button "Reb ...

javascriptjqueryhtmlknockout.js

What is the best way to maintain an input String when refreshing a page using Selenium Webdriver?

When using Selenium webdriver, I am facing an issue where the value in an input element is not retained after refreshing the page. Interestingly, when testing manually, the scenario works as expected. Is there a way to ensure that the input string remain ...

javahtmlseleniumselenium-webdriver

Clicking on the Primary Division

Experimenting with the onclick event on a parent div led me to realize that making the entire div clickable at 100% width is not what I intended. I only wanted the sub div to trigger a specific function. Here's an example: <div id="loginContain ...

javascriptjqueryhtmlcss

Easy peasy PHP AJAX HTML glitch

Struggling with a simple task that most would find easy, as a beginner in PHP and jQuery+Ajax: how can I update my index.html with different HTML code, requested through an Ajax call from a PHP file? index.html <!DOCTYPE html> <html> <head ...

phpjqueryhtmlajax

issue with retrieving HTML data from PHP and converting it to JSON

I've tried multiple search queries but nothing seems to be working. Can someone please assist me? ----------jQuery Function ---------------------------- function showRequestFunctionToBox(thisId){ var encodedItemId = thisId; ...

phpjqueryhtmljson

What is the process for disabling the CSS module feature in Next.js?

In Next.js, Global CSS can only be imported in _App.js. However, importing global CSS in every component is not allowed, so we have to use CSS modules to comply with this restriction imposed by Next.js. Currently, I am in the process of migrating a large ...

javascriptcssreactjsnext.jsserver-side-rendering

Continue duplicating image to stretch header across entire screen

Looking to create a seamless connection between a Header image (2300x328px) and another image (456x328px) so that the header fills the entire width available without overlapping due to a pattern. I need the second image to extend the header to th ...

htmlcssheaderrepeat

Wordpress form entry process

I've been tasked with redesigning a website for a client using Wordpress. The form submission was working flawlessly on the old static site, but it's now encountering issues in Wordpress. Within the php file in my theme's backend, I have th ...

formspostbootstrap-4

The size of the search input and textarea in HTML decreases when viewed on an iPad device

Currently utilizing Bootstrap 3 and AngularJs for this project. Implementing the following markup for the input field with type 'search': <input type="search" class="form-control" id='roomSearch' placeholder="Search" ng-model=&apo ...

htmlcssangularjstwitter-bootstrap