I have some overlay container with fixed attribute and inside i need three flex col divs next to each other. In the first flex-col div i have at the bottom a div which contains two compoenents among themselves (flex-col) i need to make scrollable. But i cant find any way to archive that container to become scrollable. Here is my code:
<div
class="fixed top-10 bottom-10 h-4/5 flex flex flex-col justify-center left-10 right-10 z-1003 overflow-hidden">
<div class="w-full h-full bg-white left-10 right-10 shadow-rb rounded-lg">
<Some HEader (not visible in my attached photo)
/>
<div class="flex flex-row mx-8 my-6">
<div class="flex-1">
<div class="flex flex-col">
<SomeUnscrollableContent/>
<img :src="someImage" class="w-full h-52 mt-4" />
<div class="flex flex-col flex-1 w-full h-full z-1001">
<div
class="w-full h-full top-0 bottom-0 left-0 overflow-y-scroll"
>
**HERE IS MY SCROLLABLE CONTENT**
<Component 1 />
<Component 2 />
</div>
</div>
</div>
</div>
<div class="ml-2 flex-1 border-solid border border-black-normal">
<div class="flex flex-col"></div>
</div>
<div class="ml-2 flex-1 border-solid border border-black-normal">
<div class="flex flex-col"></div>
</div>
</div>
</div>
I tried multiple attempts also setting the div before the scrollable content to absolute, which results that the content goes the whole flex container width.
Has someone an idea? This is how it should look like:
Try to add the below given classes. Demo
<div class="flex min-h-screen max-h-screen overflow-hidden p-4">
<div class="flex flex-1">
<div class="flex flex-1 bg-blue-100">
<div class="flex flex-col flex-1">
<div class="flex h-48 bg-gray-50">1</div>
<div class="flex h-48 bg-gray-100">2</div>
<div class="flex flex-1 bg-gray-200 overflow-x-hidden">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores eos aliquid tenetur at reprehenderit rem fugit provident sed, est eligendi animi quo quod suscipit labore tempora mollitia ratione ut quasi? Praesentium fugiat rem, sed, animi veniam esse expedita, distinctio exercitationem aperiam rerum magnam vel doloremque! Aliquid eos minima atque soluta voluptatum, saepe in aliquam numquam quo inventore, dolores tempora omnis. Eveniet exercitationem temporibus aspernatur quibusdam tenetur! Debitis nisi facere necessitatibus blanditiis distinctio atque repudiandae ipsum autem. Consequatur maiores ut illum aliquam, non, numquam provident explicabo ex, vero in sit amet? Expedita optio veniam nulla odio, culpa aut officia excepturi iste! Quo veniam distinctio soluta corrupti? Ex quidem nihil, aspernatur soluta dignissimos optio, natus at totam blanditiis dolores inventore mollitia officia? Deserunt tenetur eaque iste, non et id molestiae vitae ex quisquam aspernatur eum, voluptates vero, perspiciatis molestias nam ipsam exercitationem qui nemo ratione ab consectetur blanditiis quaerat debitis ad? Repudiandae.</div>
</div>
</div>
<div class="flex flex-1">22</div>
<div class="flex flex-1">33</div>
</div>
</div>
Related
I'm trying to make nested columns using bootstrap3, Logically everything is set well, but I can see that the rules for a specific size overwrite another size, for instance I'm applying some rules when the screen size is medium but it affects the large size, also the text appears on top of the images, I don't know where is the problem.
another question is there a way for the image to be resized ( scaled ) automatically?
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 1</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>
<script src="js/jquery-3.4.0.min.js"></script>
<style type="text/css">
body{ text-align: center; }
img{ height:150px; width: 150px; margin: 0 auto; display: block; }
#media (min-width: 768px) and (max-width: 991px){
div{text-align: left;}
h1{margin-top: 0;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<section class="col-lg-2 col-md-4 col-sm-12 col-xs-6 col-xs- offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/4.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
<div class="clearfix visible-sm-block"></div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/1.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor
</p>
</div>
</div>
</section>
<div class="clearfix visible-sm-block"></div><!-- as the elements have been broken at some break points-->
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/2.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/3.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/1.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/2.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
the result should be the following:
- 6 columns at the large screen
- full-width columns at a small screen
- 3 columns at a medium screen
Way for the image to be resized automatically use:
background-size: cover;
For styling rule use !important like
display: block !important;
I get some code like in the below from coreui vue template,
<b-modal title="Modal title" class="modal-success" v-model="successModal" #ok="successModal = false" ok-variant="success">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</b-modal>`
And the result is like in the below:
https://i.stack.imgur.com/8qPLJ.png
the question:
How I can edit the two buttons (cancel and OK) in the footer of that modal?
I know.
this is to use a slot,
you can put the slot for footer like in the below code
<div slot="modal-footer" class="w-100">
<p class="float-left">Modal Footer Content</p>
<b-btn size="sm" class="float-right" variant="primary" #click="show=false">
Close
</b-btn>
</div>
For anyone that's stumbling upon this question, here's is another answer.
<CModal title="Delete scraper?" :show.sync="dangerModal" color="danger">
By deleting this scraper, you will delete all the jobs and results that
are related to this scraper.<br><br>
<span class="font-weight-bold">Are you sure you would want to delete this scraper?</span>
<div slot="footer" class="w-100">
<CButton style="border-radius: .2rem; color: white;" color="danger" class="ml-1 mr-1 float-right" #click="dangerModal = true">
<i class="fas fa-trash"></i>
</CButton>
<CButton style="border-radius: .2rem; color: white;" color="danger" class="ml-1 mr-1 float-right" #click="dangerModal = true">
<i class="fas fa-trash"></i>
</CButton>
</div>
</CModal>
By adding a div element with the slot name.
OR
You can do this, which is way cleaner and easier:
<CModal title="Delete scraper?" :show.sync="dangerModal" color="danger">
By deleting this scraper, you will delete all the jobs and results that
are related to this scraper.<br><br>
<span class="font-weight-bold">Are you sure you would want to delete this scraper?</span>
<template #footer>
<CButton #click="dangerModal = false" color="danger">Discard</CButton>
<CButton #click="dangerModal = false" color="success">Accept</CButton>
</template>
</CModal>
Just use template element with the hashtag of the slot you want to use. In this case, I did #footer, to change the footer of the modal.
The slot names are listed in the official CoreUI Vue documentation here.
Remove button through hide-footer, add the button the way you want it.
on the button we use the float-right class to direct the buttons to the right.
Example:
<template>
<div>
<b-button #click="showModal">
Open Modal
</b-button>
<b-modal ref="myModalRef" hide-footer title="Using Component Methods">
<div class="d-block text-center">
<h3>Alteration</h3>
</div>
<b-btn class="float-right" #click="hideModal">Test</b-btn>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal () {
this.$refs.myModalRef.show()
},
hideModal () {
this.$refs.myModalRef.hide()
}
}
}
</script>
I'm using Bootstrap scrollspy to update a navbar. I want to change the color of the highlighted active li on the navbar to match the background-color of the matching section.but it is dynamic content
I know what data-spy attribute does and how to use it, but I do not know how the scrollspy plugin really works under the bonnet.so i can make a own code to work on it.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 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>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
above is the example of scrollspy. The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position. need is to change color of active navbar to background color of respective position
This is an example of what I am starting with.
If you're wanting to change the background of the active (highlighted) navbar item to match the background of the current section, here's how I would do that:
First, listen to the activate.bs.scrollspy event. This event fires whenever the scrollspy moves to a new section. This would happen on the element with data-spy="scroll" or window if your scrollspying on the body element.
Within that event handler, look for .active to figure out which section is active. What you are looking for is an <a> element. Dropdown menus are the tricky part since there can be multiple .active elements. You need the final one. The way you get there depends on the markup. For the example you linked to, $('.active').last().children().first() would work.
With that done, you can grab href of the <a>, turn it into a class, and apply it to the navbar. You would also need to remove any classes this event has previously applied.
This gets you to have specific classes on the navbar for each section, dynamically applied only when that section is active. The rest is done with CSS.
The CSS will key off your dynamic class and apply a background to the active a elements. Bootstrap gets a little annoying here with all the classes that you have to override. For simplicity, I'm getting around it by using an id:
#navbar.bg-section2 .active a {
background-color: #28a745;
}
The bg-section2 is the dynamically applied class.
That is all that it takes. Below is a live example. Click "Full page" to see it better.
var $navbar = $('#navbar');
var currentClass = 'bg-section1';
$(window).on('activate.bs.scrollspy', function() {
var $active = $('.active');
var $link = $active.last().children().last();
// Classes have the form "bg-id" (with no # in the id)
var newClass = 'bg-' + $link.attr('href').slice(1);
$navbar.removeClass(currentClass);
$navbar.addClass(newClass);
// Keep track of which class is active
currentClass = newClass;
});
body {
position: relative;
padding-top: 50px;
}
section {
padding: 2rem;
color: #fff;
min-height: 70vh;
}
#section1,
#navbar.bg-section1 .active>a {
background-color: #007bff;
}
#section2,
#navbar.bg-section2 .active>a {
background-color: #28a745;
}
#section3_1,
#navbar.bg-section3_1 .active>a {
background-color: #ffc107;
}
#section3_2,
#navbar.bg-section3_2 .active>a {
background-color: #17a2b8;
}
#section3_3,
#navbar.bg-section3_3 .active>a {
background-color: #dc3545;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div id="navbar" class="collapse navbar-collapse bg-section1">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Section 3</a>
<ul class="dropdown-menu">
<li>Section 3.1</li>
<li>Section 3.2</li>
<li>Section 3.3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
<section id="section3_1">
<h2>Section 3.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
<section id="section3_2">
<h2>Section 3.2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
<section id="section3_3">
<h2>Section 3.3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
</body>
I will copy the example of bootstrap
offcanvas ,but The page is smaller then example of bootstrap on my server.The same css,same html who can tell me ,why
the example of bootstrap:
my page:
My page is smaller then bootstrap example.
the code of this page:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Off Canvas Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/static/autoapp/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/static/autoapp/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/autoapp/css/offcanvas.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/static/autoapp/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
</div>
</div><!--/.sidebar-offcanvas-->
</div><!--/row-->
<hr>
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
</div><!--/.container-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="/static/autoapp/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/autoapp/js/ie10-viewport-bug-workaround.js"></script>
<script src="/static/autoapp/js/offcanvas.js"></script>
</body>
</html>
You dont have all source files of example page.
Check this and compare with your code
I fix the problem,the chrome can remember zoom,i set up long time ago
I am trying to adapt the following Fiddle:
Bootstrap modal
Here is my code:
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/js/jasny-bootstrap.js" type="text/javascript"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<style>
.modal-body {
max-height: calc(100vh - 150px);
overflow-y: auto;
}
</style>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit. Suspendisse eget iaculis lectus. Donec vitae tempus enim, quis tristique magna. Donec lobortis, sem ac pretium viverra, leo nisl consequat arcu, sit amet ullamcorper nunc turpis ac erat. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed.</p>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
When I run it I see the blue button, but when I click on it nothing happens. What am I doing wrong?
Thanks
You didn't load jQuery above the bootstrap js. Now use this.
<script src="https://code.jquery.com/jquery-2.2.2.min.js" type="text/javascript"></script>
Now it will be working.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.2.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/js/jasny-bootstrap.js" type="text/javascript"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<style>
.modal-body {
max-height: calc(100vh - 150px);
overflow-y: auto;
}
</style>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit. Suspendisse eget iaculis lectus. Donec vitae tempus enim, quis tristique magna. Donec lobortis, sem ac pretium viverra, leo nisl consequat arcu, sit amet ullamcorper nunc turpis ac erat. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed.</p>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->