I'm trying to add scrollbar to bootstrap modal body. But it add to entire content.How to add it to only to body.was using modals which had long content, and the modals automatically scrolled when a given max height was reached.
This is my code
<head>
<!-- Bootstrap CSS-->
<link href="/<s:text name="app.name"/>/css/bootstrap.min.css" rel="stylesheet" type="text/css">
.modal-body {
max-height: calc(100vh - 212px);
overflow-y: auto;
}
</head>
<body>
<div>
<s:if test="user.level == 0 && name != ''">
<button id="roleBtn" class="btn btn-info" type="button" onclick=""
data-toggle="modal" data-target="#roleModal">
<s:text name="roles"/>
</button>
</s:if>
</div>
<div class="modal" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:80%; margin-top: 60px; margin-bottom:30px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"><s:text name="headingRoles"/></h4>
</div>
<s:form theme="simple" method="post" action="UserSupport">
<div class="modal-body">
<div class="container-fluid">
<s:hidden name="docType" value="userLevel"/>
<div>
<s:hidden name="name"/>
<s:iterator value="userRoles" status="rowstatus">
<s:hidden name="userRoles[%{#rowstatus.index}].role" value="%{role}"/>
<div class="form-group col-xs-12">
<div class="col-xs-4"></div>
<div class="col-xs-8" align="left">
<div class="checkbox">
<label></label><s:checkbox name="userRoles[%{#rowstatus.index}].selected"
value="name != ''"/> <s:property
value="roleName"/></label>
</div>
</div>
</div>
</s:iterator>
</div>
</div>
</div>
<div class="modal-footer">
<div class="panel-body" align="center">
<s:submit method="saveRoles" cssClass="btn btn-primary"
value="%{getText('save')}"></s:submit>
<button type="button" method="resetRoles" class="btn btn-default" data-dismiss="modal">
<s:text name="close"/>
</button>
</div>
</div>
</s:form>
</div>
</div>
</div>
</body>
it doesn't work as expected. The modal window does reach a maximum size, but it just cuts its content there and the footer is not even displayed.Answers are welcome
Thank you
Just provide overflow hidden to the .modal class and provide overflow scroll to the modal body...
.modal .modal-content{
overflow:hidden;
}
.modal-body{
overflow-y:scroll; // to get scrollbar only for y axis
}
Hope it will help you :)
<head>
<!-- Bootstrap CSS-->
<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.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body,html{
width:100%;
height:100%;
padding:0px;
margin:0px;
}
.modal-dialog{
height:calc(100% - 60px);
}
.modal-content{
height:100%;
}
.modal-header{
height:50px;
}
.model-footer{
height:75px;
}
.modal-body {
height:calc(100% - 125px);
overflow-y: scroll; /*give auto it will take based in content */
}
</style>
</head>
<body>
<div>
<s:if test="user.level == 0 && name != ''">
<button id="roleBtn" class="btn btn-info" type="button" onclick=""
data-toggle="modal" data-target="#roleModal">Open model
<s:text name="roles"/>
</button>
</s:if>
</div>
<div class="modal" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"><s:text name="headingRoles"/></h4>
</div>
<s:form theme="simple" method="post" action="UserSupport">
<div class="modal-body">
<div class="container-fluid">
<s:hidden name="docType" value="userLevel"/>
<div>
<s:hidden name="name"/>
<s:iterator value="userRoles" status="rowstatus">
<s:hidden name="userRoles[%{#rowstatus.index}].role" value="%{role}"/>
<div class="form-group col-xs-12">
<div class="col-xs-4"></div>
<div class="col-xs-8" align="left">
<div class="checkbox">
<label></label><s:checkbox name="userRoles[%{#rowstatus.index}].selected"
value="name != ''"/> <s:property
value="roleName"/></label>
</div>
</div>
</div>
</s:iterator>
</div>
</div>
</div>
<div class="modal-footer">
<div class="panel-body" align="center">
<s:submit method="saveRoles" cssClass="btn btn-primary"
value="%{getText('save')}"></s:submit>
<button type="button" method="resetRoles" class="btn btn-default" data-dismiss="modal">
<s:text name="close"/>
</button>
</div>
</div>
</s:form>
</div>
</div>
</div>
</body>
https://getbootstrap.com/docs/4.5/components/modal/#exampleModalLongTitle
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
If you use Bootstrap, dont add some CSS, just use class "overflow-hidden" on the div with modal-content class.
Related
I have set up a carousel to show 5 videos. I have set up indicators at the bottom to navigate:
<div class="col-lg-12 carousel slide" id="trailers" data-bs-ride="carousel" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#trailers" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="1" data-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>
<div class="trailerSlider carousel-inner" style="background-color: #000; padding-bottom: 50px;"> <!-- was livetv -->
<div class="carousel-item active" >
<div id="cover">
Loading video...
</div>
</div>
<div class="carousel-item">
<div id="cover2">
Loading video...
</div>
</div>
<div class="carousel-item">
<div id="cover3">
Loading video...
</div>
</div>
<div class="carousel-item">
<div id="cover4">
Loading video...
</div>
</div>
<div class="carousel-item">
<div id="cover5">
Loading video...
</div>
</div>
</div>
</div>
However, even though the indicators show correctly, they don't work, nothing happens when I tap, not even an error message.
If I change data-bs-ride, data-bs-target and data-bs-slide-to to data-ride, data-target and data-slide-to (as I saw in a video tutorial), the buttons do work but the buttons look weird (much smaller and with a white border).
Also, how can I have the slider work only via the indicator buttons and not slide automatically?
You have a duplicate data-bs-ride="carousel" and an extra data-slide-to="1" but I when I ran your code, those errors wouldn’t stop the carousel from working. You didn’t include a working snippet with your question, so it’s not possible to verify which version of Bootstrap 5 you’re using.
Here’s a working snippet using your code.
.carousel-item {
height: 10.5rem;
}
#cover, #cover2, #cover3, #cover4, #cover5 {
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<div class="col-lg-12 carousel slide" id="trailers" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#trailers" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>
<div class="trailerSlider carousel-inner" style="background-color: #000; padding-bottom: 50px;">
<!-- was livetv -->
<div class="carousel-item active">
<div id="cover">
Loading video 1...
</div>
</div>
<div class="carousel-item">
<div id="cover2">
Loading video 2...
</div>
</div>
<div class="carousel-item">
<div id="cover3">
Loading video 3...
</div>
</div>
<div class="carousel-item">
<div id="cover4">
Loading video 4...
</div>
</div>
<div class="carousel-item">
<div id="cover5">
Loading video 5...
</div>
</div>
</div>
</div>
To prevent the slider from working automatically, add data-bs-interval="false" to the carousel div.
I've been trying to get a basic modal pop up to show, but not having any luck. With fade on I see the page contents shift to the left, but the modal is invisible. When fade removed I see the modal over the entire screen. I have no idea why its doing what its doing. Hopefully someone here can see what I'm doing wrong.
<!-- START: Header Banner -->
<div>
<img src="/img/default-header-img.jpg" class="img-responsive">
</div>
<!-- END: Header Banner -->
<!-- Message board area -->
<br>
<div class="container">
<div class="strap-card strap-person">
<h2 class="mb20">Message Board</h2>
<p>Welcome #User.Identity.Name, Let's get started...</p>
</div>
</div>
<!-- END: Message board -->
<div class="container">
#*Method 1*#
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
#*End Method 1*#
<div class="row">
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="templates">
<h4>Select a Template</h4>
<form id="frmTemplates" asp-action="return false" class="strap-form mb60">
<select id="selTemplates" asp-for="TemplateId" asp-items="Model.Templates" class="form-control"></select>
<br />
<button type="button" id="btnStart" name="button" value="Start" #(ViewBag.DisableRangeStart == true ? "disabled='disabled'" : "") class="btn btn-primary">Start</button> <button type="button" id="btnStop" name="button" value="Stop" class="btn btn-primary">Stop</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="environment">
<h4>Environment Description</h4>
<br />
<span id="templateDesc">#Html.Raw(Model.TemplateDesc)</span>
</div>
</div>
</div>
</div>
</div>
</div>
#section scripts {
<script>
$(function ()
{
$("#btnStart").click(function (e)
{
$("#loadingModal").modal();
setTimeout(function () { $("#loadingModal").modal("hide") }, 300000);
});
$("#btnStop").click(function (e)
{
});
});
</script>
}
I've tried placing the modal code in different areas but the results are the same.
I tried putting everything in jsfiddle for testing, but I have no idea how to use that site.
Try to make a test with code below:
<h1>Test</h1>
<!-- START: Header Banner -->
<div>
<img src="/img/default-header-img.jpg" class="img-responsive">
</div>
<!-- END: Header Banner -->
<!-- Message board area -->
<br>
<div class="container">
<div class="strap-card strap-person">
<h2 class="mb20">Message Board</h2>
<p>Welcome #User.Identity.Name, Let's get started...</p>
</div>
</div>
<!-- END: Message board -->
<div class="container">
#*Method 1*#
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
#*End Method 1*#
<div class="row">
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="templates">
<h4>Select a Template</h4>
<form id="frmTemplates" asp-action="return false" class="strap-form mb60">
<select id="selTemplates" class="form-control"></select>
<br />
<button type="button" id="btnStart" name="button" value="Start" #(ViewBag.DisableRangeStart == true ? "disabled='disabled'" : "") class="btn btn-primary">Start</button> <button type="button" id="btnStop" name="button" value="Stop" class="btn btn-primary">Stop</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="environment">
<h4>Environment Description</h4>
<br />
#*<span id="templateDesc">#Html.Raw(Model.TemplateDesc)</span>*#
</div>
</div>
</div>
</div>
</div>
</div>
#section scripts {
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(function ()
{
$("#btnStart").click(function (e)
{
$("#loadingModal").modal();
setTimeout(function () { $("#loadingModal").modal("hide") }, 300000);
});
$("#btnStop").click(function (e)
{
});
});
</script>
}
How does one open a modal from a Bootstrap popover? I'm having trouble with that. My sample code is below. Clicking on the button in the popover does not open the modal. Calling the modal from any other place on the page launches the modal.
I am using the following function for the popover:
$( function() {
$("[data-toggle=popover]").popover( {
html : true,
content : function() {
return $('#popover-content').html();
}
});
});
and here's the relevant HTML for my page:
<li>
<a data-toggle="popover" data-container="body" data-placement="left"
type="button" data-html="true" href="#" id="login">
<i class="zmdi zmdi-account-circle zmdi-hc-lg zmdi-hc-fw"
style="color:white; padding-top:10px;padding-right:32px">
</i>
</a>
</li>
<div id="popover-content" class="hide">
<div class="form-group" style="padding-left:0px">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
<button type="button" id="button2" class="btn pull-right" style="background-color:#00c853;color:#fff; margin-top:0px" onclick="$('#changeProfileModal').modal()"> </button>
</div>
</div>
</div>
</div>
Thanks in advance for assisting me with this.
You might need to bind the click of the button (which is hidden) via the document.
See sample code below (adjust colours, sizes, etc to your liking)
$(function() {
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$(document).on('click', "#button2", function() {
$('#changeProfileModal').modal('show');
});
});
#button2 {
background-color: #00c853;
color: #fff;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul>
<li>
<a data-toggle="popover" data-container="body" data-placement="right" type="button" data-html="true" href="#" id="login">
popover
</a>
</li>
</ul>
<div id="popover-content" class="hide">
<div class="form-group" style="padding-left:0px">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
<button type="button" id="button2" class="btn pull-right">btn2</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="changeProfileModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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 -->
I would like to apply animations on bootstrap3 modal box using animate.css. But it is not working for me.
Here is my code snippet
<html lang="en">
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/custom/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css" rel="stylesheet" />
</head>
<body>
fade InLeft | OutLeft
<div id="myModal1" class="modal animated fadeOutLeft" data-easein="fadeInLeft" data-easeout="fadeOutLeft" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<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" id="myModalLabel">Modal header 1</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
shake
<div id="myModal22" class="modal animated rollOut" data-easein="shake" data-easeout="rollOut" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<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 header</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</body>
</html>
Please find my code snippet in below link
JSFiddle
I appreciate your help.
I use the following javascript (jquery) extension of the bootstrap modal library to apply effects from animate.css to the modal show/hide events:
https://gist.github.com/jduhls/92f2c7fae92da3a95c5941024847ae87
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/jduhls/92f2c7fae92da3a95c5941024847ae87/raw/d17e48713892332af0b2afb55d34331608c46759/bootstrap-modal-animate-css.js"></script>
<div id="modal" class="modal animated" data-animate-css-hide="rollOut" data-animate-css-show="rollIn">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title"></div>
</div>
<div class="modal-body">Hello world!</div>
<div class="modal-footer">
<button type="button" class="btn btn-lg btn-default modal-submit" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
<p> </p>
<p><button class="btn btn-primary animated swing center-block" data-toggle="modal" data-target="#modal">Open Modal</button></p>
<p> </p>
<script src="https://gist.github.com/jduhls/92f2c7fae92da3a95c5941024847ae87.js"></script>
just simply add this class animated plus the transition you want.
for example: class="animated zoomIn"
put this code below, something like this.
<div class="modal animated zoomIn" tabindex="-1" role="dialog" aria-hidden="true">
then let's the animate begin!
I am using following example
http://www.bootply.com/59864
But when I click on the button which triggers the pop up, background gets darker but window doesn't show. Any idea what's causing this? I am using bootstrap 3.2.0
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="CreateWorkbook.aspx.cs" Inherits="CreateWorkbook" %>
<asp:Content ID="Content0" ContentPlaceHolderID="head" runat="Server">
<script>
$(function () {
$('#myFormSubmit').click(function (e) {
e.preventDefault();
alert($('#myField').val());
/*
$.post('http://path/to/post',
$('#myForm').serialize(),
function(data, status, xhr){
// do something here with response;
});
*/
});
});
</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="row">
<div class="col-md-12 col-xs-12" style="margin-top: 10px">
<a data-toggle="modal" href="#myModal" role="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-plus-sign">
</span>Add questions</a>
</div>
</div>
<div class="list-group col-md-8" style="margin-top:20px"> Questions list Q1: Name Q2: Location Q3: Outcome Q4: Next meeting date </div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<form id="myForm" method="post">
<input type="hidden" value="hello" id="myField">
<button id="myFormSubmit" type="submit">Submit</button>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</asp:Content>
The working example is based on Bootstrap 2.3.1, if you are importing Bootstrap 3.3.0, then a working example could be: http://bootply.com/va3EnHE0MJ