I have a JSP page where I’m trying to implement a progress bar to display the order status (e.g., “Pending”, “Confirmed”, “Shipping”, “Delivered”). However, my custom CSS is not being applied, even though I have used !important in several places to override other styles. I suspect the issue might be due to other styles (like from Bootstrap or other frameworks) overriding my CSS.
I have added !important to override Bootstrap styles, but it still doesn’t work.
I have checked the HTML and confirmed that the classes are being rendered correctly.
<code><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trạng thái đơn hàng</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* CSS cho step progress bar */
.order-status-container {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.order-status-step {
text-align: center !important;
position: relative !important;
flex: 1 !important;
}
.order-status-step::before {
content: "";
width: 100%;
height: 6px;
background-color: #e0e0e0 !important;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.order-status-step.active::before {
background-color: #28a745 !important;
}
.order-status-line {
background-color: #e0e0e0 !important;
height: 6px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
.order-status-step.active + .order-status-step .order-status-line {
background-color: #28a745 !important;
}
.progress-step span {
display: block;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center mt-5" style="padding-top: 60px;">Trạng thái đơn hàng</h2>
<div class="order-status-container">
<div class="order-status-step ${userOrder.orderState >= 0 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Chờ xử lý</span>
</div>
<div class="order-status-step ${userOrder.orderState >= 1 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Đã xác nhận</span>
</div>
<div class="order-status-step ${userOrder.orderState >= 2 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Đang giao hàng</span>
</div>
<div class="order-status-step ${userOrder.orderState >= 3 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Đã nhận hàng</span>
</div>
</div>
....
//library
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</code>
<code><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trạng thái đơn hàng</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* CSS cho step progress bar */
.order-status-container {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.order-status-step {
text-align: center !important;
position: relative !important;
flex: 1 !important;
}
.order-status-step::before {
content: "";
width: 100%;
height: 6px;
background-color: #e0e0e0 !important;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.order-status-step.active::before {
background-color: #28a745 !important;
}
.order-status-line {
background-color: #e0e0e0 !important;
height: 6px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
.order-status-step.active + .order-status-step .order-status-line {
background-color: #28a745 !important;
}
.progress-step span {
display: block;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center mt-5" style="padding-top: 60px;">Trạng thái đơn hàng</h2>
<div class="order-status-container">
<div class="order-status-step ${userOrder.orderState >= 0 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Chờ xử lý</span>
</div>
<div class="order-status-step ${userOrder.orderState >= 1 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Đã xác nhận</span>
</div>
<div class="order-status-step ${userOrder.orderState >= 2 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Đang giao hàng</span>
</div>
<div class="order-status-step ${userOrder.orderState >= 3 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Đã nhận hàng</span>
</div>
</div>
....
//library
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</code>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trạng thái đơn hàng</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* CSS cho step progress bar */
.order-status-container {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.order-status-step {
text-align: center !important;
position: relative !important;
flex: 1 !important;
}
.order-status-step::before {
content: "";
width: 100%;
height: 6px;
background-color: #e0e0e0 !important;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.order-status-step.active::before {
background-color: #28a745 !important;
}
.order-status-line {
background-color: #e0e0e0 !important;
height: 6px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
.order-status-step.active + .order-status-step .order-status-line {
background-color: #28a745 !important;
}
.progress-step span {
display: block;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center mt-5" style="padding-top: 60px;">Trạng thái đơn hàng</h2>
<div class="order-status-container">
<div class="order-status-step ${userOrder.orderState >= 0 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Chờ xử lý</span>
</div>
<div class="order-status-step ${userOrder.orderState >= 1 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Đã xác nhận</span>
</div>
<div class="order-status-step ${userOrder.orderState >= 2 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Đang giao hàng</span>
</div>
<div class="order-status-step ${userOrder.orderState >= 3 ? 'active' : ''}">
<div class="order-status-line"></div>
<span>Đã nhận hàng</span>
</div>
</div>
....
//library
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
I have cleared the browser cache and tried reloading the page multiple times.
New contributor
L. Vanessa is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.