I have an incomprehensible problem in our web application. I have reduced the page to a minimum, here it is:
https://www.aschemeier.net/bug1.html
Everything works fine on the desktop. When I test the page either in the Firefox browser (screen size set to iPhone) or on an Android smartphone (Chrome browser), display errors occur when I open the drop-down menu at the bottom. In the mobile emulation on the desktop the touch input is registered after a few clicks about 200px further up, on the smartphone the picture jumps up and you can't scroll down anymore. If I reduce the height of the red framed container it works from a certain limit. If I don't open the menu to the left (dropleft) there are no problems either, but I need this function at this point.
I hope someone can help me. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Alle globalen, externen Javascript Dateien -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>bug sample</title>
</head>
<body>
<div class="container mb-5 mt-4">
<div class="card">
<div class="card-body" style="height:1000px; border:2px solid #f00;"></div>
</div>
<div class="mt-4">
<div class="row">
<div class="col-md-1 col-4">AB</div>
<div class="col-md-2 col-4">AB</div>
<div class="col-md-1 col-4">
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I would handle it by assigning an expander class into the parent row and toggle expander class on each button click.
Sample CSS:
.expanded-row {
min-height:30vh;
}
Toggling the class:
$( ".dropdown-toggle" ).click(function() {
$( ".row" ).toggleClass( "expanded-row" );
});
I hope it helps.
Related
On mobile devices, the Bootstrap modal is not centered correctly when the page is wider than 980px, leaving white space on the right of the screen.
I don't want to use a meta viewport that will zoom the page in as I need the full width to show on mobile devices.
The snippet below is using Bootstrap 5. I tried 3 and 4 too.
You can see in the screenshot that the modal div is positioned out of the screen and the backdrop doesn't cover the full width, leaving white space on the right and also pushing page content (the button) to the left.
<-- invisible whitespace in image
You can see it here with a phone or using chrome mobile device mode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</head>
<body class="text-center">
<style>
body {
width: 1035px;
}
#open-button {
font-size: 32px;
}
</style>
<!-- Button trigger modal -->
<button id="open-button" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div>
<img src="https://via.placeholder.com/1024" alt="">
</div>
<!-- Modal -->
<div class="modal fade mx-auto" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
I have an alert that has two problems, the first one is that it does not close when I click on the "X" button. I am using Bootstrap 5
This is the code
{{#if success}}
<div class="container p-4">
<div class="row">
<div class="col-md-auto mx-auto">
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{success}}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span area-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
{{/if}}
I was investigating and it seemed to be because I wasn't using the bootstrap script BUT I did have it at the time, so I looked for the most recent version and put it in the layout/main.hbs of my project, just below where the partials or other views are called (In <body>)
This is the script I found in the Bootstrap documentation, and it didn't work even with it
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body style="background-color:#2e2c25"> {{!-- #212529 navbar --}}
{{> navigation }}
{{{ body }}}
{{!-- Scripts --}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I tried to find some mistake of mine but I didn't find any that could affect that
The other problem I have with that alert is that the "X" for some reason doesn't look pretty, it looks in a white square, and there's a lot of spacing to the right, BUT this is minor, for now I'm only interested in the alert being able to close
REMOVE <span area-hidden="true">×</span>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title></title>
</head>
<body>
{{#if success}}
<div class="container p-4">
<div class="row">
<div class="col-md-auto mx-auto">
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{success}}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>
</div>
{{/if}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Try This Because you can use Bootstrap 5
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
there is a collapse (with button 2) inside of a another collaspe (with button 1).
when parent is collapsed the background color of button 1 is blue (bg- primary) and when its not collapsed the backpround color is yellow (bg- warning). when we click button 2, the color stays yellow but when button 2 clicked again and its collapsed, the color of button 1 changes to blue. I want to button 1 stays yellow when it is not collapsed whether her child is collapsed or not.
thank you and sorry for my bad english.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="my-2">
<button class="btn btn-primary" id="btn1" type="button" name="button" data-toggle="collapse" data-target="#collapsebtn" aria-expanded="false" aria-controls="collapsebtn">
button 1
</button>
</div>
<div class="collapse" id="collapsebtn">
<div class="mb-2">
<button class="btn btn-dark btn-sm" type="button" name="button" data-toggle="collapse" data-target="#collapsebtn2" aria-expanded="false" aria-controls="collapsebtn2">
button 2
</button>
</div>
<div class="collapse border border-primary" id="collapsebtn2">
Lorem ipsum dolor text....
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#collapsebtn").on("show.bs.collapse", function() {
$("#btn1").removeClass("btn-primary");
$("#btn1").addClass("btn-warning");
});
$("#collapsebtn").on("hidden.bs.collapse", function() {
$("#btn1").addClass("btn-primary");
$("#btn1").removeClass("btn-warning");
});
});
</script>
</body>
</html>
add this code:
$("#collapsebtn").on("hidden.bs.collapse", function() {
if(!$('#collapsebtn').hasClass('show')){
$("#btn1").addClass("btn-primary");
$("#btn1").removeClass("btn-warning");
}
});
I have properly linked the online bootstrap style sheet in html, but when I open the link, the 'Click here!' doesn't come in a button. How do I solve this?
Here's my code:
using btn-primary
This is the output:
No button there
To get the button, the <button> tag is used. And type is set on the basis of necessary like button, submit.
<div class="container">
<button type="button" class="btn btn-primary">Primary Button</button>
</div
For further detail, you can visit to https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
set button not div
<button type="button" class="btn btn-primary">Primary</button>
see here:https://getbootstrap.com/docs/4.0/components/buttons/
BUT IT WORK WITH DIV check if you have bootstrap script
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="btn btn-primary">Primary</div>
</div>
It should work with a div as well as button or anchor tag just try.
<div class="btn btn-primary">Primaray</div>
OR
<button type="button" class="btn btn-primary">Primary</button>
OR
Primary
I am trying to make a grid of buttons using bootstrap, however, when I change screen size on a desktop the layout jumps to the new position, i have seen in other questions that the answer was to change it to continer-fluid and row-fluid within the div, however this did not help.
My CSS and HTML is
.top-buffer
{ margin-top:10px;
margin-bottom: 10px;
}
<!-- Turn off zooming on Mobile page-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<p> This is the nav bar</p>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid">
<div class="row-fluid top-buffer"></div> <!-- this row is added in for iPhone Spacing. -->
<div class="row-fluid top-buffer"><!-- open the first row int he grid-->
<div class="col-md-4 col-md-offset-4"> <div class="col-sm-4 col-xs-4" >
<form action="page2JobMainMenu.html">
<button type="submit" class="btn btn-default center-block"> Job </button>
</form>
</div>
<div class=" col-sm-4 col-xs-4">
<form action= "page3CreateQuote.html">
<button type="button" class="btn btn-default center-block">
Quote </button>
</form>
</div>
<div class="col-sm-4 col-xs-4">
<form action="page4FinanceMainMenu.html">
<button type="button" class="btn btn-default center-block">
Finance</button>
</form>
</div>
</div><!--close off the cold md 4 div-->
</div><!-- Close the first row-->
</div><!-- Close the Fluid Container -->
</div><!--Close the Jumbotron-->
Any help is much appreciated.
Thanks
Your code basically works as is. Using col-xs-4 ensures that at even the smallest resolution the buttons will still retain their 3-column layout. It's not necessary to use col-md-4 in this instance, and .row-fluid has not been in use since Bootstrap 2. .center-block is also unnecessary as .btn-block is designed to treat Bootstrap Buttons as full-width elements.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<form action="page2JobMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
<div class="col-xs-4">
<form action="page3CreateQuote.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
<div class="col-xs-4">
<form action="page4FinanceMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
</div>
</div>
Note: If you can avoid using the <button> within a <form> you can make use of Bootstrap's .btn-group component for greater functionality.