The Modal content in HTML and CSS is innovatively designed and stands out from the rest

.modal-body {
    height:100%;
    overflow-y: scroll;
}

<div id="modal" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:80%;height:100%">

    <!-- Modal content-->
    <div class="modal-content" style="width:80%;height:100%">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">ABC </h4>
      </div>
      <div class="modal-body" id="abcmodal" style="display:inline-block"style="height:auto;">
      </div>
      <div class="modal-footer" style="display:none;">
      </div>
    </div>

  </div>
</div>

Everything is functioning correctly, but when the content is too lengthy, it becomes misaligned.

Screenshot :

Do you have any suggestions on what I should modify to address this issue?

htmlcssbootstrap-4

Answer №1

After thorough testing of your code, I can confirm that it is functioning perfectly. I inserted a lengthy paragraph in the modal-body, and the content displayed correctly with scrolling enabled. To see the final outcome, please execute the code snippet provided below.

.modal-body {
  height: 100%;
  overflow-y: scroll;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="39495649495c4b17534a790817080f1709">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch demo modal
</button>

<div id="modal" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:80%;height:100%">

    <!-- Modal content-->
    <div class="modal-content" style="width:80%;height:100%">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">ABC </h4>
      </div>
      <div class="modal-body" id="abcmodal" style="display:inline-block" style="height:auto;">
        <p>Pellentesque habitant morbi tristique senectus ...

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

The grid is out of alignment, causing elements to jump to the next row

After taking an online course at TreeHouse, I used the provided HTML & CSS code and made some adjustments to create a layout with 10 columns instead of the original 12 within a 1000px container. The columns were converted to percentages to fit my needs. I ...

htmlcssgridfluid

Reactjs: When components are reused, conflicts may arise in UI changes

I'm currently working on creating a sample chat room application using reactjs and redux for educational purposes. In this scenario, there will be 3 users and the Message_01 component will be reused 3 times. Below is the code snippet: const Main = Re ...

javascripthtmlcssreactjsredux

Once more baffled by the nested boxes, this iteration adorned in vibrant hues and trimmed with a striking border

In a previous inquiry, I sought advice on centering one box within another. However, my attempts this time around have led to some peculiar results. I experimented with two different code variations- one involving a background color and the other utilizing ...

htmlcss

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

jqueryhtmlcss

What is the best way to add prefixes to my SCSS style sheets?

After attempting to add prefixes to my scss files, I came across the autoprefixer tool. However, I discovered that it only supports CSS files. Is there a way to utilize autoprefixer with scss files? Here are the commands for Autoprefixer: npm install post ...

javascripthtmlcssangularsass

What is the best location to integrate jQuery UI Bootstrap in a Rails project

In order to use Bootstrap and jQuery UI together in my application, I decided to integrate jQuery UI Bootstrap. Unfortunately, many of the gems that handle asset pipeline integration seem outdated, so I opted to manually download the CSS files and insert t ...

jquerycssruby-on-railstwitter-bootstrapjquery-ui

CSS - starting fresh with animations

I am facing an issue with a CSS animation that I created. Everything seems to be working correctly, but I need to complete it by setting the input type to reset the animation. Below is the CSS code snippet that should reset the animation: $('button& ...

javascriptjquerycssanimationreset

Notify when the button value changes to "submit"

I recently added a jQuery form wizard to my website. I want users to receive an alert in JavaScript when they reach the end of the form. To achieve this, I inserted a simple JavaScript code at the beginning of my page within <head>..some code</hea ...

javascriptjqueryhtml

Retrieve data from the database and automatically populate all text fields when the dropdown value is modified

I need assistance with populating all textbox values based on the dropdown selection. The dropdown values are fetched using an SQL query. Here is the HTML Code: <select name="name" ID="name" class="form-control"> <opt ...

javascriptphphtmlsql

New messages are revealed as the chat box scrolls down

Whenever a user opens the chatbox or types a message, I want the scroll bar to automatically move down to show the most recent messages. I came across a solution that seems like it will do the trick: The issue is that despite implementing the provided cod ...

javascripthtmlcss

In Safari, there seems to be an issue where multiple URLs are not opening when clicked on from an anchor

Is there a way to open multiple URLs in Safari with just one click using window.open? I tried it, but only one URL opens in a new tab while the others do not. The version of Safari I am using is 11.0.1. onclick="window.open('URL1','_blank& ...

javascriptjqueryhtmlsafari

Tips for expanding the width of an image when employing position:relative

Below is the code snippet: <table border="1" cellpadding="2" cellspacing="2" height="250"> <tbody> <tr> <td> <div style="background: url('path to image'); width: 300px; height: 250px; position: ...

htmlcssimage

Is there any advantage to placing buttons within an HTML form?

What benefits are there to placing a button within an HTML form as opposed to directly in the body? <form id="viewForm" method="post"> <input id="editBtn" type="button" value="Edit" /> </form> ...

html

The checkbox is not updating as anticipated

I'm currently developing a basic widget that allows the user to change the value of either the check box OR the entire div by selecting them. Below is the code I have implemented: $(document).ready(function() { $(document).on("click", ".inputChec ...

javascriptjqueryhtml

"Utilizing Bootstrap to add borders to div elements is a

https://i.sstatic.net/yPt46.png Hey there! I am working on a project using bootstrap 4. I encountered an issue that I can't seem to solve. I placed an image inside a div, set the div's height and width to 200px with overflow hidden. The image w ...

htmlcssbootstrap-4

Adjust grading system based on user interaction with JavaScript

I am currently working on a grading system for a website and I am attempting to modify the interpretation of grades when a column is clicked. Specifically, I am looking to convert Average (%) to Letters to 4.0 Grade Average. To achieve this, I am using Jqu ...

javascripthtml

Incorporating a search bar into a container in WordPress

I was trying to include a search form inside a div using the code below: printf( '<div class="entry"><p>%s</p>%s</div>', apply_filters( 'genesis_noposts_text', __( 'Try again below.', 'genesis&apo ...

phphtmlwordpressgenesissearch-form

What is the reasoning behind the repetitive use of @media (max-width: 767px) in the Twitter Bootstrap

Why is the media query @media (max-width: 767px) repeated in the bootstrap-responsive.css file? To find out, you can view the file by visiting ...

csstwitter-bootstrap

transferring data from HTML to JavaScript functions

I am facing an issue with my ng-repeat in the view where I want to pass the object from the ng-repeat to a javascript function. However, when I attempt to display it on the console, it shows up as undefined. Below is the HTML code snippet: <!-- Panel ...

htmlangularjs

Adjusting the size of the entire webpage using Bootstrap 5

My webpage is built using Bootstrap 5 and overall, I am pleased with how it looks. However, I'm finding that all the body elements are too large. View Elements too large The elements at the bottom of the page are getting cut off and I want the entir ...

htmlcssasp.net-mvcbootstrap-5