I have a modal that I resize it.I want large width size of modal and horizontally centered.
In addition when I resize it to smaller it's correct.
<style>
#PopupModel {width:60%;}
.modal {
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/*/To center vertically*/
display: table-cell;
vertical-align: middle;
}
.modal-content {
/*Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it*/
width:inherit;
height:inherit;
/*To center horizontally*/
}
</style>
<div class="modal fade" id="PopupModel" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" >
<div class="modal-dialog" role="document" >
<div class="modal-content" >
<div class="modal-header">
<h4 class="modal-title" id="gridSystemModalLabel">Product Define</h4>
</div>
<div class="modal-body" id="modelResult">
<br />
</div>
</div><!-- /.modal-content -->
<div class="modal-footer">
<div class="">
<button type="submit" class="btn btn-primary" style="width: 100px; height: 38px;">save</button>
<button type="button" class="btn" data-dismiss="modal" style="width: 70px;height: 38px; ">cancel</button>
</div>
</div>
</div><!-- /.modal-dialog -->
</div>
I test some ways but not worked for me .any help ?
your current code in jsfiddle would help out a lot but can you try:
.modal {
width: 600px; //size of modal
margin: 0 auto;
}
option 2:
if you've no issues using flexbox, refer to the answer on this one Flexbox: center horizontally and vertically
This may be a tad late, but the simplest way of aligning the modal in the center of your screen is to use the vertical-align: middle; property inherent to inline elements.
Please remove all extra formatting you have added to the basic Bootstrap modal and add the following CSS:
.modal {
text-align: center;
}
.modal::before {
content: "";
display: inline-block;
height: 100%;
margin-right: -4px;
vertical-align: middle;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
Please keep in mind that I am using Bootstrap 3 and the above CSS may or may not work with a Bootstrap 4 modal.
Original solution: http://www.learnsourcecode.com/blogs/align-bootstrap-modal-center-of-screen-vertically
I had this issue with .modal-lg and .modal-xl in Bootstrap 4.2.1. I simply added:
.modal.modal-lg, .modal.modal-xl { max-width: unset !important; right: 0; }
For some reason this worked perfectly, though buyer beware, I haven't had a chance yet to test this extensively. If anyone sees or has a problem with this, I'd like to know.
I got exactly the same problem and just found the solution!
This is how I solved it.
#media (min-width: 576px) {
.modal-dialog {
max-width: 600px;
}
}
Hope it's helpful!
Simply use text-align: center
.modal-header, .modal-footer {
text-align: center;
}
<style>
#PopupModel {width:60%;}
.modal {
}
.modal-header, .modal-footer {
text-align: center;
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/*/To center vertically*/
display: table-cell;
vertical-align: middle;
}
.modal-content {
/*Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it*/
width:inherit;
height:inherit;
/*To center horizontally*/
}
</style>
<div class="modal fade" id="PopupModel" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" >
<div class="modal-dialog" role="document" >
<div class="modal-content" >
<div class="modal-header">
<h4 class="modal-title" id="gridSystemModalLabel">Product Define</h4>
</div>
<div class="modal-body" id="modelResult">
<br />
</div>
</div><!-- /.modal-content -->
<div class="modal-footer">
<div class="">
<button type="submit" class="btn btn-primary" style="width: 100px; height: 38px;">save</button>
<button type="button" class="btn" data-dismiss="modal" style="width: 70px;height: 38px; ">cancel</button>
</div>
</div>
</div><!-- /.modal-dialog -->
</div>
This works for me.
Adjust top and left values to make model at center as per your needs.
.modal {
position: fixed;
top: 15%;
left: -20%;
}
References: https://gist.github.com/emerico/9127830fe2496c44c116fe600f9097bf
Related
I can't seem to get the footer in my modal to be fixed at the bottom with the content scrolling underneath.
<div id="children-modal" class="modal" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
<div class="modal-content">
<h4 id="modal-title">What to do with your god damn kids</h4>
<p id="modal-text">A bunch of text</p>
</div>
<div class="modal-footer">
<a id="close-modal-button" class="right waves-effect waves-white btn-flat" (click)="closeModal()">Close</a>
</div>
</div>
.modal {
width: 95%;
padding: 0px;
}
.modal-content {
height: auto !important;
padding: 0px;
}
.modal-footer {
position: fixed;
}
The footer disappears. Any ideas?
I'm building off of sunil's answer. In addition to using bottom: 0, you need to set a height and remove the overflow on your .modal class. Next, set the height and overflow to auto on the content like so:
.modal {
position: fixed;
left:0;
right:0;
background-color: #fafafa;
max-height:70%;
height: 70%;
margin:auto
border-radius:2px;
will-change:top,opacity;
}
.modal-content[_ngcontent-c0]{
height:90%;
padding:0;
overflow: auto;
}
In short, you want it to scroll the content (and not the footer) so this is where you place the height and overflow (scrollbar).
You need to give bottom: 0; to your modal-footer class.
Please note: I have looked at several SO posts and various suggestions for floating 2 divs side by side, however none of them seemed to work for me.
A summary of suggestions are:
display: inline-block
float: left
others refer to overflow: hidden, overflow: auto with various implementations.
One had worked, required me to set the right div:
position: absolute;
right: 0px
This was undesireable since the button would attach itself the the right side, ignoring all parent container constraints.
Above is that what I want to achieve.
The left div has the blue background. The right div contains the button.
My code:
Html
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src=""images/icons/edit.png">
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
Css
Note:using a basis of bootstrap for most of my css needs
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
Help would be very much appreciated
Without any changes to css, purely using bootstrap:
Few key things: ensure you add columns (<div class="col-md-12">) after specifying <div class="row">
You can use the pull-left & pull-right classes to float the content:
<div class="row">
<div class="col-md-12"><!-- define columns in bootstrap -->
<div class="pull-left"><!-- use pull-left -->
<h1>
Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png">
</a>
</h1>
</div>
<div class="pull-right"><!-- use pull-right -->
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
</div>
Fiddle
This has better overall browser support than display:flex which is not supported in older versions of Internet Explorer.
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png"/>
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
Try to use display: flex!
You can search in Google, you can learn display: flex easily.
First, you need to create a container div for both your buttons, and then have them inside as 2 divs. Then you can write in your CSS:
.button_container {
display: flex;
justify-content: space-between;
align-items: center;
}
You don't need to write anything for the other 2 divs.
I was getting the data from an API and displaying it using HTML.
#dat {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
button {
margin-left: 20px;
display: inline;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data"></p>
<p id="temp"></p>
<p id="time"></p>
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
The problem is that both the buttons are one above another.I want to bring it on the same line.
Thanks.
You didn't allow enough width for both buttons to fit.
I changed the width to 200px;
#dat{
position:absolute;
width:200px;
height:100px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
button{
margin-left:20px;
display:inline;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data">
</p>
<p id="temp">
</p>
<p id="time">
</p>
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
The problem is the buttons are inside the #dat div which is set to be only 100px wide. If you want them to be centered on the same line, add a new div outside the #dat div with width: 100% and text-align: center.
#dat {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
button {
margin-left: 20px;
display: inline;
}
#buttondiv {
width: 100%;
text-align: center;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data">
</p>
<p id="temp">
</p>
<p id="time">
</p>
</div>
<div id="buttondiv">
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
Slightly different approach then above, using floatleft; and auto width.
Created CSS classes as re-useables.
#dat {
position: absolute;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: auto;
}
.pull-left {
float:left;
}
.ml-10 {
margin-left: 10px;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data"></p>
<p id="temp"></p>
<p id="time"></p>
<button onclick="convertc()" class="pull-left">imperial</button>
<button onclick="convertf()" class="pull-left ml-10">metric</button>
</div>
You can separate your two buttons in different div and apply CSS in each div to adjust width.
<div>
<button onclick="convertc()">imperial</button>
</div>
<div>
<button onclick="convertf()">metric</button>
</div>
Beside, you can use Bootstrap to keep them inline for every devices.
My suggestions would be as follows:
Do not use the <u> tag for underlining unlinked text. This visual mechanism signifies something clickable. Using it for non-actionable text is bad UX.
Use an <ul> tag for the data items rather than <p> tags. Semantically the information is a list and not paragraphs of textual information.
For the <div> tags, use 100% width so that your UI is scalable with the visitors viewport. The CSS will continue to center the buttons as the viewport size changes.
See the following code:
#dat {
width: 100%;
margin: 0;
}
#dat ul
{
list-style:none;
margin:10px 0;
padding:0;
}
#dat .btns
{
width:100%;
text-align:center;
}
#dat .btns button {
display: inline;
}
<h1>Weather App</h1>
<div id="dat">
<ul>
<li id="data"></li>
<li id="temp"></li>
<li id="time"></li>
</ul>
<div class="btns">
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
</div>
I'm trying to make a single page with a large button that is always in the absolute middle/center of the page. I want the button-text to be large, but when I make it large it offsets the button and it is no longer in the middle. What am I doing wrong here?
(I also have bootstrap installed and am glad to use rows/columns/offsets too)
CSS
.btn-text {
vertical-align: middle;
font-family: 'Corben';
font-size: 580%;
}
.wrapper {
text-align: center;
}
.btn {
position: absolute;
top: 50%;
padding: 20%;
}
HTML
...
<body>
<div class="wrapper">
<div class="btn btn-large btn-primary" id="oujh-button">
<div class="btn-text">BUTTON</div>
</div>
</div>
</body>
...
JSFiddle: https://jsfiddle.net/50ye58oe/1/
If using CSS3 transforms is OK(if you don't need to support IE<9) you could do this:
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Another solution is to use the Bootstrap center-block class to horizontally center the button and a flexbox to vertically center it.
HTML
<div class="wrapper">
<div class="center-block btn btn-large btn-primary" id="oujh-button">
<div class="btn-text">BUTTON</div>
</div>
</div>
CSS
.btn-text {
font-family: 'Corben';
font-size: 280%;
}
.wrapper {
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
A common, modern design technique for responsive websites is to use a screen-height element as the above-the-fold content wrapper, and have all other content available below. Here's a good discussion on this technique. Here's a demo at CodePen:
#fullscreen {
width: 100%;
height: 100%;
display: table;
}
#fullscreen .fullscreen-content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id="fullscreen">
<div class="fullscreen-content">
...
</div>
</div>
How can I make a Bootstrap 3 row behave in this manner?
I'm facing this challenge. Here's my current solution.
.full-ht {
height: 100vh;
position: relative;
}
.full-ht-content {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
margin-left: -15px;
padding-left: 15px;
}
<div class="container-fluid">
<div class="row full-ht">
<div lass="col-xs-12 full-ht">
<div id="page-top-content" class="full-ht-content">
Above-the-fold content.
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
Other content.
</div>
</div>
</div>
Fiddle demo