Stpper initialization

Topic: Stpper initialization

mardem free asked 5 years ago

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.)

Add comment

mardem free answered 5 years ago

0 0 Best answer

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 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 free 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 free 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

Please insert min. 15 characters.

MDBootstrap staff 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(); })

Add comment

MDBootstrap staff answered 5 years ago

0 0 Best answer

<p>Hi mardem,</p>

<p>This is ready to use HTML file with all needed dependencies:</p>

<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>
  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  
  <link href="css/bootstrap.min.css" rel="stylesheet">
  
  <link href="css/mdb.min.css" rel="stylesheet">
  
  <link href="css/style.css" rel="stylesheet">
  
  <link href="css/addons-pro/steppers.min.css" rel="stylesheet">
</head>

<body>

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  
  <script type="text/javascript" src="js/popper.min.js"></script>
  
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  
  <script type="text/javascript" src="js/mdb.min.js"></script>
  
  <script type="text/javascript"src="js/addons-pro/steppers.min.js"></script>
</body>

</html>
</code></pre>

<p>If you need additional help I am here for you.</p>

<p>Best Regards, <em>Piotr</em></p>

Please insert min. 20 characters.

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

Add comment

MDBootstrap staff answered 5 years ago

0 0 Best answer

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 free 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 free 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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: PC
Browser: Firefox
OS: Windows
Provided sample code: No
Provided link: No

mardem

20Support score
2Questions 1Answers 1Snippets