Topic: Stpper initialization
MDB pro dosen't work. I added linear stepper to the page but css and js don't work correctly. I tried use it by adding it in head - in header jsp and also in head in specific page. How can I resolve this problem?
Expected behavior
Actual behavior
Resources (screenshots, code snippets etc.)
Hi mardem,
You have to link to stepper addon like it is described in the getting started tab: https://mdbootstrap.com/docs/jquery/components/stepper/#a-setup
If you need additional help I am here for you.
Best Regards, Piotr
mardem commented 5 years ago
Stepper dosn't work corectlliy, I get answer in web browser:
Błąd mapy źródła: request failed with status 404 URL zasobu: http://localhost:8080/resources/css/bootstrap.min.css URL mapy źródła: bootstrap.min.css.map
There is problem with showing and next steps - all are visible. I use this script in jsp file.
mardem commented 5 years ago
Could you send me hole configuration index.html with working lienear stepper? I watched quick start movie make all this step but it dosn't work.
Hi mardem,
This is ready to use HTML file with all needed dependencies:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<!-- Steppers CSS -->
<link href="css/addons-pro/steppers.min.css" rel="stylesheet">
</head>
<body>
<!-- Start your project here-->
<!-- Start your project here-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Steppers JavaScript -->
<script type="text/javascript"src="js/addons-pro/steppers.min.js"></script>
</body>
</html>
If you need additional help I am here for you.
Best Regards, Piotr
I used the code above and added html code for linear stepper. I got information: Błąd mapy źródła: TypeError: NetworkError when attempting to fetch resource. URL zasobu: file:///C:/PROGRAMOWANIE/codersLab/CSSy%20-%20bootstrap/MDB-Pro_4.8.10/css/bootstrap.min.css URL mapy źródła: bootstrap.min.css.map Why there is this kind of problem?
MDBootstrap staff pro premium priority commented 5 years ago
Cześć Mardem, Where in this structure is located your index.html ? It should be in MDB-Pro_4.8.10 folder.
Pozdrawiam, Piotr
mardem commented 5 years ago
I downloaded files one more time, configured the index.html as I got from you, put stepper code in to the html, after this I got this information as I sended. Even whitout stepper code the problem exists.
mardem commented 5 years ago
The html code look like this:
Material Design Bootstrap
<ul class="stepper linear">
Step 1 Your e-mail CONTINUE Step 2 Your password CONTINUE BACK Step 3 Finish! SUBMIT
MDBootstrap staff pro premium priority commented 5 years ago
Did you initialize stepper in script tags under all scripts previously added as it is described in getting started tab of this component documentation?:
$(document).ready(function () { $('.stepper').mdbStepper(); })
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: PC
- Browser: Firefox
- OS: Windows
- Provided sample code: No
- Provided link: No