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?
Related
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>
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.
TB3 here. Here is the respective jsFiddle. I am trying to build a little minitron (mini jumbotron) that has the following layout:
As you can see, there is a main <div> given the minitron class. Each 'minitron' has:
An icon (Glyphicon)
A name
A description
A 'Learn More' button
Unfortunately my CSS-fu is pretty weak, and as you can see in that fiddle, I'm just not achieving the desired layout.
Here's my attempt at some CSS rules:
.minitron-icon {
width:20%;
height: 20%;
margin: 5px;
}
.minitron-name {
font-size: 18px;
}
.minitron-desc {
width: 80%;
margin: 5px;
}
.minitron-learnmore {
width: 95%;
}
Can anyone spot where I'm going awry?
What about this one? https://jsfiddle.net/oh69hq71/17/
Taking advantage of BS grid system using rows and columns. The first row containing the glyphicon and name/description, the other one with the learn more full width.
<div class="well minitron">
<div class="row">
<div class="col-xs-2">
<span class="glyphicon glyphicon-piggy-bank minitron-icon"></span>
</div>
<div class="col-xs-10">
<div class="row">
<span class="minitron-name">Some Name</span>
</div>
<div class="row">
<span class="minitron-desc">A short meaningful description goes here.</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="minitron-learnmore btn btn-success" type="button">LEARN MORE ABOUT JUPITER!</button>
</div>
</div>
</div>
*Update:
Increasing glyphicon size: In the glyphicon span set its style as "font-size:1.5em;"
To align it closer to name and description, add the style="text-align:right" at the glyphicon div container
The description is aligned to the named without the original css styles.
To increase padding (or margin) between the learn more button and description/icon, increase the learn more div top margin
New fiddle: https://jsfiddle.net/oh69hq71/18/
I am building an app that uses Bootstrap. I want this app to have a footer. The footer needs to "stick" to the bottom. In other words, if the content is larger than the height of the screen, the footer should still be visible, the content goes under it. If the content takes less than the height of the screen, I still need the footer to stick tothe bottom. I tried using the sticky footer. However, that doesn't work. Currently, I am trying the following:
Here's My Plunker
My HTML looks like this:
<div class="footer">
<div class="container text-center">
<button class="btn btn-warning"><span class="glyphicon glyphicon-filter"></span></button>
<button class="btn btn-warning"><span class="glyphicon glyphicon-th"></span></button>
</div>
</div>
How do I build a footer that permanently sticks to the bottom? I'm basically trying to build an "action bar" that is visible only when the site runs on a phone.
Thank you for your help.
use the following code
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed;
width: 100%;
}
you should change the footer position :
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed; /*change it*/
width: 100%;
}
Bootstrap comes with its nav elements ready to roll as a footer.
Simply create your element and add these classed navbar navbar-default navbar-fixed-bottom.
<footer>
<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
<div class="container">
<p>this is your footer that sticks to the bottom</p>
</div>
</div>
</footer>
You can then expand on this by splitting the containing div into blocks with something like
<div class="row">
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
the above would go inside the container div
as shown here http://jsfiddle.net/showcaseimagery/5y14pqgv/
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;
}