I have a modal with two columns in it. One of the column contains a table. However, the table does not fit into the column and need to scroll horizontally, but I need to make the table fit into the column. Also, I have problem with the scrolling issues. Table should be can scroll if the items is more than the size of the modal.
Here, the link of example:- https://jsfiddle.net/35wzenqf/2/
Please change the view to tabs(row) easier for you to see the columns in modal :)
<div class="btn-group d-flex">
<button class="btn btn-lg btn-icon btn-primary w-100" data-toggle="modal" data-target="#modal-default">
<span class="btn-inner--icon"><i class="far fa-money-bill-alt"></i></span>
<span class="btn-inner--text">Pay</span>
</button>
</div>
Thank you for anyone helping!
Thanks Ferikeem and Hamid for helping!
These are the answers for my questions:-
Change modal-lg to modal-xl, in my code it doesn't works I don't know why so I added style="max-width: 1140px" for my modal-dialog class. It's the same size as modal-xl in bootstrap.
For the scrolling, I need to set the height.
.horizontal-scroll
{
overflow-y: auto;
height: 70vh;
}
Increase the size of the medal
enter link description here
<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
...
</div>
</div>
</div>
Related
Assuming a 2 columns Bootstrap layout with a Modal placed into the col-sm-9 column, is it possible to have the modal to have the width of the col-sm-9 column and not to cover the entire screen?
Basicall what I would like to achieve is to have column col-sm-3 always visible
<div class="col-sm-3">
<h1>Headline</h1>
</div>
<div class="col-sm-9">
<p>Something</p>
<button class="btn modal-trigger">Trigger Modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="modal-car" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Continue to play</button>
</div>
</div>
</div>
</div>
</div>
EDIT: I tried what #MilanDemoniack suggestted but it did not worked. My container is boxed so it's not container-fluid but the modal extends till the end
I'm not sure if what you want to do is to have a layout where your "col-sm-3" would be on the left side of the screen and the "col-sm-9" on the right side of the screen, but if it is, here's what I propose :
1) What you want is to have the modal to be as "large" as the "col-sm-9".
The "col-sm-9" is a parent of the modal. So you'll need to keep the "width: 100%" on the modal. What you must delete from bootstrap class is the "left: 0" which will extend the modal from the left corner and "override" the size of the modal + pass over the left block "col-sm-3".
(check the first picture)
2) On the "modal-dialog" class, you need to take out the "max-width : 500px" that sets the width of your modal box. Now, your modal box will be as large of the "col-sm-9".
(check the second picture)
Here's the HTML code :
(I had to change the data-bs-toggle="modal" data-bs-target="#exampleModal" of the button for the modal to open)
<div class="col-sm-3">
<h1>Headline</h1>
</div>
<div class="col-sm-9">
<p>Something</p>
<button class="btn modal-trigger" data-bs-toggle="modal" data-bs-target="#exampleModal">Trigger Modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="modal-car" class="modal-body">
Lorem ipsum dolor sit amet.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Continue to play</button>
</div>
</div>
</div>
</div>
</div>
Update :
If you want your modal to follow more media query rules, set them on both the parent and the modal (see picture below). That way, it will be container-fluid.
Do not forget to take out the "width :100%" from the modal
!Do not close it as duplicate, the answers in the "duplicate" only center it relative to the X button!
I'm trying to completely center the modal-title of a bootstrap4 modal.
However, it only centers it relative to the X and not to the whole width of the modal. The answers here: Bootstrap 4 Modal Center Content all have the same issue.
https://jsfiddle.net/couthzLt/
<!-- Modal -->
<div class="modal fade" 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 text-center d-block">
<h5 class="modal-title d-inline-block" id="exampleModalLabel">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">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The header is not completely centered as you can see on this image that:
modal header centered relative to X
My question is if it's possible to center it to the right edge of the modal - not the X.
By default close is positioned using float:right which keeps it as part of the document flow. Because of this modal-title is always going to center itself respective of the width available minus what close is using.
To fix the problem we need to pull close out of the flow. Easiest way to do that is:
.close {
position: absolute;
right: 1rem;
}
position: absolute pulls the class out of the normal flow which in turn lets modal-title take up the full width. The right margin is designed to replicate the margins defined for the Modal component to ensure that your layout remains more or less unchanged.
Put text-center d-block in modal-header
Put up button dismiss
Last modal title.
<div class="modal-header text-center d-block">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Title center</h2>
...
</div>
How about something like this:
#exampleModalLabel {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
On my side, I did the following:-
NOTE: The size of my modal was default, it was not large or small.
Then in Modal::begin I added titleOptions as below
Modal::begin([
'title' => 'yor title ...',
'titleOptions' => ['style' => ['margin-left' => '95px']],
...other options..
]);
I have a simple bootstrap popup modal. Right now when the popup appear, the close x button is at center and I want to align the close button x to the right corner of the popup window. How can I do this?
<div class="modal fade" id="checkNameSurvey-modal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container" id="checkNameSurveymodal-container">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 style="text-align:center"></h4><br>
<div>
<input type="text" class="form-control login-input" id="newSurveyName" onkeyup="if(event.keyCode==13)document.getElementById('checkName-button').click()">
<button type="button" class="btn btn-primary" id="checkName-button"></button>
</div>
</div>
</div>
</div>
Try using 'modal-header', 'modal-content' classes. Go through UI DIALOGS
here inspect element in the modal.
You can use float:right. That might shift the cross button to the right side.
Sharing a screenshot of the modal box would have been more helpful.
sorry, I found a mistake, the close x button is align at the center because I put it inside of my class "loginmodal-container" which I have a stylesheet of center. So I fix that problem. Thank you
I have searched the web for answers on this one with this question is closest to my own.
Bootstrap Modal popping up but has a "tinted" page and can't interact
I am creating an admin page with bootstrap and i am using modals in there.
The styling is done with Bootswatch themes.
When using some themes, opening a modal, the modal appears in a tinted page and everything freezes. I have to refresh the page to get rid of it again.
I have tried to move the modal to the bottom of the page, just before the closing
</body>
tag.
Nothing works!
Strange thing is, that with the "Basic" bootstrap css, it has the same problem.
There are some Bootswatch themes that work as they should, and some others give this problem.
I made and example in jsFiddle here: http://jsfiddle.net/qyo53dxh/
This one is with the "Paper" theme from bootswatch.
When using i.e. "United" theme, it does work normal.
What is going on?
In your fiddle you are importing bootstrap.css and bootstrap.min.css?
Please remove
bootstrap.css
And all is working nice.
<div class="modal fade forget-modal" tabindex="-1" role="dialog" aria-labelledby="myForgetModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Sluiten</span>
</button>
<h4 class="modal-title">Wachtwoord resetten</h4>
</div>
<div class="modal-body">
<p>Typ uw email adres</p>
<input type="email" name="recovery-email" id="recovery-email" class="form-control" autocomplete="off">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-custom">Herstellen</button>
</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
Here is working fiddle
http://jsfiddle.net/qyo53dxh/1/
Add This into style tag
.modal {
background: rgba(255, 255, 255, 0.8);
}
.modal-backdrop {
display: none;
}1200;
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.