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 -->
Related
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>
I would like to ask 2 questions about Sidebar in BootstrapVue.
Disable scrolling after opened Sidebar
How to handle closing method when click outside the Sidebar (Backdrop)
I'm using https://bootstrap-vue.org/docs/components/sidebar
<template>
<div>
<b-button v-b-toggle.sidebar-backdrop>Toggle sSidebar</b-button>
<b-sidebar
id="sidebar-backdrop"
title="Sidebar with backdrop"
backdrop
shadow
>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
Thank you and appreciate.
You can remove the scrollbar by adding the bootstrap class overflow-hidden to your body.
Hook a method up to the #change method on the sidebar, which is fired when the sidebar is shown and hidden.
The sidebar also has a #hidden event, which is fired when the sidebar gets hidden.
new Vue({
el: '#app',
methods: {
toggleBodyScrollbar(visible) {
const body = document.getElementsByTagName('body')[0];
if(visible)
body.classList.add("overflow-hidden");
else
body.classList.remove("overflow-hidden");
}
}
})
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-sidebar id="sidebar-1" title="Sidebar" shadow backdrop #change="toggleBodyScrollbar">
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
<p v-for="i in 10">Some content</p>
<b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
<p v-for="i in 10">Some content</p>
</div>
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;
If you press on menu item than go to another one it's not possible to go back to the one you came from, because all stay on active.
How can I fix this?
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu1">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu2">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu3">JavaScript</a></li>
</ul>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
Both are possible using bootstrap's built in events. Put the following in your html just before the close body tag. This effectively removes all active classes from li's when the menu is shown.
<script>
$(document).ready(function(){
$(".dropdown").on("show.bs.dropdown", function(){
$(".dropdown-menu li").removeClass("active");
});
});
</script>
Here is a fiddle
Bootstrap documentation
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