Indicators in Bootstrap 5 carousel not working; can't stop - carousel

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.

Related

Bootstrap 5 - How to set carousel captions positions

I have a Bootstrap 5 carousel with captions. Is it possible to add any class to the div containing the carousel-item or the carousel-caption to put the captions in the centre of the slide? Or I still need to use CSS as in older versions (below)? I tried align-middle and similar classes but without success.
Eg. Old solution from Fiddle:
.carousel-caption {
top: 0;
bottom: auto;
}
Can't really find a good combination of just using utility class to achieve what you want, but able to find a minimum way where still need to define a manual class :
.carousel-caption {
transform: translateY(50%);
}
and then add bottom-50 to carousel-caption. Since so it could rather just write
.carousel-caption {
transform: translateY(50%);
bottom: 50% !important;
}
LOL :)
#carouselExampleCaptions {
width: 600px;
height: 400px;
}
.carousel-caption {
transform: translateY(50%);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

How to open modal in vue

Currently, I'm making a modal in vue3
I would like to use the modal component provided by bootstrap.
I try to make the modal window pop up when I press the delete comment button.
Therefore, when the value of delete_show becomes true, the conditions were set so that the modal would appear.
However, modals do not appear.
Modal-related codes and component-related codes are located together in one component.
What should I do to make the modal appear?
<template>
<div
class="modal"
tabindex="-1"
v-if="delete_show == true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
댓글 삭제
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>댓글을 삭제하시겠습니까?</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
취소
</button>
<button
type="button"
#click="commentDelete"
class="btn btn-primary">
삭제
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="commentListWrapper">
<ul class="commentBoxWrapper">
<li class="comments">
<div class="commentArea">
<div class="commentAreaTop">
<div class="commentUser">
{{ userComment.userId }}
</div>
<div class="commentRating">
{{ userComment.starRate }}
</div>
</div>
<div
class="commentText"
v-if="edit">
{{ userComment.comment }}
</div>
<div
v-else
class="commentFixArea">
<textarea
class="commentFixBox"
v-model="userComment.comment"></textarea>
</div>
<div
v-if=" userComment.userId === this.$store.state.loginService.UserInfoObj.id && edit"
class="commentMethods">
<div class="commentFix">
<span #click="changeEdit">수정</span>
</div>
<div class="commentDelete">
<span #click="changeModalStatus">삭제</span>
</div>
</div>
<div
class="editButton"
v-else-if="!edit">
<button
type="button"
#click="commentFix"
class="btn btn-primary btn-sm">
저장
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>

Add scrollbar to bootstrap modal body

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.

why is this not collapsing in html

I have this code where the content supposed to collapse and only one set supposed to be present at a time. I have the correct libraries added, but once embedded in an html page, it doesnt work correctly. I cannot find the issue. It still displays the content at the same time. Code taken from http://jsfiddle.net/Sherbrow/nuNsp/83/
.collapse.in { min-height: 50px;border: 1px solid blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 id="myGroup">
<button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys </button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button>
<div class="accordion-group">
<div class="collapse indent" id="keys">
keys
</div>
<div class="collapse indent" id="attrs">
attrs
</div>
<div class="collapse" id="edit">
edit
</div>
</div>
</div>
Probably you are having issues with library versions.
Check below I have changed the bootstrap js and css versions same as in the example you provided.
.collapse.in { min-height: 50px;border: 1px solid blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myGroup">
<button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys </button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button>
<div class="accordion-group">
<div class="collapse indent" id="keys">
keys
</div>
<div class="collapse indent" id="attrs">
attrs
</div>
<div class="collapse" id="edit">
edit
</div>
</div>
</div>

Calling a modal from a Bootstrap popover

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 -->