Hello I am using bootstrap to make my entire website but the only problem I have seen is that my modal does not scale and pushes towards the center which is not displayed on a mobile device.
<div class="modal hide fade" id="player_box" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="player_box_header"></h3>
</div>
<div class="modal-body" id="player_box_content">
</div>
<div class="modal-footer">
<div class="pull-left" id="social_share_box"></div>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
I am using default bootstrap CSS so I am not sure why it is not being responsive
try using the #media css3 types to refine based on the device resolution
for example
#media (max-width: 480px) and (max-height: 200px){.modal{ height: 150px}}
Related
This question already has answers here:
Change the background color in a twitter bootstrap modal?
(12 answers)
Closed 2 years ago.
Hello I'm using bootstrap 3 for my modal
I want to change the background color of my modal
Here's the html code
<div class="modal fade modal-white" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Enter code to access form</h5>
{{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button> --}}
</div>
<div class="modal-body">
<div class="alert alert-danger" id="alertThis" role="alert" style="display:none;">
Invalid code please try again ..
</div>
<input name="clients" class="clients form-control" type="password" id="inputCode" placeholder="Code">
</div>
<div class="modal-footer" style="border:none!important;">
<button type="button" onClick="proceedCode();" id="proceedCode" class="btn btn-primary">Enter</button>
<a class="btn btn-secondary" href="{{url('/')}}">Cancel</a>
</div>
</div>
</div>
</div>
and sample output
I want to make the background color to all black and only the modal can be seen only. Is there class that I need to add, trying to tweak it using modal-backdrop and modal-white class but its not working.
Try this in your css file
.className {
background-color: black !important;
}
Try this, hope it's helpful.
#exampleModal {
background-color: black;
}
The following code doesn't show the modal on button click, on mobile devices, when the button have an inline style float rule:
<button class="aa-secondary-btn" style="float: left; width: 140px;" title="Add a new product." data-toggle="modal" data-target="#modal">Add New</button>
<!--add product modal-->
<div class="modal fade" tabindex="-1" id="modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<!--/add product modal-->
It's only when I remove the float rule that the modal shows. What should I do to have the button float and have the modal show on mobile devices?
By using Meshu's suggestion I solved my problem and now the modal shows. Actually, the button is clickable. Below is the solution code:
<button class="aa-secondary-btn" style="position: relative; z-index: 20;width: 140px; float: right;" title="Add a new product." data-toggle="modal" data-target="#add_prod_mod">Add New</button>
<!--add product modal-->
<div class="modal fade" tabindex="-1" id="add_prod_mod" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).on('load',function(){
$('#loginerrormodal').modal('show');
});
</script>
<div class="modal fade" tabindex="-1" role="dialog" id="loginerrormodal">
<div class="modal-dialog" role="document">
<div class="modal-content bg-white">
<div class="modal-header">
<h5 class="modal-title">...</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
When I run the modal on mobile, the black background isn't responsive:
(the modal opes at page load so I don't have buttons to launch it)
How I can fix?
As it's possible to see in the live version you provided, there is an element exceeding the total width of the device, which is disturbing the modal.
Find the <div> with classes "card", "bg-white" and "mx-auto" and remove the inline style of width: 30rem for mobile devices breakpoint (480px).
If that's not possible, you can create a media query using !important to override the inline style, like this:
#media (max-width: 480px) { // the breakpoint that the problem is ocurring
.card.bg-white.mx-auto {
width: 100% !important; // it should work instead of 30rem
}
}
I fix with this:
.modal-backdrop {
height: 100%;
width: 100%;
}
I have an iframe inside a bootstrap modal body:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<iframe style="height:500px;"> </iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When I try to scroll down the iframe here, nothing happens in IOS. (iphone and ipad) Conversely, it perfectly works in Android.
What adjustments should I make to fix this in IOS?
Try using -webkit-overflow-scrolling: touch; on modal-body for iOS. It seems to be a common issue.
Source
EDIT OP states that this helped them find their solution.
I all,
I am using modals on my website and the scroll area containing them do not fit the page.
See on the screenshot.
I am not applying any additional style to the modals and I can't figure out where does the problem come from.
I am sorry it is hard to post code because I am not sure which part might cause this and the code base is relatively large..
EDIT: Sample modal
<div class="modal fade" id="addSpotModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" onclick='addSpot.cancel()'
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add a spot</h4>
</div>
<div class="modal-body">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick='addSpot.cancel()'>Close</button>
<button type="button" class="btn btn-primary" onclick='addSpot.sendAddSpotRequest()'>Save changes</button>
</div>
</div>
</div>
Any idea?
Thanks. Olivier
Firstly, the scroll is based on the modal itself, so as you can see, the rounded corners are not visible. The content inside the modal is pushing the size to be larger than the viewing area. You could try the size utilities like modal-lg on the dialog (<div class="modal-dialog modal-lg">) if you haven't done so. You can also change the dimensions through LESS/variables. The #modal-lg, #modal-md, and #modal-sm. To decrease the top margin, you would need to adjust the CSS for modal-dialog as 30px is the default.