I am having a modal, showing div in 'modal-body'.
<div class="modal-body">
<div class="scoll-tree">
<div class="history">
Report Event Details
</div>
<div class="history">
Report Event Details 1
</div>
<div class="history">
Report Event Details 2
</div>
<div class="history">
Report Event Details 3
</div>
</div>
</div>
Set the class as bellow :
.scoll-tree{
width: 400px;
height:80px;
overflow-x: scroll;
}
.history {
background: rgba(255, 255, 255, 0.7);
float: left;
min-width: 5em;
width: 25ex;
max-height: 3em;
margin: 2em;
padding: 1em;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 16px;
box-shadow: 2px 5px 5px rgba(0,0,0,0.2);
vertical-align: central;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I want horizontal scroll bar to 'scoll-tree' container, when 'history' div exceed the width.
Currently it give vertical scroll bar, i want only horizontal scroll bar.
https://jsfiddle.net/hemantmalpote/4duq2svh/35/
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div style="height:100px; width:100px; overflow-x:auto">
Content1
Content2
Content3
Content4
Content5
Content6
Content7
Content8
Content9
Content10
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Well not sure whether it is what you are looking for, but check it https://jsfiddle.net/4duq2svh/44/. I changed you css little bit,
.modal-body {
width: 400px;
overflow-x: scroll;
}
.scoll-tree{
width: 800px;//ideally you it is better to make js script which will calculate this value
height:80px;
}
Very Simple -
Just use max-width instead of width & set overflow-x: auto.
So it will be -
.scoll-tree{
max-width: 400px;
height:80px;
overflow-x: auto;
}
You may first set it to 200px for testing whether scroll appears or not.
Related
I have some bootstrap modals with images in them. Some of them are long vertically which makes a scrollbar appear. I tried to fix this by setting a max-height to the modal-content and having modal-body, where the image is inside of to be 100% of that. Now the backdrop is the height I set it to, but the image still extends past the container.
jsfiddle: https://jsfiddle.net/cLn52tqg/
.modal-content {
max-height: 85vh;
}
.modal-content>.modal-body {
max-height: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="modal fade show" id="modalImage2" tabindex="-1" aria-labelledby="allImage2" aria-hidden="true" style="display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header text-center">
<h2 class="modal-title w-100 text-dark" id="allImage2">image title</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img class="img-fluid" src="https://images.unsplash.com/photo-1564754943164-e83c08469116?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80" alt="">
<p class="modalText text-dark text-center mt-2">image description</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Seems like setting a max height is preventing the image to scale down inside the container. Setting height fixed the issue you can add a calc() function if you want to add some extra height into consideration.
.modal-content>.modal-body{
height: 70vh;
overflow: auto;
position: relative;
}
.modal-content>.modal-body > img{
object-fit: contain;
width: 100%;
height: 100%;
}
I setup a custom class for the modal content which will use display: grid for this -- it doesn't work in the tiny little snippet preview but if you run the snippet and view full page you will see it working nicely
.modal-content.grid-content {
display: grid;
grid-template-rows: auto 1fr auto;
height: calc( 100vh - 1.75rem - 1.75rem ); /* Account for vertical margin on parent */
}
.modal-content.grid-content .modal-body {
min-height: 0;
display: grid;
grid-template-rows: 1fr auto;
}
.modal-content.grid-content .modal-body > * {
min-height: 0;
}
.modal-content.grid-content .modal-body img {
display: block;
margin: auto;
max-height: 100%;
/* REMOVE THESE 2 LINES IF YOU WANT IMAGE TO CCENTER INSTEAD OF CROP */
object-fit: cover;
width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="modal fade show" id="modalImage2" tabindex="-1" aria-labelledby="allImage2" aria-hidden="true" style="display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content grid-content">
<div class="modal-header text-center">
<h2 class="modal-title w-100 text-dark" id="allImage2">image title</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img class="img-fluid" src="https://images.unsplash.com/photo-1564754943164-e83c08469116?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80" alt="">
<p class="modalText text-dark text-center mt-2">image description</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
So I've been trying to add a vertical scroll into my modal. It was a half-success.
The CSS and all are working fine but I'm having this weird margin-right that seems like can't be removed.
I tried to play around with the inspect element and nothing is working.
By the way, when I removed the overflow-y: auto the layout is okay (ofc, can't be scrolled)
So in my conclusion, the CSS overflow-y: auto is the one that creates that weird margin-right.
Can someone help me or explain this to me and How to remove it?
See the images attached for details.
PS. I think no need to post the code here since it's just CSS
/* View Menu-Modal */
.modalMenu {
float: none;
width: 100%;
height: 200px;
}
.modalMenu-img {
width: 100%;
height:100%;
object-fit:cover;
border-radius: 8px;
}
.modalPrice {
font-size: 24px;
line-height: 28px;
margin: 0px;
font-family: 'Barlow', sans-serif;
}
.modal-dialog {
height: 100% !important;
}
.modal-header {
border-bottom: 0px !important;
}
.modal-content {
border: 0px !important;
height: auto;
min-height: 80%;
border-radius: 12px;
}
.modal-body {
height: 70vh;
overflow-y: auto;
/*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
margin-right: 0px !important;
}
.modal-footer {
border-top: 0px !important;
}
#view-menu-modal::-webkit-scrollbar {
display:none
}
<!-- Modal -->
<div class="modal fade" id="viewMenuModal<?= $menu_id ?>" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
<div class="modalMenu mb-2">
<img class="modalMenu-img" src="images/img/stock/baby-back-ribs.jpeg" alt="blog-img">
</div>
<div class="content-right">
<h3><?= $menu_name ?></h3>
<p class="food-description"><?= $menu_desc ?></p>
<p class="modalPrice">₱ <?= $menu_price ?> </p>
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-lg primary-btnLink mb-1">Add to Order</button>
<button type="button" class="btn btn-lg secondary-ghostBtn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
</div>
</div>
</div>
</div>
This is the screenshot of the weird right-margin produced by the overflow-y: auto
See how it looks like
And this is the elements panel, weird that there's no right-margin value.
Weird margin-right
Full Inspect Element Panel
If you want to say that you have added a vertical scrollbar but it automatically overflows in the x-axis. Then add this property also overflow-x: hidden it will remove spaces on the right side or will remove the horizontally scrollbar.
Try setting the overflow-y to overlay. This should make the scrollbar appear only as an overlay, thus not affecting the width of your element!
.modal-body{
overflow-y: overlay;
}
You can use overflow-y: scroll; on your modal body. I changed your height to 200px to demonstrate. Also, for the margin, try just margin-right: 0; instead of scroll-margin-right
/* View Menu-Modal */
.modalMenu {
float: none;
width: 100%;
height: 200px;
}
.modalMenu-img {
width: 100%;
height:100%;
object-fit:cover;
border-radius: 8px;
}
.modalPrice {
font-size: 24px;
line-height: 28px;
margin: 0px;
font-family: 'Barlow', sans-serif;
}
.modal-dialog {
height: 100% !important;
}
.modal-header {
border-bottom: 0px !important;
}
.modal-content {
border: 0px !important;
height: auto;
min-height: 80%;
border-radius: 12px;
}
.modal-body {
/*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
height: 200px;
margin-right: 0px !important;
overflow: scroll;
}
.modal-footer {
border-top: 0px !important;
}
<!-- Modal -->
<div class="modal fade" id="viewMenuModal<?= $menu_id ?>" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
<div class="modalMenu mb-2">
<img class="modalMenu-img" src="images/img/stock/baby-back-ribs.jpeg" alt="blog-img">
</div>
<div class="content-right">
<h3><?= $menu_name ?></h3>
<p class="food-description"><?= $menu_desc ?></p>
<p class="modalPrice">₱ <?= $menu_price ?> </p>
<p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-lg primary-btnLink mb-1">Add to Order</button>
<button type="button" class="btn btn-lg secondary-ghostBtn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
</div>
</div>
</div>
</div>
in this your code working fine,if possible use bootstrap css and js
.modalMenu {
float: none;
width: 100%;
height: 200px;
}
.modalMenu-img {
width: 100%;
height:100%;
object-fit:cover;
border-radius: 8px;
}
.modalPrice {
font-size: 24px;
line-height: 28px;
margin: 0px;
font-family: 'Barlow', sans-serif;
}
.modal-dialog {
height: 100% !important;
}
.modal-header {
border-bottom: 0px !important;
}
.modal-content {
border: 0px !important;
height: auto;
min-height: 80%;
border-radius: 12px;
}
.modal-body {
height: 70vh;
overflow-y: auto;
/*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
margin-right: 0px !important;
}
.modal-footer {
border-top: 0px !important;
}
#view-menu-modal::-webkit-scrollbar {
/*display:none*/
}
<script src="https://cdnjs.cloudflare.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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#viewMenuModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="viewMenuModal" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
<div class="modalMenu mb-2">
<img class="modalMenu-img" src="https://image.freepik.com/free-psd/fast-food-concept-banner-template_23-2148777964.jpg" alt="blog-img">
</div>
<div class="content-right">
<h3><?= $menu_name ?></h3>
<p class="food-description"><?= $menu_desc ?></p>
<p class="modalPrice">₱ <?= $menu_price ?> </p>
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-lg primary-btnLink mb-1">Add to Order</button>
<button type="button" class="btn btn-lg secondary-ghostBtn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
</div>
</div>
</div>
</div>
I need my modal to have 3 elements in it:
To the left: a button
In the center: a title
To the right: the close button
When you look at my modal it seems like I achieved what I need, but in reality, my title is not centered. Here's my code:
.modal-dialog {
max-width: 90%;
}
.modal-header {
border: none;
}
.modal-title-filter {
color: #2D2D2D;
font-size: 1.2em;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Header -->
<div class="modal-header">
<button class="btn btn-primary">Limpiar filtros</button>
<h5 class="modal-title modal-title-filter w-100 text-center" id="exampleModalLabel">Filtros</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- /Header -->
the title is centered, centered with respect to its container h5, no to the modal-header, but if you want the title looks centered with respect to modal-header you can edit the margin-left of your title for that, try with this:
.modal-header .modal-title{
margin-left: -20px;
}
The higher the negative value the title will be moved to the left or more centered according to your taste.
I hope i was help you. Regards
You can achieve something like this by setting the display of the modal header to flex, and justifying the content by the space between the items.
Note: I had to add a thing of margin-left:0 to the close button as it has a declaration of margin-left:auto.
.modal-dialog {
max-width: 90%;
}
.modal-header {
border: none;
}
.modal-title-filter {
color: #2D2D2D;
font-size: 1.2em;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Header -->
<div class="modal-header d-flex justify-content-between align-items-center">
<button class="btn btn-primary">Limpiar filtros</button>
<h5 class="modal-title modal-title-filter" id="exampleModalLabel">Filtros</h5>
<button type="button" class="close" style="margin-left:0;" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- /Header -->
I am applying modal from Bootstrap but it is not closing properly. When I click on close button on top-right, it crashes and when I click anywhere else on modal it closes normally. I tried many times but this problem is constant.
html,
body {
height: 100%;
}
body {
padding-top: 20px;
background: #f9e0b5 ;
background-size:100%;
background-repeat: repeat-y;
}
.pro{
background:linear-gradient(white, #e7d5b5);
margin:10px 40px 0px;
height:250px;
border-radius:30px;
box-shadow:5px 5px 5px black;
cursor:pointer;
}
#pro4{
position:relative;
left:370px;
}
.pro-caption{
font-size:17px;
font-weight:bold;
font-family:"Comic Sans MS", cursive, sans-serif;
color:#6b412b;
background:linear-gradient(white, #f5e5d7);
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- row starts-->
<div class="row">
<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1">
<!--modal1-->
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog">
<!--modal1 content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title"> Fresh Milk:Bru Gold Coffee Machine</h3>
</div>
<div class="modal-body">
<img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px">
<h4><u><b>Key Features:</b></u></h4>
</div>
</div>
</div></div>
<figure><img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"></figure>
<figcaption class="pro-caption"> Fresh Milk:Bru Gold Coffee Machine</figcaption>
</div>
</div>
As you can see, you have set the data-target property to modal1 div, so you need to have seperate div i.e <div id="modal1"></div> where you can place your content which you have commented.
<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"></div>
Basically you have placed your content in the class that toggles the popup which you need to take that out and place it in <div id="modal1"></div>, the rest is fine.
Please try below code. I hope this helps you.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- row starts-->
<style>
html,
body {
height: 100%;
}
body {
padding-top: 20px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
background: #f9e0b5 /*#f9cf86*/ ;
background-size:100%;
background-repeat: repeat-y;
}
.pro{
background:linear-gradient(white, #e7d5b5);
margin:10px 40px 0px;
height:250px;
border-radius:30px;
box-shadow:5px 5px 5px black;
cursor:pointer;
}
#pro4{
position:relative;
left:370px;
}
.pro-caption{
font-size:17px;
font-weight:bold;
font-family:"Comic Sans MS", cursive, sans-serif;
color:#6b412b;
background:linear-gradient(white, #f5e5d7);
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"></div>
<div id="modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title"> Fresh Milk:Bru Gold Coffee Machine</h3>
</div>
<div class="modal-body">
<img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px">
<h4><u><b>Key Features:</b></u></h4>
</div>
</div>
</div>
</div>
</div>
<figure><img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"></figure>
<figcaption class="pro-caption"> Fresh Milk:Bru Gold Coffee Machine</figcaption>
<!--modal over-->`
</body>
</html>
remove aria-hidden="true" in your
×
I make the Scrollbar of page always visible by using the following code:
html {
overflow-y: scroll;
}
However, when opening Bootstrap modal, the main scrollbar is not available (visible but disabled) and when trying to some code as shown below does not solve the problem.
.modal-open {
overflow-y: scroll !important;
}
What I want to try the following approaches:
1) I want the main scrollbar is enabled even if modal is open
2) I want the scrollbar of the modal is visible automatically, but when I use overflow-y:scroll; the height of the modal-body cannot be increased automatically and scrollbar on the modal content seems to be disabled (when I set the height, scrollbar is enabled, but ı want to use auto height). Any idea?
Try to change this line:
.modal-open {
overflow-y: scroll !important;
}
to:
body.modal-open {
overflow: scroll !important;
}
The snippet:
body.modal-open {
overflow: scroll !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal
</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<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">Modal title</h4>
</div>
<div class="modal-body">
This is the modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div style="height: 1600px;"></div>