Both vertically and horizontally center of Bootsrap ui Modal - javascript

I'm trying to make a Bootstrap ui Modal that is both vertically and horizontally center align .
I tried this solution , that indeed vertically centered the modal , but when I tried it with my own template (with 800px) it lost its horizontally center:
i.e - http://plnkr.co/edit/vp3IWIcrpGG6ehH8JKVe?p=preview
How could I achieve this modal with vertically and horizontally center with my own template ?
Note - The width and height of the template is dynamic so the solution should be appropriate for any width and and height .

the reason the modal lost its center is due to this css rule:
#media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
}
since your template has a 800px width, it overflows its container (the .modal-dialog div)
if you set .modal-dialog to width: auto it'll be fixed.
example: http://plnkr.co/edit/cYoYOgN1iMUzPKJuBw9H?p=preview

I did just override .modal-dialog with
.modal .modal-dialog {
max-width: 800px;
width: 100%;
}
this. Because it has fixed with:600px; which should be max-width:800px;
For smaller screens, I added margin auto so it doesn't go down.
#media (max-width: 767px){
.modal .modal-dialog{
margin:10px auto;
}
}
Plunker demo

Related

How can I change a div image and height rules when screen is resized?

I have two divs side by side, chat_bubble and character_image. The chat_bubble is a fixed percentage of the screen width/height, and the character_image fills the rest of the space. If the screen width is too small to fit both, character_image is tiled underneath and cuts off the image vertically to make space for chat_bubble.
I want to change this so that if the character_image must be tiled underneath chat_bubble:
The image is changed to a new image
That new character_image is now a fixed height and width of the screen, and for chat_bubble to fill the remaining vertical space.
chat_bubble needs to be 100% width of the screen when character_image is underneath, instead of 70%.
What's the best way for me to do this? I am doing this as a JavaScript project, do I need to add if conditions to my JavaScript to do this or can it be done responsively through CSS?
Here's my code pen to show how it is now:
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
Here's the relevant CSS code:
#main {
width: 90%;
height: 90%;
overflow: hidden;
}
#chat_bubble {
width: 70%;
height: 70%;
background: ghostwhite !important;
float: left;
}
#character_image {
max-height: 30vh;
object-fit: cover;
background: #ffffff;
float: right;
overflow: visible;
}
No need to load a new image using javascript but make the theme/image responsive.
First, make sure HTML doctype is HTML5 <!DOCTYPE html> and contains the meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0">
Then, apply css like for desktop view.
#chat_bubble {
width: 70%;
background: ghostwhite !important;
float: left;
}
#character_image {
width:30%;
float: right;
}
#character_image>img{
width:100%
}
For mobile view, using media query for mobile. For example
#media only screen and (max-width: 700px) {
#chat_bubble, #character_image{
width:100%;
float:none;
}
}

container-fluid in Bootstrap 3.4 not stretching horizontally 100%

I'm having the same issue as my previous question: div doesn't expand all the way horizontally
All I have in my render() function is
render() {
return (
<div className="container intro-body">
</div>
)
With CSS for intro-body like so (for color)
.intro-body {
height: 582px;
background-color: #3BC5C3;
}
On full screen on a 13 inch Macbook, the left and right sides are white spaces. It seems like there's padding or margin of some sort.
But when I shrink my window to about half the size, it reaches the left and right sides
Can someone explain this strange phenomenon? Is this something in Bootstrap that I'm not aware of? I was told to use container-fluid but 1. I think it's removed in Bootstrap 3 and 2. It didn't work when I tried it.
If you look at the bootstrap source you would see that .container has fixed widths for every media breakpoint except for extra small devices, and .container-fluid has full width for all media breakpoints:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
So if you want to have fullwidth for every media breakpoint, use .container-fluid.
First thing first : you have to put a reset css link (it must be the first one). You can find one here: http://meyerweb.com/eric/tools/css/reset/ then if you want the container to match the total width of a div element it must be a container-fluid

Change bootstrap 3 modal width maintaining responsiveness

I just read on this article that you can change bootstrap modal width with this:
.modal .modal-dialog { width: 800px; }
But when I do this, I loose the default responsiveness of the modal.
How can I change the width but keep the responsiveness on mobile?
Just use max-width. It will become responsive-
.modal .modal-dialog { width: 800px; max-width:100%; }
Or, You can do it via media queries.
#media only screen and (max-width: 480px) {
.modal .modal-dialog {
position:relative;
width:auto;
margin: 10px;
}
}

Modal window not taking full 100 width

I've a modal window that I want to take the full screen. I've got it to have 100% height but width isn't working. I've tried using min-width: 100%; but that gave more than 100%.
https://jsfiddle.net/k5adr0wc/
Just click on that img icon or the modal buttons. I've also tried
.remodal-is-initialized {
display:inline-block;
width: 100%;
height: 100%;
Add the following to your CSS:
.remodal {
max-width: 100% !important;
}
Here is a JSFiddle demo
The problem is in the following media query. You have a max-width of 700px.
Remove it and it will work.
/* Media queries
========================================================================== */
#media only screen and (min-width: 641px) {
.remodal {
max-width: 700px;
}
}
Also remove the padding on the .remodal class.
.remodal {
width: 100%;
margin-bottom: 10px;
/* remove padding */
padding: 35px;
...
There also seems to be a problem with the #outer div. You have overflowing content which produces a second scroll-bar on the right.
I also noticed at the bottom of the modal there's a little gap of just empty space? How do I get rid of that?

Fluid Dynamic CSS - Javascript/jQuery

I am wondering if there is way, to mark a MAX and a MIN value depending on the max Width of the browser window and min Width of the browser window, and have it dynamically change that MAX and MIN value between that set range?
Example:
I have a button "button" outside a div "divA" (it is part of another div "divB", that lies outside the div being discussed), and I want this button "button" to lie at the bottom right corner of this initial div "divA".
Now, I can get the button to lie at the bottom right corner when the browser window is at is absolute minimum, and at the absolute maximum, but the in between is a bit sporadic since I'm positioning the button absolutely, and then changing the bottom percentage on the two media widths.
Is there a a known javascript or jquery that would allow me to do this?
example CSS:
#divA{
width: 100%;
height:auto;
}
#divB{
width: 100%;
height: auto;
}
#button{
position: relative;
}
#media screen and (min-width: 768px){
#button{
position: absolute;
bottom: 100%;
}
}
#media screen and (min-width: 400px){
#button{
position: absolute;
bottom: 250%;
}
}
example HTML:
<div id="divA"></div>
<div id="divB"><button>CLICK ME</button></div>
demo -http://jsfiddle.net/ogjhef7c/1/
you are setting bottom to by 250% 100% try changing the value, #media works find try resizing theattached fiddleheight`
#media screen and (max-height: 300px) {
#button {
bottom: 0px;
background: red;
}
}
#media screen and (max-height: 100px) {
#button {
bottom: 0px;
background: green;
}
}

Categories

Resources