I am using vue.js with Bootstrap.
There is modal dive which shows like below I am finding a class that increase the width of modal div,
My modal div looks like this. I am planning to add 12 more tabs and for that I will need more width.
I am using modal-lg class to set the width.
I am using below code for modal div
<div class="modal fade" id="modal_create_product" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Create Product
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Form Errors -->
<div class="alert alert-danger" v-if="createForm.errors.length > 0">
<p class="mb-0"><strong>Whoops!</strong> Something went wrong!</p>
<br>
<ul>
<li v-for="error in createForm.errors">
{{ error }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I just do
.modal-lg {
max-width: 70%;
}
Why don't you use the min-width CSS for your modal-content?
Like this:
.modal-dialog.modal-lg {
min-width: 80%
}
Related
I'm creating a modal window using bootstrap to show some text with an image. Problem is the image spills out of the modal. I've tried adding responsive class to the image but it did not worked.
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalBasic">
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Upgrade to Basic</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
<img src="./img/upi.jpg" class="img-responsive"/>
</div>
</div>
</div>
</div>
I've tried removing modal-sm class, but it failed on small screen.
Set the image's width property to 100% or add CSS property
.img-responsive { width: 100%; }
What you want to achieve is image should resize according to the width of the modal. Therefore image's width should adhere to the modal's width.
Working example: https://codesandbox.io/s/sharp-villani-1lsjw5?file=/index.html:2228-2298&resolutionWidth=456&resolutionHeight=675
I'm using the Bootstrap 4 Close icon inside an Alert.
<div class="alert alert-info p-2">
<a class="close" data-dismiss="alert" href="#">×</a>The CVC card code is required.
</div>
https://www.codeply.com/go/4ImkAPOKug
The problem is that the close icon is not vertically centered within the anchor element. I would like to move it up a few pixels. When inspecting the .close CSS, I see that line-height:1 controls the height of the anchor, so adjusting line-height shrinks the height of the anchor, but I prefer to keep it as is for consistency.
Other than changing the line-height, is there a way to vertically position the icon within the line-box of the anchor? I've tried display:inline-block, vertical-align:middle, bottom margin, etc... but nothing seems to work. I don't want to vertical center within the alert.
Not the best way, but you can apply a margin-top of -0.15rem
.close {
margin-top:-0.15rem;
}
/* To illustrate */
.alert {
position:relative;
}
.alert:after {
content:"";
position:absolute;
top:26px;
left:0;
width:100%;
border-bottom:1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row py-3">
<div class="col-8">
<div class="alert alert-info p-2">
<a class="close" data-dismiss="alert" href="#">×</a>The CVC card code is required.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row py-3">
<div class="col-3">
<div class="alert alert-info p-2">
<a class="close" data-dismiss="alert" href="#">×</a>The CVC card code is required.
</div>
</div>
</div>
</div>
You can use baseline to align the items by their baseline in a combination:
.alert{
display: flex;
align-items: baseline;
}
.alert:after {
content:"";
position:absolute;
top:31px;
left:0;
width:100%;
border-bottom:1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row py-3">
<div class="col-6">
<div class="alert alert-info p-2">
<p>The CVC card code is required</p>
<a class="close" data-dismiss="alert" href="#">
×
</a>
</div>
</div>
<div class="col-6">
<div class="alert alert-info p-2">
<p>The × aligns toward the bottom of the anchor's line-box?</p>
<a class="close align-top d-table-cell align-top" data-dismiss="alert" href="#">
<span class="border border-danger">×</span>
</a>
</div>
</div>
</div>
</div>
I wasn't able to get the standard close to align to the top properly. A workaround is to use align-text-top small to shrink the font and height of the close element.
<div class="alert alert-info p-2">
<a class="close" data-dismiss="alert" href="#">
<span class="align-text-top small">×</span>
</a>
The CVC card code is required
</div>
https://codeply.com/go/gr21OObdyV
Use flexbox to align the close-button vertically:
<div class="alert alert-success fade show d-flex justify-content-center align-items-center">
<i class="fa-duotone fa-circle-exclamation fa-lg me-auto"></i>
<span class="me-auto px-3">This is a success alert ...</span>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
I added a bootstrap modal to use as terms and conditions on a website but it does not scroll. I assume it is something in my code.
I have tried setting overflow to scroll and auto, but it does not work
<div id="tallModal" class="modal modal-wide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Terms and conditions</h4>
</div>
<div class="modal-body">
<%= render 'terms', client: #client %>
</div>
<div class="modal-footer">
<button type="button" class="" data-dismiss="modal">Agree and close</button>
<button type="button" class="" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
CSS
.modal.modal-wide .modal-dialog {
width: 60%;
}
.modal-wide .modal-body {
overflow-y: scroll;
}
.modal-body {
max-height: 70vh
}
I am testing the app on Heroku if you want to inspect the code further.
https://safe-shore-24087.herokuapp.com/
Bootstrap's modal conflicts with your parallax.js, just disable it (try to use another library or rise a bug) and it should work as intended.
Using bootstrap 3.3.5 and trying to open a second modal, and found a strange behavior:
The backdrop do not show around the second modal, instead of it
covers the backdrop from the first modal
The second modal is
limited to the area of the first modal.
Check the example: http://jsfiddle.net/2zqe93u1/show/
Looking for a way to show the second modal with the backdrop around it and with no area limited by the first modal.
Code:
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
As said #Tim Lewis bootstrap doesn't support stacked modal and Showing more than one modal at a time requires custom code
First Remove 2nd modal HTML inside the First Modal and put it outside, so the HTML will be;
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
It will fix the problem second modal is limited to the area of the first modal.
Now to fix the problem backdrop do not show around the second modal, instead of it covers the backdrop from the first modal
add following code in JS
$(document).ready(function () {
$('#SecondModal').on('show.bs.modal', function () {
$('#FirstModal').css('z-index', 1039);
});
$('#SecondModal').on('hidden.bs.modal', function () {
$('#FirstModal').css('z-index', 1041);
});
});
Fiddle
You have to work with two modals separeted to achieve this goal.
The first point i can do it with this
https://jsfiddle.net/2zqe93u1/
$('#FirstModal').modal('show');
$('#SecondModal').on('shown.bs.modal', function (e) {
$('.modal-backdrop').first().appendTo($(this).parent())
})
$('#SecondModal').on('hidden.bs.modal', function (e) {
$('.modal-backdrop').first().remove()
})
$("button[data-number=2]").click(function(){
$('#SecondModal').modal('hide');
});
But i can't understand the second one, if the second modal can be dragged out of the first, why the backdrop must be on the first?
But with the events ocurring on modal i'm sure you can do this.
Take a look at jsfiddle to catch the ideas
I have a modal window which open up when the user focuses on search input box. but currently when the modal opens, the modal background overlay blocks it.
How can i move the modal overlay background lower or something, so the user can still type on the search input box while the modal window stays opens .
<form>
<input type="email" class="form-control border-left-none" id="openmodalOnfocus" placeholder="enter text">
</form>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<div class="row">
<div class=" col-md-4">
lorem i[p sum on left
</div>
<div class=" col-md-4">
lorem ipsom on right
</div>
</div>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Just add this to your css:
.modal-backdrop {
z-index: -1;
opacity: 0 !important;
width: 0px;
height: 0px;
}
You can edit your CSS so the modal backdrop will never show:
.modal-backdrop {
display: none;
}
Check the docs for jQuery activation of Bootstrap modals here.
You can show a modal without the backdrop by simply adding the data-backdrop attribute to the modal div and setting it to false:
<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>