I have a bootstrap modal that i changed it's width to 50% and yet when i click outside the modal i can't dismiss the modal, it seems as if the 100% width is still "there".
For example open the normal modal and clicking outside it closes it since it takes up the exact space the ui shows.
when i set width to 50% the "closing space" by clicking outside the modal hasn't changed, it's as if it's still 100%.
how do i fix it? there is an example below that i made to show what i mean.
if you use chrome you can inspect the <div class="modal-content" style="width: 50%;"> element and see the "hidden" width thing.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<ul>
<li>Normal</li>
<li>Width 50%</li>
</ul>
<div class="modal fade" id="width_half" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="width: 50%;">
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
</div>
</div>
</div>
<div class="modal fade" id="width_normal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
</div>
</div>
</div>
</body>
</html>
You have to change .modal-dialog CSS (not .modal-content), if you want to have 50% of the original Bootstrap sizes you can divide default values by 2 like this:
#media (min-width: 768px) {
.modal-dialog {
width: 300px; /* Bootstrap default - 600px */
}
.modal-sm {
width: 150px; /* Bootstrap default - 300px */
}
}
#media (min-width: 992px) {
.modal-lg {
width: 450px; /* Bootstrap default - 900px */
}
}
Related
I try to achieve the mobile and desktop view of the following attached image in the lower half. The problem I have right now is, that the violet col begins only after the yellow col is finished.
Here is my html structure:
<div class="container-fluid">
<div class="col-sm-12 col-md-6 col-md-push-6">RED</div>
<div class="col-sm-12 col-md-6 col-md-pull-6">YELLOW</div>
<div class="col-sm-12 col-md-6 col-md-push-6">VIOLET</div>
</div>
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<div class="container-fluid">
<div class="col-sm-12 col-md-6 col-md-push-6 red">RED<br><br></div>
<div class="col-sm-12 col-md-6 col-md-pull-6 yellow">YELLOW<br><br><br><br><br><br></div>
<div class="col-sm-12 col-md-6 col-md-push-6 purple">VIOLET</div>
</div>
</html>
I have found a simple solution using Grid CSS & Media Queries.
First, I cleaned your HTML markup like so:
HTML:
<div class="container-fluid">
<div class="col-sm-12 col-md-8 col-lg-8 yellow">YELLOW</div>
<div class="col-sm-12 col-md-4 col-lg-4 red">RED</div>
<div class="col-sm-12 col-md-4 col-lg-4 purple">VIOLET</div>
</div>
You can see that I moved the yellow <div> to the first position. We'll set change the position with the grid system only on a certain viewport, mobile on this case, like so:
CSS:
.yellow {
background-color: yellow;
height: 400px; /* for demo only */
}
.red {
background-color: red;
height: 200px; /* for demo only */
}
.purple {
background-color: purple;
height: 200px; /* for demo only */
}
/* Reordering the yellow <div> on mobile version */
#media only screen and (max-width: 1000px) {
.container-fluid {
display: grid;
}
.yellow {
order: 2;
}
.red {
order: 1;
}
.purple {
order: 3;
}
}
Check this code working sample.
Edit:
If you add margin to the <div> columns, you'll need to reduce col-lg & col-md utility classes's number so it won't break the columns grid.
Please am trying to create a front page with a sliding image and the text and button on it remain in same position while images slide underneath the text and button..
solution i found online are not helpful
One way to do it is setting the content you want to remain static to fixed. Place all the content inside a wrapper so you dont need to manually position each element.
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
}
.container img{
height: 100%;
width: 100%;
}
.fixed {
width: 100%;
position: fixed;
z-index: 999;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="fixed">
<p class="lead" style="color: white;">Hello! I'm text.</p>
<button class="btn">PRESS</button>
</div>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
</div>
</div>
</div>
</body>
</html>
I'm not new to the bootstrap 3 grid system, but previously only worked with stacked columns on mobile.
Today I need a grid with a single column on mobile, taking the full width (no scrollbars). On larger devices, the column should be centered (offsetted ?) while an appropriate width is maintained.
How can I do that ?
So far I have tried the following :
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-3">
... content ...
</div>
</div>
</div>
This is looking fine on desktop and mobile, but then I realized I have scrollbars on mobile.
Could it be surrounding html (not shown here) ? Or is it related to this code ?
Thanks in advance.
Here's two solutions.
The first solution sets the max-width of your column to a fixed number of pixels (in this case 650px);
The second solution set the max-width of the column to a certain percentage of the window until you reach a breakpoint and it sets it to 100%.
Solution 1 (run it full screen and change the window width to see it in action):
.constrain {
max-width: 650px;
margin-right: auto;
margin-left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="constrain">
<div class="row">
<div class="col-md-12" style="background-color: coral;">
Content
</div>
</div>
</div>
</div>
Solution 2 (run it full screen and change the window width to see it in action):
.constrain {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
#media only screen and (max-width: 650px) {
.constrain {
max-width: 100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="constrain">
<div class="row">
<div class="col-md-12" style="background-color: coral;">
Content
</div>
</div>
</div>
</div>
I am developing a chrome extension and want to open an HTML page from content script as a bootstrap modal on the same page. How is it possible?
Your answer is a bit vague and you didn't provide any code which isn't the best to do.
But you can achieve this using iFrames
Your modal body would have somthing like <iframe src="https://www.w3schools.com"></iframe> in it.
All the information you'd need is on that site. But you'd possibly need to update some CSS to make it look good.
I created a full screen modal with scrollable iframe and when the modal active the body scroll capabilty has been disabale and when modal close scroll has been enable.I hope this will help. :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="mybody">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg " data-toggle="modal" data-target="#myModal" onclick="disablebodyscroll()"> OOPEN A MODAL WITH IFRAME</button>
<div style="background-color: black; height: 800px;"></div>
<p>Copyright © 2017 Ace</p>
<!-- End of button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="enablebodyscroll()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe src="https://www.w3schools.com/" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" width="100%" height="100%" position="absolute" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
<style type="text/css">
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
.modal-body {
height: 500px;
min-height: 100%;
}
</style>
<script type="text/javascript">
function disablebodyscroll() {
document.getElementById("mybody").style.overflow = "hidden";
}
function enablebodyscroll() {
document.getElementById("mybody").style.overflow = "auto";
}
</script>
For some odd reason scrollspy is causing my second list item to be active on page load instead of the first one. It's weird because after I scroll a bit with the mouse it will make the correct list item active. Aside from this error it functions perfectly. If someone could help me out it would be greatly appreciated.
Heres my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="111">
<header id="home">
<nav class="navbar navbar-default navbar-fixed-top cbp-af-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
Determined Divas
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home" class="active">Home</li>
<li>About</li>
<li>Who We Are</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content">
<!-- Home page row -->
<div class="row" id="home">
<div class="fill" style="background-image:url(img/LP/pathways_12.jpg)"></div>
</div>
<!-- About Section -->
<section class="row" id="about">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>About</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Who We Are Section -->
<section class="row" id="whoWeAre">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Who We Are</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Gallery -->
<section class="row" id="gallery">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Gallery</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Contact-->
<section class="row" id="contact">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Contact</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Scripts to animated the nav -->
<script type="text/javascript" src="js/Animated Header/classie.js"></script>
<script type="text/javascript" src="js/Animated Header/cbpAnimatedHeader.js"></script>
<!-- Smooth Scrolling -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Script for full screen bg image -->
<script src="js/fillscreen.js"></script>
</body>
</html>
Heres the CSS:
body{
position: relative;
background-color: #FFF2E2;
color: white;
font-family: 'Raleway', sans-serif;
/*Keeps page content under the header, must match navbar height*/
/*padding-top: 75px; */
}
/*NAV STYLING*/
.navbar-default{
height: 76px;
transition: all 0.5s;
-webkit-animation: all 0.5s;
}
.navbar-default .navbar-nav{
font-weight: bold;
}
.navbar-default .navbar-brand {
color: white;
font-size: 2.0em;
font-family: 'Poiret One', cursive;
font-weight: bolder;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
color: #777;
}
.navbar-default {
background-color: #E498AF;
}
/*Controls active nav items*/
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus {
color: #777;
}
/*Animate nav on scroll*/
.cbp-af-header-shrink{
height: 51px;
}
/*Full screen image styles*/
.fill{
background-size: cover;
background-position: center;
}
/*Title Row Styling*/
.title-row{
height: 100px;
color: #777;
background-color: #FFF2E2;
text-align: center;
}
/*Content row styling*/
.content-row{
height: 600px;
background-color: white;
}
that is because you have
<body data-spy="scroll" data-target=".navbar" data-offset="111">
data target of navbar class but you html markup has
<div id="navbar" class="collapse navbar-collapse">
id navbar; switch either one and should work.
bootstrap scrollspy will look for a target then default to a nav if it cant find the target or if a target is not specified. Its also better to put the scrollspy on a div that only contains the navigation
here is a fiddle example