I am trying to learn webcomponents and I'm trying to take a simple bootstrap example and turn it into some basic components. A list component and an item component.
I am using the "List Group" example as my template:
https://getbootstrap.com/docs/5.2/examples/sidebars/
For some reason, all the other bootstrap styles work just fine (as long as I don't use the shadowDOM) but the scroll area will not work. There are no errors in the console (the joy of web development), the list just cuts off at the end.
So the output of my static conent (which works) is IDENTICAL (compared it using notepad++) the only difference is that the HTML that makes up the component is wrapped in the cusomeElement tag that I made.
Here is an example you can copy paste into a text file, save as example.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Target Reason Administration
</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"></script>
<style>
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
main {
display: flex;
flex-wrap: nowrap;
height: 100vh;
height: -webkit-fill-available;
max-height: 100vh;
overflow-x: auto;
overflow-y: hidden;
}
.bv-divider {
flex-shrink: 0;
width: 0.5rem;
height: 100vh;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.bh-divider {
height: 0.5rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.bi {
vertical-align: -.125em;
pointer-events: none;
fill: currentColor;
}
.scrollarea {
overflow-y: auto;
}
</style>
</head>
<body>
<main class="d-flex flex-nowrap">
<div class="align-items-stretch bg-white d-flex flex-column flex-shrink-0" style="width: 380px;">
<a class="align-items-center border-bottom d-flex flex-shrink-0 link-dark p-3 text-decoration-none" href="/">
<span class="fs-5 fw-semibold">Works without Component</span>
<button class="btn" style="opacity: 0" type="button">Hidden for alignment</button>
</a>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea overflow-auto">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
</div>
</div>
<div class="bv-divider"></div>
<cpr-category-list>
<div class="align-items-stretch bg-white d-flex flex-column flex-shrink-0" style="width: 380px;">
<a class="align-items-center border-bottom d-flex flex-shrink-0 link-dark p-3 text-decoration-none" href="/">
<span class="fs-5 fw-semibold">Dead when wrapped by component</span>
<button class="btn" style="opacity: 0" type="button">Hidden for alignment</button>
</a>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
</div>
</div>
</cpr-category-list>
</main>
</body>
</html>
Just make sure your browser window is small enough to cut off some list items and you should see that the list on the left gets scroll bars while the list on the right (wrapped in a custom element) does not.
I have not included the component itself (it's proprietary) but the result is the same.
I have 2 questions:
why does some styling work inside the custom element and some does not?
how can I get the scrolling to work inside my component?
Thanks everyone for you time and attention.
Related
I have this code, for my ejs page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="img/logo/logo.png" rel="icon">
<title>RuangAdmin - Dashboard</title>
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/ruang-admin.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav sidebar sidebar-light accordion" id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<div class="sidebar-brand-icon">
<img src="img/logo/logo2.png">
</div>
<div class="sidebar-brand-text mx-3">RuangAdmin</div>
</a>
<hr class="sidebar-divider my-0">
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<hr class="sidebar-divider">
<div class="sidebar-heading">
Features
</div>
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseBootstrap"
aria-expanded="true" aria-controls="collapseBootstrap">
<i class="far fa-fw fa-window-maximize"></i>
<span>Bootstrap UI</span>
</a>
<div id="collapseBootstrap" class="collapse" aria-labelledby="headingBootstrap" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Bootstrap UI</h6>
<a class="collapse-item" href="alerts.html">Alerts</a>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="dropdowns.html">Dropdowns</a>
<a class="collapse-item" href="modals.html">Modals</a>
<a class="collapse-item" href="popovers.html">Popovers</a>
<a class="collapse-item" href="progress-bar.html">Progress Bars</a>
</div>
</div>
</li>
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people
say this to all dogs, even if they aren't good...</div>
<div class="small text-gray-500">Jaenab · 2w</div>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-tasks fa-fw"></i>
<span class="badge badge-success badge-counter">3</span>
</a>
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">
Task
</h6>
<a class="dropdown-item align-items-center" href="#">
<div class="mb-3">
<div class="small text-gray-500">Design Button
<div class="small float-right"><b>50%</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a class="dropdown-item align-items-center" href="#">
<div class="mb-3">
<div class="small text-gray-500">Make Beautiful Transitions
<div class="small float-right"><b>30%</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a class="dropdown-item align-items-center" href="#">
<div class="mb-3">
<div class="small text-gray-500">Create Pie Chart
<div class="small float-right"><b>75%</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">View All Taks</a>
</div>
</li>
<div class="topbar-divider d-none d-sm-block"></div>
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img class="img-profile rounded-circle" src="img/boy.png" style="max-width: 60px">
<span class="ml-2 d-none d-lg-inline text-white small">Maman Ketoprak</span>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- Topbar -->
<!-- Container Fluid-->
<div class="container-fluid" id="container-wrapper">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
</ol>
</div>
<div class="row mb-3">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Earnings (Monthly)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-primary"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Annual) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Sales</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">650</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>
<span>Since last years</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-shopping-cart fa-2x text-success"></i>
</div>
</div>
</div>
</div>
</div>
<!-- New User Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">New User</div>
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">366</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 20.4%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-users fa-2x text-info"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Pending Requests Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Pending Requests</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>
<span>Since yesterday</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-comments fa-2x text-warning"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Area Chart -->
<div class="col-xl-8 col-lg-7">
<div class="card mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Monthly Recap Report</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
aria-labelledby="dropdownMenuLink">
<div class="dropdown-header">Dropdown Header:</div>
<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>
</div>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="myAreaChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Pie Chart -->
<div class="col-xl-4 col-lg-5">
<div class="card mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Products Sold</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle btn btn-primary btn-sm" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Month <i class="fas fa-chevron-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
aria-labelledby="dropdownMenuLink">
<div class="dropdown-header">Select Periode</div>
<a class="dropdown-item" href="#">Today</a>
<a class="dropdown-item" href="#">Week</a>
<a class="dropdown-item active" href="#">Month</a>
<a class="dropdown-item" href="#">This Year</a>
</div>
</div>
</div>
<div class="card-body">
<div class="mb-3">
<div class="small text-gray-500">Oblong T-Shirt
<div class="small float-right"><b>600 of 800 Items</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<div class="small text-gray-500">Gundam 90'Editions
<div class="small float-right"><b>500 of 800 Items</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 70%" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<div class="small text-gray-500">Rounded Hat
<div class="small float-right"><b>455 of 800 Items</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 55%" aria-valuenow="55"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<div class="small text-gray-500">Indomie Goreng
<div class="small float-right"><b>400 of 800 Items</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<div class="small text-gray-500">Remote Control Car Racing
<div class="small float-right"><b>200 of 800 Items</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="card-footer text-center">
<a class="m-0 small text-primary card-link" href="#">View More <i
class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
<!-- Invoice Example -->
<div class="col-xl-8 col-lg-7 mb-4">
<div class="card">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Invoice</h6>
<a class="m-0 float-right btn btn-danger btn-sm" href="#">View More <i
class="fas fa-chevron-right"></i></a>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Item</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>RA0449</td>
<td>Udin Wayang</td>
<td>Nasi Padang</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>Detail</td>
</tr>
<tr>
<td>RA5324</td>
<td>Jaenab Bajigur</td>
<td>Gundam 90' Edition</td>
<td><span class="badge badge-warning">Shipping</span></td>
<td>Detail</td>
</tr>
<tr>
<td>RA8568</td>
<td>Rivat Mahesa</td>
<td>Oblong T-Shirt</td>
<td><span class="badge badge-danger">Pending</span></td>
<td>Detail</td>
</tr>
<tr>
<td>RA1453</td>
<td>Indri Junanda</td>
<td>Hat Rounded</td>
<td><span class="badge badge-info">Processing</span></td>
<td>Detail</td>
</tr>
<tr>
<td>RA1998</td>
<td>Udin Cilok</td>
<td>Baby Powder</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>Detail</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer"></div>
</div>
</div>
<!-- Message From Customer-->
<div class="col-xl-4 col-lg-5 ">
<div class="card">
<div class="card-header py-4 bg-primary d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-light">Message From Customer</h6>
</div>
<div>
<div class="customer-message align-items-center">
<a class="font-weight-bold" href="#">
<div class="text-truncate message-title">Hi there! I am wondering if you can help me with a
problem I've been having.</div>
<div class="small text-gray-500 message-time font-weight-bold">Udin Cilok · 58m</div>
</a>
</div>
<div class="customer-message align-items-center">
<a href="#">
<div class="text-truncate message-title">But I must explain to you how all this mistaken idea
</div>
<div class="small text-gray-500 message-time">Nana Haminah · 58m</div>
</a>
</div>
<div class="customer-message align-items-center">
<a class="font-weight-bold" href="#">
<div class="text-truncate message-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="small text-gray-500 message-time font-weight-bold">Jajang Cincau · 25m</div>
</a>
</div>
<div class="customer-message align-items-center">
<a class="font-weight-bold" href="#">
<div class="text-truncate message-title">At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis
</div>
<div class="small text-gray-500 message-time font-weight-bold">Udin Wayang · 54m</div>
</a>
</div>
<div class="card-footer text-center">
<a class="m-0 small text-primary card-link" href="#">View More <i
class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--Row-->
<div class="row">
<div class="col-lg-12 text-center">
<p>Do you like this template ? you can download from <a href="https://github.com/indrijunanda/RuangAdmin"
class="btn btn-primary btn-sm" target="_blank"><i class="fab fa-fw fa-github"></i> GitHub</a></p>
</div>
</div>
<!-- Modal Logout -->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Ohh No!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to logout?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
Logout
</div>
</div>
</div>
</div>
</div>
<!---Container Fluid-->
</div>
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>copyright © <script> document.write(new Date().getFullYear()); </script> - developed by
<b>indrijunanda</b>
</span>
</div>
</div>
</footer>
<!-- Footer -->
</div>
</div>
<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/ruang-admin.min.js"></script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="js/demo/chart-area-demo.js"></script>
</body>
</html>
Just a regular page that is called dashboard.ejs. the file structure is like so:
In the views folder, i have this dashboard.ejs page inside of it. in my index.js file, i have this:
//defining applications necessities
const {
response
} = require("express");
var express = require("express");
const session = require('express-session');
var ibmdb = require("ibm_db");
const {
render,
name
} = require("ejs");
const {
resolveSoa,
CONNREFUSED
} = require("dns");
const {
Console
} = require("console");
const path = require('path');
//DEFINING APP SETTINGS
const app = express();
app.set("view engine", "ejs");
app.use(express.static("public"));
app.use(express.static(__dirname + '/public'));
app.use("/public/css/images", express.static("./public/css/images"));
app.use(express.json());
app.use(
express.urlencoded({
extended: true,
})
);
problem is, when i run this, and i try to go to dashboard.ejs, it looks like this:
I am not sure why it is not rendering the CSS properly. The CSS is in public/css, and I've defined that route in the index.js file, and it is in the root directory. How can I fix this?
in my project I want to show statistics for the current month and the current year. To split this statistics I created a card with tabs that split month and year.
The month tab is loaded as default. If i now go on the year tab everything is loading but then it will load unlimited empty "stuff / white data" (I don't know how to explain it better), and you can't use this tab because the site will be bigger and bigger. There is also no error in the
This has first been poped up after I changed alle my charts (chart.js) to an dynamic way that you can go e.g. to the next month or the month before. If I load all charts with "fixed" data then the tab works correctly.
What is the problem?
Actual look:
How it has to be looked:
After some testing i see this:
Code snippet:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-header">
<div>
<ul class="nav nav-pills nav-fill mt-4" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-bs-toggle="tab" href="#Month" role="tab">
<span><strong>Current Month</strong></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#Year" role="tab">
<span><strong>Current Year</strong></span>
</a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="month"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-month" id="last-month"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-month" id="current-month">Current Month</button>
<button class="btn btn-info next-month" id="next-month"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="monthly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="monthy_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="monthly_training_days"></h2>
<h2 class="card-title text-white" id="monthly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="monthy_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="monthly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="Year" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="year"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-year" id="last-year"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-year" id="current-year">Current Year</button>
<button class="btn btn-info next-year" id="next-year"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="yearly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="yearly_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="yearly_training_days"></h2>
<h2 class="card-title text-white" id="yearly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="yearly_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="yearly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
After a lot of researching and reading i found the solution for this problem.
The problem occurs because of the hidden content from the hidden tab, which is realized in Bootstrap via "display: none".
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none; /* this is the problem */
}
To fix this problem you can use height: 0 and overflow-y: hidden to this . Now the charts will stay in place and no empty random space will created.
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}
It will take a little minute to go through that line by line but some of the problem is sure to be your structure of Rows and Columns. I noticed this in the first few lines - Just inside the tab-content is this...
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
With Bootstrap you're not really meant to have the Row's inside the Column's and I think what's happening is that the un-natural layout of the code is creating errors like the one you see. This answer does not discover where your white-space is coming from but I do suspect that fixing the layout of the code will also fix the white-space.
<div id="schedulelist" class="list-group">
<label class="sclist" for="sclist">List</label>
<input id="sclist" type="checkbox">
<c:forEach items="${datelist}" var="list" varStatus="status" >
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight"
aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">${"Day"} ${status.count}</strong>
<small>${list}</small>
</div>
<div class="col-10 mb-1 small">${city.name}</div>
</a>
</c:forEach>
</div>
Above is my code. When 1day is clicked, I want to change the background color corresponding to 1day's div to red.
And when 2day is clicked, I want to return the color of 1day back to blue and change the background color to red only for 2day.
How can I do this?
Have a look at this
CSS could be this
#schedulelist a strong:active { background-color: red }
and you could use checkboxes too in combination with the + selector.
Here I use JavaScript
const schedulelist = document.getElementById("schedulelist");
const items = schedulelist.querySelectorAll("a strong")
const activate = e => {
const tgt = e.target;
items.forEach(item => item.classList.remove("active"));
if (tgt.tagName==="STRONG") tgt.classList.add("active");
};
schedulelist.addEventListener("click",activate)
//schedulelist.addEventListener("mouseover",activate)
#schedulelist a strong { background-color: blue }
/* #schedulelist a strong:active { background-color: red } */
#schedulelist a strong.active { background-color: red }
<div id="schedulelist" class="list-group">
<label class="sclist" for="sclist">List</label>
<input id="sclist" type="checkbox">
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">1</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">A</div>
</a>
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">2</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">B</div>
</a>
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">3</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">C</div>
</a>
</div>
Good day,
I am working on this project of mine but unfortunately I'm not skilled enough yet to fix the following problem I have been trying to solve for some time now. I have a webpage that shows the amount of calories that someone needs to consume to hit their training goals. Based on a 3 options radio input selection I want to show 3 different images on the output page based on the selection they made. This can be weight loss, maintenance or muscle gain.
The code is as following:
Code for the input of the goal:
<!-- Goal -->
<div class="row px-md-5 mrow" id="rowtwo">
<div class="col-12 py-5">
<div class="text-center">
<h2 class="text-primary">2. Wat is je doel?</h2>
</div>
</div>
<div class="col-12 col-md-12">
<ul class="row radio-group-goal d-flex flex-stretch p-0 m-0">
<li class="radio col-md-6 selected d-flex flex-stretch mb-2" data-goal="Afvallen / Lager vetpercentage" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100 greenborder">
<h6 class="text-left"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-weight text-primary mr-2"></i> Afvallen / Lager vetpercentage</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">minder kcal/koolhydraten</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Gezonde levensstijl" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-carrot text-primary mr-2"></i> Gezonde levensstijl</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">Gezond</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Aankomen / Meer spiermassa" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-dumbbell text-primary mr-2"></i> Aankomen / Meer spiermassa</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">muscle</p> -->
</div>
</li>
</ul>
</div>
Code for the output:
<div class="col-12 col-md-6">
<div class="row">
<div class="col-12 col-md-6 mb-4 d-flex flex-stretch">
<div class="youchoose-box px-4 py-5 d-flex align-items-center justify-content-center flex-column bg-white rounded shadow-sm w-100" style="border:1px solid white;">
<i class="fas fa-trophy text-center text-primary mb-2"></i>
<!-- <p class="mb-0 text-center">Doel</p> -->
<h5 class="text-primary text-center">
<?php echo $_POST['radio-value'];?>
</h5>
</div>
</div>
//The image I want to change based on the radio value:
<div class="container pb-5">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center rounded shadow-sm">
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/Macro-split.png">
</div>
</div>
</div>
</div>
<!-- save values and send to next pages -->
<input type="hidden" id="radio-value" name="radio-value" value="<?php echo $_POST['radio-value']?>" />
I hope you can guide me in the right direction as I am now on the basics of understanding Javascript.
Thank you in advance!
Assuming your value is coming through in $_POST['radio-value'] the basic way to do this would be with an if statement to check if one of the 3 values is set, and then set which image that value corrresponds to:
//The image I want to change based on the radio value:
<?php
$image = 'default.png';
if (isset($_POST['radio-value'])) {
if ($_POST['radio-value'] == 'value for image 1') {
$image = 'value1image.png';
} else if ($_POST['radio-value'] == 'value for image 2') {
$image = 'value2image.png';
} else if ($_POST['radio-value'] == 'value for image 3') {
$image = 'value3image.png';
}
}
?>
Then in your image src:
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/<?php echo $image;?>">
I've managed to add an alphabetical filter on my index page.
My code gets inspired by this Bootsnip here: https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category. This Bootsnip is based on Bootstrap 3.3
My index page is based on Bootstrap 4 Beta.
Is there any reason why there is no fade effect when I click on a letter to filter albums?
UPDATE:
I have updated the code according to the answer below. I'm now using Bootstrap cards but I'm still stuck with animations when I apply filter: no fade or smooth effect...
Here is my new fiddle: https://jsfiddle.net/md8fkm0d/5/
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all") {
$('.filter').show('1000');
}
else {
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
body {
font-family: Arial;
font-size: 14pt;
font-weight: bold;
color: #cc6110;
background-color: #e3e0ce; /* Nenesse 8/17/2017: New color */
background-image: url(images/background-woodenfloor.jpg); /* Nenesse 8/16/2017: New background image */
}
.title {
font-size : 24pt;
font-weight: bold;
color: #cc6110; /* Nenesse 8/16/2017: New color */
}
img {
border: 0;
}
a {
font-size: 14pt;
color: #285e80; /* Nenesse 8/16/2017: New color instead of #FFFFFF */
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #cc6110;
}
a:hover img#thumbimage {
text-decoration: none;
}
.artist { /* Nenesse 8/16/2017: New class for different color */
color: #285e80;
font-size:12pt;
font-weight:bold;
}
.album { /* Nenesse 8/16/2017: new class for different color */
color: #cc6110;
font-size:10pt;
font-weight:bold;
}
.navigationline {
padding: 2px 0px;
}
.btn-info {
background-color: #285e80;
border-color: #cc6110;
}
.btn-info:hover {
background-color: #cc6110;
border-color: #285e80;
}
.filter-button {
font-size: 18px;
border: 1px solid #cc6110;
border-radius: 5px;
text-align: center;
color: #cc6110;
margin-bottom: 30px;
}
.filter-button:hover {
font-size: 18px;
border: 1px solid #cc6110;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #285e80;
}
.btn-default:active .filter-button:active {
background-color: #285e80;
color: white;
}
.card {
margin-top: 30px;
}
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Album List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"></link>
<link rel="StyleSheet" type="text/css" href="enhanced exportindex_wood.css"></link>
<meta http-equiv="cache-control" content="no-cache"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12" style="color: #cc6110;" align="center">
<h1 class="title">Album List</h1>
</div>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="letterA">A</button>
<button class="btn btn-default filter-button" data-filter="letterB">B</button>
<button class="btn btn-default filter-button" data-filter="letterC">C</button>
<button class="btn btn-default filter-button" data-filter="letterD">D</button>
<button class="btn btn-default filter-button" data-filter="letterE">E</button>
<button class="btn btn-default filter-button" data-filter="letterF">F</button>
<button class="btn btn-default filter-button" data-filter="letterG">G</button>
<button class="btn btn-default filter-button" data-filter="letterH">H</button>
<button class="btn btn-default filter-button" data-filter="letterI">I</button>
<button class="btn btn-default filter-button" data-filter="letterJ">J</button>
<button class="btn btn-default filter-button" data-filter="letterK">K</button>
<button class="btn btn-default filter-button" data-filter="letterL">L</button>
<button class="btn btn-default filter-button" data-filter="letterM">M</button>
<button class="btn btn-default filter-button" data-filter="letterN">N</button>
<button class="btn btn-default filter-button" data-filter="letterO">O</button>
<button class="btn btn-default filter-button" data-filter="letterP">P</button>
<button class="btn btn-default filter-button" data-filter="letterQ">Q</button>
<button class="btn btn-default filter-button" data-filter="letterR">R</button>
<button class="btn btn-default filter-button" data-filter="letterS">S</button>
<button class="btn btn-default filter-button" data-filter="letterT">T</button>
<button class="btn btn-default filter-button" data-filter="letterU">U</button>
<button class="btn btn-default filter-button" data-filter="letterV">V</button>
<button class="btn btn-default filter-button" data-filter="letterW">W</button>
<button class="btn btn-default filter-button" data-filter="letterX">X</button>
<button class="btn btn-default filter-button" data-filter="letterY">Y</button>
<button class="btn btn-default filter-button" data-filter="letterZ">Z</button>
</div>
</div>
<hr/>
<div class="row">
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB">
<a href="details/8660.html">
<img class="card-img-top rounded img-fluid" src="images/8660t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Bolla</h4>
<p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB">
<a href="details/8666.html">
<img class="card-img-top rounded img-fluid" src="images/8666t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Bolla</h4>
<p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterJ letterD">
<a href="details/8881.html">
<img class="card-img-top rounded img-fluid" src="images/8881t.jpg" alt="Image A Journey To Rotterdam"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Jephté Guillaume | Diephuis</h4>
<p class="card-text text-center album">A Journey To Rotterdam</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL">
<a href="details/412.html">
<img class="card-img-top rounded img-fluid" src="images/412t.jpg" alt="Image La Home Box - Disc 4"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier</h4>
<p class="card-text text-center album">La Home Box - Disc 4</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterB">
<a href="details/376.html">
<img class="card-img-top rounded img-fluid" src="images/376t.jpg" alt="Image La Home Box - Disc 3"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Traumer | Bambounou</h4>
<p class="card-text text-center album">La Home Box - Disc 3</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterH">
<a href="details/447.html">
<img class="card-img-top rounded img-fluid" src="images/447t.jpg" alt="Image La Home Box - Disc 5"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Traumer | Husbands</h4>
<p class="card-text text-center album">La Home Box - Disc 5</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterU letterM">
<a href="details/305.html">
<img class="card-img-top rounded img-fluid" src="images/305t.jpg" alt="Image La Home Box - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Uner | Marc Romboy</h4>
<p class="card-text text-center album">La Home Box - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterV letterC">
<a href="details/341.html">
<img class="card-img-top rounded img-fluid" src="images/341t.jpg" alt="Image La Home Box - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Voiski | Copy Paste Soul</h4>
<p class="card-text text-center album">La Home Box - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10344.html">
<img class="card-img-top rounded img-fluid" src="images/10344t.jpg" alt="Image Dj-Kicks - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10307.html">
<img class="card-img-top rounded img-fluid" src="images/10307t.jpg" alt="Image Dj-Kicks - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10124.html">
<img class="card-img-top rounded img-fluid" src="images/10124t.jpg" alt="Image Dj-Kicks - Disc 3"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 3</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterS letterL letterA letterR">
<a href="details/8897.html">
<img class="card-img-top rounded img-fluid" src="images/8897t.jpg" alt="Image Hagagatan Remixed"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Svreca | Lucy | Alexey Volkov | Rødhåd</h4>
<p class="card-text text-center album">Hagagatan Remixed</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/10673.html">
<img class="card-img-top rounded img-fluid" src="images/10673t.jpg" alt="Image North Star / Silent Space"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Tale Of Us</h4>
<p class="card-text text-center album">North Star / Silent Space</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/8820.html">
<img class="card-img-top rounded img-fluid" src="images/8820t.jpg" alt="Image Goddess Of A New Dawn"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Bayara Citizens</h4>
<p class="card-text text-center album">Goddess Of A New Dawn</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/8719.html">
<img class="card-img-top rounded img-fluid" src="images/8719t.jpg" alt="Image Mofo Congoietric"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Bayara Citizens</h4>
<p class="card-text text-center album">Mofo Congoietric</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/9074.html">
<img class="card-img-top rounded img-fluid" src="images/9074t.jpg" alt="Image The Girl And The Chameleon - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Exaltics</h4>
<p class="card-text text-center album">The Girl And The Chameleon - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/9033.html">
<img class="card-img-top rounded img-fluid" src="images/9033t.jpg" alt="Image The Girl And The Chameleon - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Exaltics</h4>
<p class="card-text text-center album">The Girl And The Chameleon - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT letterJ">
<a href="details/8777.html">
<img class="card-img-top rounded img-fluid" src="images/8777t.jpg" alt="Image Joaquin Joe Claussell Mixes"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Lower East Side Pipes | Joe Claussell</h4>
<p class="card-text text-center album">Joaquin Joe Claussell Mixes</p>
</div>
</div>
</div>
<div class="row">
<br/>
<div class="value col-xs-6 col-sm-6 col-md-6" align="left">18/09/2017 00:18:40</div>
<div class="value col-xs-6 col-sm-6 col-md-6" align="Right">Powered by
<a target="_blank" href="https://www.collectorz.com/music" title="Music Collector">Music Collector</a> & JHR Enhanced Details template</div>
<br/>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="indexfilter.js"></script>
</body>
Thanks for your help.
I copyied the code from the template you used and smashed it into your build. Your code looked pretty messy to me so I changed it. Of course you can change it back to your design, if you wish to. When pushing on one of the buttons the animations will now show as intended and I added more classes (So If you have the authors "Laurent Garnier | Traumer | Bambounou" you can find them by either clicking "L", "G", "T" or "B").
You can find the new .html on my webpage.
Remark: I do not know why the card-elements of bootstrap violate the grid-system. Figure that out by yourself ;) One Solution would be to add overflow-x: hidden; white-space: nowrap; to your body in a <style> tag in header, but that would also cut off all the text in the card-elements...
If you like it you can download the .html by [windows, FireFox] right-clicking and then "save page with name..."
The answer was simple to solve my problem: change the url source of jquery... my bad!