Make modal popup just big enough, with scrollbar if needed - css

Due to reasons beyond my control, we're still using Bootstrap 2.3.2. I have a modal popup that might display anywhere from 1 to 50 lines of information. I made it the maximum size I could to fit on the screen and made the middle part, the .modal-body have a scrollbar if needed. My HTML looks like:
<div id="confirm-popup" class="modal hide fade" role="dialog"
aria-labelledby="confirm-popup-subject" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="confirm-popup-subject">XXX</h3>
</div>
<div class="modal-body" id="confirm-content">
</div>
<div class="modal-footer">
<button id="confirm-popup-edit" class="btn" data-dismiss="modal"
aria-hidden="true">Edit</button>
<button id="confirm-popup-cancel" class="btn" data-dismiss="modal"
aria-hidden="true">Cancel</button>
<button id="confirm-popup-submit" class="btn btn-primary"
aria-hidden="true" data-dismiss="modal">Create Ticket</button>
</div>
</div>
With JavaScript to fill in the $('#confirm-popup-subject') and $('#confirm-content') before popping it up.
I used the following CSS overrides to get this:
#confirm-poup {
top: 2%;
bottom: 2%;
overflow: initial;
}
#confirm-popup .modal-body {
overflow-y: auto;
max-height: 80%;
}
This makes the dialog take up most of the screen, and if it needs a scrollbar it has it. But now the customer is saying that they don't want it to be so big when it only has a few lines of text to display. They want it to be the minimum size it can be and still fit the body text in, but also to still have a scrollbar on the modal-body if the body text won't fit on the screen. Is this possible?

After some experimentation, I got acceptable results if I change the CSS to this:
#confirm-popup {
overflow: initial;
top: 2%;
}
#confirm-popup .modal-body {
overflow-y: auto;
max-height: 70vh;
}
It's not perfect - it overlaps the screen if I make the browser too short - but it works for all supported browser sizes.

Related

The body content of this modal spills outside of the modal box, how can I make it so the text stays within the modal

In my angular 7 application, we are using bootstrap 4 for our styling. When this modal opens, the text inside of it spills outside of the box, how can I modify the css so that the content is responsive and stays within the modal?
I am debugging someone else's code, so it is difficult for me to figure out exactly how they've set this up.
Here is the modal element that they are using, it is actually set up as an aside element:
<aside class="modal fade model-demographic" tabindex="-1" id="name-information" role="dialog" aria-labelledby="System Warning" aria-hidden="true">
<div class="demographic-name-dob modal-dialog modal-dialog-centered modal-lg blue" role="document">
<div class="modal-content modal-info-content">
<div class="modal-header model-info-header">
<h5 class="modal-title"><b>Name</b></h5>
</div>
<div class="modal-body d-flex justify-content">
<div class="row">
<h4 class="col-12">To make any changes to your first name, middle initial or last name, please contact us.</h4>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-modal" aria-label="cancel">Close</button>
</div>
</div>
</div>
</aside>
From some debugging, I believe this is the css class they are using that is causing the problem:
.modal-info-content {
width: 55%;
height: 35%;
margin: 0px auto;
position: fixed;
top: 50px;
right: 50px;
bottom: 50px;
left: 50px;
}
I'm assuming it has to do with position: fixed but am not sure how to change this so that it is responsive in mobile view.
I would start by removing the unnecessary code. This should eliminate the unexpected behavior.
.d-flex and .justify-content are unnecessary at this point. If they're required, I would recommend applying them to a child element of the .modal-body, below your h4 header.
Also, inside the .modal-body you can remove the div.row around the h4 and and remove the .col-12 class. These are both unnecessary because h4 tag already spans the entire row.
Your .modal-body node would then look like:
<div class="modal-body">
<h4>
To make any changes to your first name, middle initial or last name, please contact us.
</h4>
<div class="d-flex justify-content">
...
</div>
</div>

how to make popup a modal near the clicked button?

I'm using angularJS with bootstrap, and I'm creating a modal that will show some infos when you click on a button.
As there will be multiple button around the page, I want that this modal pops up near the clicked button, like the modal top-left corner being on top of the button I clicked.
Is this possible? I tried multiple things and the modal always pops up in the middle of the screen.
Current code I'm trying is:
.modal.in {
position: absolute;
bottom: 0;
right: 0;
left: auto;
top: auto;
bottom: 0;
overflow: auto;
}
.testbox {
background: #fff;
color: #000;
padding: 10px;
min-height: 200px;
min-width: 300px;
position: absolute;
}
and here the htm page that has the modal content:
<div class="testbox">
<div class="modal">
<div class="modal-header">
<h3 class="modal-title" ng-bind-html="title"></h3>
</div>
<div class="modal-body">
<span ng-bind-html="fullText"></span>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="close()"><i class="fa fa-close"></i></button>
</div>
</div>
</div>
</div>
I tried many things in the css but no one seems to be working, I could get something with position: fixed but of course only for one button.
Any ideas?
you might consider using bootstrap popover to do this.
here is an example
<button type="button" class="btn btn-danger popover-dismiss" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>

Bootstrap Modal Limit Image Size in Bootstrap Column

I have been messing with this for awhile, and am completely flummoxed trying to set the CSS correctly for a Bootstrap Modal.
Issue: I want to display an image in the body of a modal, but have text on the right. To do this, I decided to try using Bootstrap Columns. My modal dialog looks like the following:
<div id="imageModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="descModalLabel"></h3>
</div> <!-- / modal-header -->
<div class="modal-body">
<div class="row">
<div class="col-md-7 modal-image">
<!-- an image will be passed here -->
</div>
<div class="col-md-5 modal-text">
<!-- and text will be shown here -->
</div>
</div>
</div><!-- / modal-body -->
<div class="modal-footer" -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- /modal-dialog -->
</div> <!--/ modal -->
I have the Javascript loading the dialog correctly, my issue is in setting the correct css attributes to keep the image inside the image column, and no taller than the modal form. I've been trying a variety of things and not managing to find the correct combination.
The goal is a flexible modal that uses up to say 95% of the screen's height/width, keep the image inside the column (no taller, no wider), and the text has an overflow set so if there is too much text I get a vertical scrollbar (that works).
UPDATED: Modified the CSS, added classes to the image tag and a span around the text being posted which are defined in the css code below:
#imageModal .modal-dialog
{
overflow-y: initial !important;
display: inline-block;
text-align: left;
vertical-align: middle;
}
#imageModal .modal-body
{
max-height: 800px;
max-width: 1200px;
}
/* Image tag */
.modal_img
{
max-height: 750px;
max-width: 100%;
}
/* text span tag */
.modal_txt
{
max-height: 750px;
overflow-y: auto;
}
UPDATED:
This is close to what I was looking for, the text now has a scrollbar that doesn't move the image, the image seems to fit in the dialog, but it would be nice to account for different size screens with this. Anyone have experience with that?

How to align vertically a middle alert dismiss button?

How to align vertically middle bootstrap alert dismiss button?
<div class="alert alert-dismissible alert-info" role="alert">
<div class="alert-message">
Multi<br>
Line<br>
Alert
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
Fiddle: https://jsfiddle.net/b5asr9xj/4/
div alert-message is there just because I'm using jQuery.html to update content in it...
You could wrap your text in <p></p> tags and then set text-align: center; on them.
Updated fiddle
Does this solve your problem?
If you want to align it. Vertically in the middle you can do something like this with your current html.
.alert-message {
text-align: center;
button{
display: inline-block;
}
within your alert-message class you align the text to the center and you can then make it display inline(vertical).
see Updated fiddle
You can do like this for vertically middle.
Add parent div to position: relative;
See demo link here. https://jsfiddle.net/rhwxm3md/1/
<div class="alert alert-dismissible alert-info" role="alert">
<div class="alert-message">
Multi<br>
Line<br>
Alert
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
CSS CODE:
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}

Issue on Setting Bootstrap 3 Modal Percentage Height

Can you please take a look at this Demo and let me know why I am not able to set the Height Percentage of the Bootsrtap Modal
html, body{height: 100%;}
#myModal .modal-dialog {
position: relative;
width: 80%;
height: 50%;
left: 1%;
}
and the modal
Launch demo modal
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Thanks
You are successfully setting the height of the modal-dialog. However, that is not the part of the modal that you see. The part you see is the modal-content inside of the modal-dialog. The modal-dialog height defaults to the size of its content. You need to set the height of the modal-content to be 100% of the modal-dialog in addition to setting the percentage on the modal-dialog.
Demo here
#myModal .modal-dialog .modal-content {
height: 100%;
}
***Note - This makes your modal look strange, because it will now be bigger than its content and you may have to change the height of the modal-header, modal-body and modal-footer to fit nicely.
Try to set the height in px instead of percentage. If this works, then reason why you can't set it as a percentage would be because a parent div does not have a defined height, so it can't get 50% of undefined.
#myModal .modal-dialog {
position: relative;
width: 80%;
height: 150px;
left: 1%;
}
The alternative option would be to define the height of parent divs so it can use the percentage.
Hope this helps.
if you want the height of your modal to be 500px, then that's the code for that. you can adjust it the way you want. all what I am doing there is overriding whatever the default value is .modal-content. you can think of it as changing the value of bootstrap.css file.
.modal-content {
/*then enter the height value you want here*/
height:500px;
}

Resources