The pricing table v1 not generated as shown

Topic: The pricing table v1 not generated as shown

anuragd7 free asked 4 years ago

Expected behavior**The pricing table displayed here does not display correctly using the code shown below the table.*_Actual behavior_*Please see screenshot for behavior. **Resources (screenshots, code snippets etc.) enter image description here

In fact v2 of the pricing table also does not appear to be working correctly. I copied and pasted the sample code and you can see screenshot below:

enter image description here

Add comment

Arkadiusz Idzikowski staff answered 4 years ago

0 1 Best answer

<p>For pricing v2 please use this code:</p>

<h2 class="h1 py-5">Our pricing plans</h2>
  
  <p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
    iure
    provident voluptate esse quasi,
    veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

<div class="row">
    
    <div class="col-lg-4 col-md-12 mb-4">

<mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg')">

<div
          class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">

<mdb-card-body>
            <h5>Basic</h5>
            
            <div class="price pt-0">
              <h2 class="number">10</h2>
            </div>
            
            <ul class="striped">
              <li>
                <p>
                  <strong>1</strong> project</p>
              </li>
              <li>
                <p>
                  <strong>100</strong> components</p>
              </li>
              <li>
                <p>
                  <strong>150</strong> features</p>
              </li>
              <li>
                <p>
                  <strong>200</strong> members</p>
              </li>
              <li>
                <p>
                  <strong>250</strong> messages</p>
              </li>
            </ul>
            <a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect> Buy now</a>
          </mdb-card-body>

</div>
        
      </mdb-card>
    </div>

<div class="col-lg-4 col-md-12 mb-4">

<mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg')">

<div
          class="text-white text-center pricing-card d-flex align-items-center rgba-teal-strong py-3 px-3 rounded">

<mdb-card-body class="card-body">
            <h5>Pro</h5>
            
            <div class="price pt-0">
              <h2 class="number">20</h2>
            </div>
            
            <ul class="striped">
              <li>
                <p>
                  <strong>3</strong> project</p>
              </li>
              <li>
                <p>
                  <strong>200</strong> components</p>
              </li>
              <li>
                <p>
                  <strong>250</strong> features</p>
              </li>
              <li>
                <p>
                  <strong>300</strong> members</p>
              </li>
              <li>
                <p>
                  <strong>350</strong> messages</p>
              </li>
            </ul>
            <a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect> Buy now</a>
          </mdb-card-body>

</div>
        
      </mdb-card>
    </div>

<div class="col-lg-4 col-md-12 mb-4">

<mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg')">

<div
          class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">

<mdb-card-body class="card-body">
            <h5>Enterprise</h5>
            
            <div class="price pt-0">
              <h2 class="number">30</h2>
            </div>
            
            <ul class="striped">
              <li>
                <p>
                  <strong>5</strong> project</p>
              </li>
              <li>
                <p>
                  <strong>300</strong> components</p>
              </li>
              <li>
                <p>
                  <strong>350</strong> features</p>
              </li>
              <li>
                <p>
                  <strong>400</strong> members</p>
              </li>
              <li>
                <p>
                  <strong>450</strong> messages</p>
              </li>
            </ul>
            <a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect> Buy now</a>
          </mdb-card-body>

</div>
        
      </mdb-card>
    </div>

</div>

</section>

</code></pre>

<p>Pricing v1 should work correctly with the code from the documentation. You just need to add required imports to your <code>styles.scss</code> file (we mentioned that at the top of the documentation page and in the migration guide from MDB 7 to MDB 8).</p>

<pre class="prettyprint"><code>@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/variables-pro";

@import "~ng-uikit-pro-standard/assets/scss/addons-pro/_ecommerce-pro.scss"; // Import only when you want to use the Products examples
@import "~ng-uikit-pro-standard/assets/scss/sections-pro/_pricing-pro.scss"; // Import only when you want to use the Pricing examples
</code></pre>

Please insert min. 20 characters.

For pricing v2 please use this code:

<!--Section: Pricing v.2-->
<section class="text-center pb-3 my-5">

  <!--Section heading-->
  <h2 class="h1 py-5">Our pricing plans</h2>
  <!--Section description-->
  <p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
    iure
    provident voluptate esse quasi,
    veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

  <!--Grid row-->
  <div class="row">
    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">

      <!-- Card -->
      <mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg')">

        <!--Pricing card-->
        <div
          class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">

          <!--Content-->
          <mdb-card-body>
            <h5>Basic</h5>
            <!--Price-->
            <div class="price pt-0">
              <h2 class="number">10</h2>
            </div>
            <!--Price-->
            <ul class="striped">
              <li>
                <p>
                  <strong>1</strong> project</p>
              </li>
              <li>
                <p>
                  <strong>100</strong> components</p>
              </li>
              <li>
                <p>
                  <strong>150</strong> features</p>
              </li>
              <li>
                <p>
                  <strong>200</strong> members</p>
              </li>
              <li>
                <p>
                  <strong>250</strong> messages</p>
              </li>
            </ul>
            <a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect> Buy now</a>
          </mdb-card-body>

        </div>
        <!--Pricing card-->
      </mdb-card>
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">

      <!-- Card -->
      <mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg')">

        <!--Pricing card-->
        <div
          class="text-white text-center pricing-card d-flex align-items-center rgba-teal-strong py-3 px-3 rounded">

          <!--Content-->
          <mdb-card-body class="card-body">
            <h5>Pro</h5>
            <!--Price-->
            <div class="price pt-0">
              <h2 class="number">20</h2>
            </div>
            <!--Price-->
            <ul class="striped">
              <li>
                <p>
                  <strong>3</strong> project</p>
              </li>
              <li>
                <p>
                  <strong>200</strong> components</p>
              </li>
              <li>
                <p>
                  <strong>250</strong> features</p>
              </li>
              <li>
                <p>
                  <strong>300</strong> members</p>
              </li>
              <li>
                <p>
                  <strong>350</strong> messages</p>
              </li>
            </ul>
            <a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect> Buy now</a>
          </mdb-card-body>

        </div>
        <!--Pricing card-->
      </mdb-card>
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">

      <!-- Card -->
      <mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg')">

        <!--Pricing card-->
        <div
          class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">

          <!--Content-->
          <mdb-card-body class="card-body">
            <h5>Enterprise</h5>
            <!--Price-->
            <div class="price pt-0">
              <h2 class="number">30</h2>
            </div>
            <!--Price-->
            <ul class="striped">
              <li>
                <p>
                  <strong>5</strong> project</p>
              </li>
              <li>
                <p>
                  <strong>300</strong> components</p>
              </li>
              <li>
                <p>
                  <strong>350</strong> features</p>
              </li>
              <li>
                <p>
                  <strong>400</strong> members</p>
              </li>
              <li>
                <p>
                  <strong>450</strong> messages</p>
              </li>
            </ul>
            <a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect> Buy now</a>
          </mdb-card-body>

        </div>
        <!--Pricing card-->
      </mdb-card>
    </div>
    <!--Grid column-->

  </div>
  <!--Grid row-->

</section>
<!--Section: Pricing v.2-->

Pricing v1 should work correctly with the code from the documentation. You just need to add required imports to your styles.scss file (we mentioned that at the top of the documentation page and in the migration guide from MDB 7 to MDB 8).

@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/variables-pro";

@import "~ng-uikit-pro-standard/assets/scss/addons-pro/_ecommerce-pro.scss"; // Import only when you want to use the Products examples
@import "~ng-uikit-pro-standard/assets/scss/sections-pro/_pricing-pro.scss"; // Import only when you want to use the Pricing examples

Add comment

Arkadiusz Idzikowski staff answered 4 years ago

0 0 Best answer

Hello,

Thank you for reporting this problem, we will take a closer look at that and update the code in the documentation.

anuragd7 free commented 4 years ago

Is this something that is likely to get fixed in a day or two? Or is it likely to take longer. I am asking so that I can decide whether to wait for the new documentation or to proceed independently. Please let me know.

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: MDB Angular
MDB Version: 8.0.0
Device: mac
Browser: chrome
OS: OSX
Provided sample code: No
Provided link: Yes

anuragd7

120Support score
18Questions 3Answers 0Snippets