I've been coding a website using bootstrap for most of the design. Up until around 2 days ago the website looked like this on Chrome:
[Link to screenshot] https://i.stack.imgur.com/JTkeO.png
The website still looks like that currently on Microsoft Edge (I haven't tried any other browsers yet), but on Chrome it currently looks like this: [Link to another screenshot] https://i.stack.imgur.com/giExv.png
Div tags are overlapping, the background is gone (which was done through custom CSS for the class "bg" in the code below), the sizing of the accordion is messed up and it doesn't work properly. Basically, the layout and design of the website is completely broken and I haven't changed the code at all. My Chrome is up to date so I don't believe that is the issue. Does anyone know what it could be?
Here is the code for the page in the screenshots above:
body, html {
height: 100%;
margin: 0;
}
.bg {
background-color: #FBAB7E;
background-image: linear-gradient(135deg, #FBAB7E 0%, #F7CE68 50%, #b60f11 100%);
min-height: 100%;
background-size: cover;
}
.heading {
height: 250px;
}
.accordion-button:not(.collapsed)::after {
filter: brightness(0%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Making sure every page has the required stylesheets and responsive meta tag -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rayan's Online Portfolio{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="/static/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="bg container-fluid">
<!-- A navbar at the top of every page -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item px-5">
<a class="nav-link" href="/" id="home">Home</a>
</li>
<li class="nav-item px-5">
<a class="nav-link" href="/about" id="about">About</a>
</li>
<li class="nav-item px-5">
<a class="nav-link" href="/projects" id="projects">Projects</a>
</li>
<li class="nav-item px-5">
<a class="nav-link" href="/contact" id="contact">Contact</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- A header which can be slightly modified for each page -->
<div class="container-fluid d-flex justify-content-center align-items-center flex-column heading">
<h1>Rayan's Online Portfolio</h1>
<h5>{% block page %}{% endblock %}</h5>
</div>
{% block body %}{% endblock %}
</div>
<!-- Bootstrap script for every page -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
{% extends "layout.html" %}
{% block page %}Projects{% endblock %}
{% block body %}
<div class="container">
<p>While I was learning to code in the summer of 2022, multiple people told me that the best way to learn was to do different coding projects. So as I was learning different things from online courses, I tried to implement that knowledge in the projects below. As you will see below, I wanted to carry out a variety of projects so I could learn about the different applications of coding and discover what I enjoyed doing. This page contains a short description about each project. If you would like to learn more about a particular project or see the code I wrote for it, you can visit the project's GitHub Repository which is linked to the name of each project. The projects are displayed in chronological order, from the one I started most recently down to my first ever coding project.</p>
<!-- Accordion will keep each project explanation so page is not too long -->
<div class="accordion" id="accordionExample">
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header border-dark" id="headingOne">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
This Website
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">This Website</a></h3></p>
<p>My latest project so far is this website, my online portfolio. I wanted to create a place where I could put all my hard work on display because a lot of the details that are included about projects on this website need to be left out on Resumes and other types of applications. Creating this taught me a lot about webpage design with HTML and CSS. It also made me more familiar with the different things I could do with Bootstrap. The back end for this website was relatively simple, although I did learn how to send emails from a web app (check out the Contact page).</p>
</div>
</div>
</div>
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
myJim
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">myJim</a></h3></p>
<p>myJim is a web app I am working on which allows people to create accounts, track their progress in the gym, and see the progress visually in the form of graphs that are generated by the data they input. I am using Python, Flask, and SQL along with HTML, CSS, and Javascript to implement this idea. So far, my main focus has been on getting the back end of the web app working which I have essentially finished. At this point users can register, login, and logout. They can also add data about the different exercises, weight, and reps they did on different days to an SQL database where the data for the web app is stored.</p>
<div class="container py-3"><p><img src="../static/myJim.png" class="img-fluid mx-auto"></p></div>
<p>Furthermore, they can see their progress over time visually with graphs generated by the matplotlib module for Python from the data in the SQL database.</p>
<div class="container py-3"><p><img src="../static/myJim3.png" class="img-fluid mx-auto"></p></div>
<p>I still need to make sure that users cannot mess up the web app with bad inputs into forms. However before I do that, I want to shift my focus onto the front end of the web app and make it look better.</p>
</div>
</div>
</div>
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Harvest Havoc
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">Harvest Havoc</a></h3></p>
</div>
</div>
</div>
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Blackjack
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">Blackjack</a></h3></p>
</div>
</div>
</div>
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
34
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">34</a></h3></p>
</div>
</div>
</div>
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header" id="headingSix">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
Cipher
</button>
</h2>
<div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">Cipher</a></h3></p>
</div>
</div>
</div>
</div>
</div>
<script>
let element = document.querySelector("#projects")
element.classList.add("active")
element.setAttribute("aria-current", "page")
/* Javascript to make changes to accordion button background when item is collapsed or open */
let accordion = document.querySelectorAll(".accordion-button");
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.target.classList.toggle("bg-transparent")
mutation.target.classList.toggle("text-dark")
observer.disconnect()
});
accordion.forEach(function(a) {
observer.observe(a, {
attributes: true,
attributeFilter: ["class"]
});
});
});
accordion.forEach(function(a) {
observer.observe(a, {
attributes: true,
attributeFilter: ["class"]
});
});
</script>
{% endblock %}
Related
I have an accordion where it has a flex-row textbox and it has icons on its right.
I need to add the menu positioned as shown in the image below
My code is here
<html>
<head>
<style>
.accordion {
margin: 30px;
}
.accordion-button.collapsed {
border-bottom: #ccc 1px solid
}
.accordion-body {
border-left: #673ab744 1px solid;
border-bottom: #673ab744 1px solid;
border-right: #673ab744 1px solid
}
.accordion-button {
display: inline!important
}
.flx-row {
display: flex;
justify-content: space-between;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<div class="flx-row">
<div>
<input type="textbox" value="Accordion Item #1">
</div>
<div>
<div class="btn-group">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button>
<ul class="dropdown-menu dropdown-menu-lg-end" style="">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
</div>
</div>
</div>
<br><span>Desc goes here</span><br><span>Desc goes here</span>
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
</div>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
<script type="text/javascript">
$(".wdelete").off().on('click', function(event) {
if (confirm(`Are you sure to delete the workflow ${$(this).prev().parent().prev().val()}?`) == true) {
$(this).closest('.accordion-item').remove();
}
event.preventDefault();
event.stopPropagation();
});
</script>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</body>
</html>
I think you're looking accordion like this
here's full code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.card-header-custom{
display: flex;
justify-content:space-between;
}
</style>
</head>
<body>
<div class="container mt-3">
<div id="accordion">
<div class="card">
<div class="card-header card-header-custom">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
Accordion Item #1
</a>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
More
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
</div>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
Accordion Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
Accordion Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Having a small, weird, issue in which my drop down menu works properly once on the main page of my MVC application. If I close the drop down and try to open it again it wont work, however if I go to a different page from the drop down, I can open and close it as much as I want and it will work just fine, the issue only occurs on the main Home page of the application.
Below is my _layout.cshtml code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Name Here</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: crimson">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: antiquewhite">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" #Html.ActionLink("Home", "Index", "Home")</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" #Html.ActionLink("About Us", "About", "Home")</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" #Html.ActionLink("Visit Us", "Visit", "Home")</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/umd/popper.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
This is my code for the main Home page:
#{
ViewBag.Title = "Home Page";
}
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="4000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="~/Images/img1.jpg" class="d-block w-100" alt="1">
</div>
<div class="carousel-item">
<img src="~/Images/img2.jpg" class="d-block w-100" alt="2">
</div>
<div class="carousel-item">
<img src="~/Images/img3.jpg" class="d-block w-100" alt="3">
</div>
<div class="carousel-item">
<img src="~/Images/img4.jpg" class="d-block w-100" alt="3">
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
My About Us and Visit Us page have the default info from Visual Studio when you first create your MVC project with prebuild views.
If additional info is needed please do let me know. Thanks in advance.
I'm currently studying Bootstrap 4 and was creating a Bootstrap 4 template for my personal study. However, the following code creates a left to right scrollbar on the website when you look at in the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Practice</title>
<meta name="viewport" content="wdith-device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style>
.Box{padding: 60px 10px; background: #ddd}
.Box:nth-child(even){background: #eee;}
h1, h2{margin: 30px 0;}
.container-fluid, .container{max-width:1400px;}
.carousel-indicators li {width: 10px; height: 10px; border-radius: 100%;}
/* .navbar-brand{position: relative;}
.custom-nav{position: absolute;}*/
</style>
</head>
<body>
<!-- MODAL POPUP -->
<div class="modal fade" id="modalExample">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"> Modal Title </h2>
<button class="close" type="button" data-dismiss="modal">X</button>
</div>
<div class="modal-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
</div>
</div> <!-- end .modal-content -->
</div> <!-- end .modal-dialog -->
</div> <!-- end .modal -->
<!-- MODAL END-->
<nav class="navbar navbar-expand-lg navbar-light bg-light row">
<a class="navbar-brand col-1 border border-primary" href="#">Navbar</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-11 custom-nav border border-primary" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Tab 1</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Tab</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div></li>
<li class="nav-item"><a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Tab 2</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="carousel slide" id="ExampleSlide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#ExampleSlide" data-slide-to="0" class="active"></li>
<li data-target="#ExampleSlide" data-slide-to="1"></li>
<li data-target="#ExampleSlide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="1.png">
<div class="carousel-caption"><h5>Image 1</h5></div>
</div>
<div class="carousel-item">
<img class="w-100" src="2.png">
<div class="carousel-caption"><h5>Image 2</h5></div>
</div>
<div class="carousel-item">
<img class="w-100" src="3.png">
<div class="carousel-caption"><h5>Image 3</h5></div>
</div>
</div>
<a class="carousel-control-prev"href="#ExampleSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next"href="#ExampleSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<div class="jumbotron jumbotron-fluid row">
<div class="offset-1 col-10">
<h1 class="display-1">Heading 1</h1>
<p class="h1">"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p class="lead">Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
</div>
<div class='container'>
<!-- ACCORDION -->
<div class="card-group" id="exampleAccordion">
<div class="card">
<div class="card-header text-white bg-primary">
<h3 class="card-title" data-target="#card-1" data-toggle="collapse">Accordion Example 1</h3>
</div>
<div class="collapse" id="card-1">
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->
<!-- Accordion은 기본적으로 열리고 닫히는 dropdown과 비슷한 기능을 가진 element라고 보면 된다. -->
<!-- Accordion은 collapse를 사용하여 만든다. -->
<div class="card-deck">
<div class="card">
<div class="card-header text-white bg-primary">
<h1>Heading 1</h1>
</div>
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p>Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
<div class="card-footer">
<p>More Info</p>
</div>
</div>
<div class="card">
<div class="card-header text-white bg-danger">
<h1>Heading 1</h1>
</div>
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p>Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
<div class="card-footer">
<p><span data-toggle="modal" data-target="#modalExample">More Info</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
$(".nav li a").on("click", function(){
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
$('.carousel').carousel({
pause: false,
});
</script>
</body>
</html>
I can't find the reason why this might be... Does anybody know why this is happening? I want the web page to be just 100% on the screen, not having to scroll from left to right.
https://jsfiddle.net/8wvszpqa/
*edit: The scrollbar I'm meaning is one the picture below:
I am not sure about your issue but tryin to help. Remove those codes from your script to get rid of the bar.
<div class="container">
<div class="carousel slide" id="ExampleSlide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#ExampleSlide" data-slide-to="0" class="active"></li>
<li data-target="#ExampleSlide" data-slide-to="1"></li>
<li data-target="#ExampleSlide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="1.png">
<div class="carousel-caption">
<h5>Image 1</h5>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="2.png">
<div class="carousel-caption">
<h5>Image 2</h5>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="3.png">
<div class="carousel-caption">
<h5>Image 3</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#ExampleSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#ExampleSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
I have a fairly simple HTML template that I cannot get to work. It's baffling me.
I'm using a Jinja2 Template in a flask app to display a page using Twitter Bootstrap:
This is the code that I have:
{% extends "layout.html" %}
{% block description %}{{ description }}{% endblock %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container">
<h2 class="text-center" style="margin-top: 2rem;">Webinars on the Cutting Edge of Data Science</h2>
<p class="text-center">Two hour webinars on the latest topics in data science. We break down things like the newest in data science research, deep learning, and the newest techniques within the field.</p>
<hr>
<div class="row">
<div class="col-md-8">
<h3>Next Episode: {{ current_webinar['title'] }}</h3>
<hr>
<p><strong>Date:</strong> {{ current_webinar['date'] }}<br> <strong>Time: </strong> 6:30-8:30 EST</p>
<p><strong>Description: </strong>{{ current_webinar['description'] }}</p>
Learn More
</div>
<div class="col-md-4">
{% set current_webinar_img = current_webinar['path'][7:] | replace('\\', '/') %}
<img src="{{ url_for('static', filename=current_webinar_img) }}" height="350" width="100%">
</div>
</div>
<div class="row">
<h3 class="text-center">My Heading Make It Longer To See What Happens</h3>
<p>This is my paragraph</p>
Learn More
</div>
</div>
{% endblock %}
The issue I have is that all of the material in the second row class does not show up correctly.
I would expect that block to have the title followed by a paragraph, but instead everything appears on one line:
I find this bizarre and can't detect what's causing the changes. It is a simple template and as far as I can tell there is no error in my html/css, and I'm not aware of any problems in my jinja template that would cause things to render incorrectly.
FWIW here is the HTML of the entire page once it's rendered:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Two hour webinars held every two weeks on data science">
<meta name="author" content="Jonathan Bechtel">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/styles.css">
<link rel="stylesheet" href="/static/css/jumbotron.css">
<title>Live data science webinars</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Teaching</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="/data-science-part-time-class">Part Time Class</a>
<a class="dropdown-item" href="/webinars">Webinars</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</div>
</nav>
<main role="main">
<div class="container">
<h2 class="text-center" style="margin-top: 2rem;">Webinars on the Cutting Edge of Data Science</h2>
<p class="text-center">Two hour webinars on the latest topics in data science. We break down things like the newest in data science research, deep learning, and the newest techniques within the field.</p>
<hr>
<div class="row">
<div class="col-md-8">
<h3>Next Episode: Tensorflow Deep Dive, Vol. 2</h3>
<hr>
<p><strong>Date:</strong> 2020-07-08<br> <strong>Time: </strong> 6:30-8:30 EST</p>
<p><strong>Description: </strong>In this workshop, we'll learn the fundamentals and basics of Tensorflow.</p>
Learn More
</div>
<div class="col-md-4">
<img src="/static/img/life_sciences.png" height="350" width="100%">
</div>
</div>
<div class="row">
<h3 class="text-center">My Heading Make It Longer To See What Happens</h3>
<p>This is my paragraph</p>
</div>
</div>
</main>
<footer class="container">
<p>© Company 2017-2020</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
IMO the code is correct. Make sure the /static/css/styles.css doesn't contain any bad CSS definitions, then try to clear the browser cache.
I have unexpected page scrolling when try to collapse or expand elements of the accordion. Maybe I just doing something wrong with bootstrap grid system? Here is example of page:
How can I avoid this irritative effect?
jsfiddle available https://jsfiddle.net/Lfwvtyms/1/
<body>
<!--default navbar here-->
<main>
<h1>Long long long long long long header header header header header header lng lasd lewq j</h1>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="task-list">
<div id="accordion" role="tablist" aria-multiselectable="true" class="panel-group">
<div class="panel panel-default">
<div id="headingOne" role="tab" class="panel-heading"><h4 class="panel-title"><a
data-toggle="collapse" data-target="#collapseOne" href="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">First list</a></h4></div>
<div id="collapseOne" role="tabpanel" aria-labelledby="headingOne"
class="panel-collapse collapse in">
<ul class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
<li class="list-group-item">Item3</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div id="headingTwo" role="tab" class="panel-heading"><h4 class="panel-title"><a
data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">Another list</a></h4></div>
<div id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo"
class="panel-collapse collapse in">
<ul class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
<li class="list-group-item">Item3</li>
</ul>
</div>
</div>
</div>
</div>
<div id="someDiv">
<div class="row">
<div class="col-xs-12">
<div id="dummy">Div with fixed height here</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid">my footer here</footer>
</body>
I had same problem (jump to the top on click to the link which was triggering the collapse toggle)
the href="#" was changed to href="javascript:void(0);" and it is working great (toggling collapse without any scrolling to the top)
Replace the href properties on the a elements to # rather than, for example, #collapseOne
instead of this:
<a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
do this
<a data-toggle="collapse" data-target="#collapseTwo" href="#"
aria-expanded="true" aria-controls="collapseTwo">
I had the same issue. It turns out the href causes the problem. If you don't want the page to scroll at all when you collapse/expand, which is what I wanted, then simply remove the href altogether. Leaving it as # still made the screen scroll to the top for me.
did not work for me:
<a data-toggle="collapse" data-target="#collapseOne" href="#SectionOne"></a>
<a data-toggle="collapse" data-target="#collapseOne" href="#"></a>
worked:
<a data-toggle="collapse" data-target="#collapseOne"></a>
See my update here:
https://jsfiddle.net/Lfwvtyms/5/
I had the same problem and I found my solution with this answer on another post.
Nothing else worked except for this tiny piece of Javascript added to my custom .js file. It smoothly brings the focus back to the selected panel title. The only thing I changed to suit my design was the distance to the top, on line 6.
https://stackoverflow.com/a/38180220/4844273
$('#accordion').on('shown.bs.collapse', function () {
var panel = $(this).find('.in');
$('html, body').animate({
scrollTop: panel.offset().top - 130
}, 500);
});
Another option is to use buttons instead of anchor links, so that no href is triggered in the first place. For example, instead of the first <a>:
<button data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
First list
</button>
There are lots of examples using <button> instead of <a> in this documentation.
You can override the click handler and use the preventDefault() method on the click event:
$('.aHandler').click( function(event) {
event.preventDefault();
...
});
Where the 'aHandler' is a class on your 'a' tags: <a class="aHandler" ...>...</a>, or is any other valid jquery selector.
This would definitely work if you are out of options:
$('.panel-group').on('click', function(){
$('html,body').stop();
});