Hi! For fixing the issue with select dropdown and slider from product page on responsive you must follow the next steps:

1. Go in the project files to assets/sass/paper-kit/_bootstrap-select.scss partial and replace with the new one.
   _bootstrap-select.scss.zip

2. Again in assets/sass/paper-kit/_examples.scss and assets/sass/paper-kit/_responsive.scss partials replace with the uploaded files.
   _examples.scss.zip
   _responsive.scss.zip

3. Now please compile your scss with Koala and please be sure that your output path is assets/css/paper-kit.css.

Hope that will help you!

Regards,
Dragos

Since the most recent update, the links to the documentation on both the github readme and inside the creative-tim dashboard point to a dead page

https://demos.creative-tim.com/paper-kit-2-pro/documentation/tutorial-components.html

Would be neat to get it up again!

1st image:

page-header { background-color: #B2AFAB; background-position: center center; background-size: cover; min-height: 100vh; max-height: 999px; height: auto; overflow: hidden; position: relative; width: 100% \9; z-index: 1; } .page-header .page-header-image { position: absolute; background-size: cover; background-position: center center; width: 100%; height: 100%; z-index: -1; }

2nd image:

.img-responsive {
max-width: 100%;
height: auto;
display: block;
}

You might want to update the link for the parallax video. It points to
https://www.youtube.com/watch?v=dQw4w9WgXcQ , which is titled "Never gonna give you up"

I guess this was not intended .

Documentation references

<link href="assets/css/nucleo-icons.css" rel="stylesheet"> which is not provided in the download folder.

Looking at https://demos.creative-tim.com/paper-kit-2-pro/docs/1.0/plugins/photoswipe.html none of the images in any documentation pages are loading

I want to use "Pricing 2" from your sections.html example but I don't see any documentation on ways to activate the "monthly" vs "yearly" pricing in the price card.

Missing documentation and missing css files. Can't get this to load. It seems as though the documentation is for Paper kit original not paper kit 2 or something. I don't have nucleo-icons.css for example. No where to be found in the downloaded bundle. Its so mixed up I don't even know how to straighten it out.

Example missing in console:

GET http://127.0.0.1:8000/static/assets/css/nucleo-icons.css net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:20 GET http://127.0.0.1:8000/static/assets/css/kit-pro.css net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:114 GET http://127.0.0.1:8000/static/assets/js/plugins/nouislider.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:123 GET http://127.0.0.1:8000/static/assets/js/plugins/bootstrap-datetimepicker.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:126 GET http://127.0.0.1:8000/static/assets/js/photo_swipe/photoswipe.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:127 GET http://127.0.0.1:8000/static/assets/js/photo_swipe/photoswipe-ui-default.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:128 GET http://127.0.0.1:8000/static/assets/js/photo_swipe/init-gallery.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:114 GET http://127.0.0.1:8000/static/assets/js/plugins/nouislider.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:123 GET http://127.0.0.1:8000/static/assets/js/plugins/bootstrap-datetimepicker.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:126 GET http://127.0.0.1:8000/static/assets/js/photo_swipe/photoswipe.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:127 GET http://127.0.0.1:8000/static/assets/js/photo_swipe/photoswipe-ui-default.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:128 GET http://127.0.0.1:8000/static/assets/js/photo_swipe/init-gallery.js 404 (Not Found)

Hi!

The default pagination clash with the danger one, as the two are identical with orange themed numbers. So I think the default pagination style should match de default button style, with dark borders and numbers. I will overwrite them in my site, but I would like to know if this will be fixed in future releases.

Best regards,
Juan

In the documentation, it shows a image upload example, however, it doesn't show a file input example. I did realize that the docs had stated that I should visit the Bootstrap Jansy page for more information and examples, so I did go there to find out how to do a file input. I ten copied the example from the docs to my website (look below)

<div class="fileinput fileinput-new input-group" data-provides="fileinput">
    <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
    <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
    <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>

Once I copied it to my website (while using the New Product Page template provided). It turned out like this:

I have tried to mess with the classes and ids, but no luck. Help would be greatly appreciated.
Thanks!

Hello,

Because JQuery is required, is there a way to load/combine scripts so they load more quickly?

Async/Defer etc?

If you want a multi-level dropdown menu, this is what you have to do:

• create a navbar with a sub-level dropdown menu:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Submenu action</a></li>
                <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Subsubmenu action aa</a></li>
                        <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                    </ul>
                </li>
                <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Subsubmenu action bb</a></li>
                        <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                    </ul>
                </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

• go in paper-kit.js and insert this block of code:

$( document ).ready( function () {
    $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
        var $el = $( this );
        var $parent = $( this ).offsetParent( ".dropdown-menu" );
        if ( !$( this ).next().hasClass( 'show' ) ) {
            $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
        }
        var $subMenu = $( this ).next( ".dropdown-menu" );
        $subMenu.toggleClass( 'show' );
        
        $( this ).parent( "li" ).toggleClass( 'show' );

        $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
            $( '.dropdown-menu .show' ).removeClass( "show" );
        } );
        
         if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
            $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
        }

        return false;
    } );
} );

Best, Stefan

Paying for this product I would have hoped it to be a bit more robust, having a ton of issues:

https://demos.creative-tim.com/paper-kit-2-pro/examples/blog-post.html
-> author, comments and related articles are missing a "col" class to be displayed correctly on IE

https://demos.creative-tim.com/paper-kit-2-pro/sections.html#blogs
-> huge whitespaces using IE. Cards can be fixed by overwriting the ".card" class from "display:flex" to "display:block" - but I'm not sure why or whether it kills some other layouts.

On a more general note:

css file has a lot of duplicate code, for example sections of the navigation style are in there twice

https://demos.creative-tim.com/paper-kit-2-pro/docs/1.0/getting-started/introduction.html
-> that light grey text on white background kills my eyes, and I have perfect eyesight -.- please be nice to us and change it.

I know IE is a major pain in the arse, but I actually paid that money so I don't have to deal with such stuff.

Cheers

Just noticed that these url entries are no longer valid or at least don't seem to be.

url(../../../../../assets/img/kit/pro/photo_swipe/default-skin.png)
url(../../../../../assets/img/kit/pro/photo_swipe/default-skin.svg)

After doing some test I found out that every time I hover my cursor to the dismiss button before it shows in the screen, the bug occurs and nothing happens on modal when i click the dismiss button

Hi,
I'm having issues when I use the minified version of the paper-kit.min.css.
This is the error I get i my browser:
/* Minification failed. Returning unminified contents.
(25,69120): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(25,69210): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(25,69294): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
/
/!

This issue originates in the file "_nucleo-icons.scss" - in the "Spinning Icons"-section.
When this file is minified the @-webkit-keyframes, @-moz-keyframe and @Keyframes are removed.

What can I do to prevent this error?

Best regards
Rasmus

The carousel does not appear to size correctly to fit width of the image on some high screen widths. This can be seen on the demo page https://demos.creative-tim.com/paper-kit-2-pro/docs/1.0/components/carousel.html.

When the height of the carousel reaches the height of the image (in this case 400px) the carousel continues to expand on width but not height. This results in an odd margin appearing.

Example with the background color switched to blue to show the effect
http://jmp.sh/IqHGhI9

When Paper KIT 2 PRO css is loaded, DropDown items are presented behind other cards in the same page.

The first image below shows the expected bahaviour of a DropDown in a page with a number of side-by-side cards. In this case, the include for the theme CSS was removed.

The second image below shows the described strange behaviour where DropDown items go behind the other cards in the same page.

I ask for a fix, since this deeply affects the user experience.

Thanks in advance!

Alex

Hi!
Please check console at https://demos.creative-tim.com/paper-kit-2-pro/examples/register.html
You'll see that

Mixed Content: The page at 'https://demos.creative-tim.com/paper-kit-2-pro/examples/register.html' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css'. This request has been blocked; the content must be served over HTTPS.

It means that you need to update links in head section to https

Hi,
if I add more than one navbar in the same webpage, when I click on navbar-toggler button, allways display the first navbar content menu.
You can see the problem, even here: https://demos.creative-tim.com/paper-kit-2-pro/docs/1.0/components/navbar.html
Please, can you help me?
Thanks!

Version

2.3.1

Reproduction link

https://bss-at.com/pages/products/femto-tech.html

Operating System

ios 14

Device

Iphone 12

Browser & Version

14.0

Steps to reproduce

Open the link on iphone with safari browser.
scroll to the bottom

What is expected?

The footer should be on the bottom of the page

What is actually happening?

instead of being at the bottom of the page it is over the content

Solution

No solution

Additional comments

Version

2.3.1

Reproduction link

https://demos.creative-tim.com/paper-kit-2-pro/examples/landing-page.html

Operating System

windows 10

Device

PC

Browser & Version

Chrome - last version

Steps to reproduce

go to Landing Page example.
Scroll down to a white section
slightly scroll up, the top menu will come (or try) visible, but not really. The transparent background will not act well.

What is expected?

top menu to be visible

What is actually happening?

top menu not visible

Solution

We need a 50% alpha black background on that horizontal div behind top menu, when the scroll is not at top.

Additional comments

Hi!
Could you tell me please how to fix it?

1 - I cannot change size of input field to match text size
2 - I added datetimepicker, but I see something wrong with borders :(

.page-header data-parallax="true" style="background-image: url('/images/sections/dog-face.jpg');"
  .filter
  .content-center
    .container
      .row
        .col-md-8.ml-auto.mr-auto.text-center
          h1.title = gettext "We will take care of your pet!"
          h4.description = gettext "Platform for solving daily issues of pet owners"
          br/
        .col-md-10.ml-auto.mr-auto
          .card.card-raised.card-form-horizontal.no-transition
            .card-body
              form action="" method="" 
                .row
                  .col-md-3
                    .form-group
                      select.selectpicker data-menu-style="dropdown-info" name="huge" 
                        option disabled="disabled" selected="selected"  = gettext "I'm looking for"
                        option value="1"  =gettext "Veterinary"
                        option value="1"  =gettext "Pet care"
                        option value="1"  =gettext "Find pet friendly cafe"
                        option value="1"  =gettext "Buy pet stuff"
                        option value="1"  =gettext "Buy new pet"
                        option value="1"  =gettext "Pet from shelter"
                        option value="1"  =gettext "Find my pet"
                        option value="1"  =gettext "Find owner of lost pet i found"


                  .col-md-3
                    .form-group
                      input.form-control placeholder="Where" type="text" value=""
                  .col-md-3
                    .form-group
                      #datetimepicker.input-group.date
                        input.form-control.datetimepicker placeholder="When" type="text" value=""
                  .col-md-3
                    button.btn.btn-danger.btn-block type="button" 
                      i.nc-icon.nc-zoom-split
                      |   
                      = gettext "Search"

nucleo-icons.svg missing in the zip file

Hi!
I've found following problem with dropdowns in mobile view.

The UI Kit distribution uses included bootstrap CSS files. This means that a lot of styles are hard-coded into CSS files that makes it hard to override some basic color and style information.

Is there a way to get the UI kit default bootstrap SCSS along with the custom.scss that you have applied so that we can override without having to manually search CSS files?

Version

Version 2.3.1

Reproduction link

https://www.balboa.com/5414dl/bv/bv/bv3.html

Operating System

MAC OS Big Sur 11.2.2

Device

MacBook Pro

Browser & Version

Safari 14.0.3

Steps to reproduce

Open link in Safari.

What is expected?

I expect the video to fitwithin the frame.

What is actually happening?

The video is pushed off to the right on my mac. It works great on edge and chrome.

Solution

my only solution is to not use the video but the whole reason I went with this template was for a video layout for one the headers.

Additional comments

I have untouched Paper Kit 2 PRO v. 2.2.1.

When I try to compile from scss at /assets/scss/paper-kit.scss I get error:
Error: Top-level selectors may not contain the parent selector "&". &::-moz-placeholder {@content; } // Firefox scss/paper-kit/mixins/_inputs.scss 15:3 placeholder() scss/paper-kit/_inputs.scss 1:1 @import scss/paper-kit.scss 40:9 root stylesheet

I am developing a site using Paper Kit Pro 2, and have a carousel on the home page.
http://www.lock.cgiadvertising.com/image-test.html

On the third carousel item, I want to add an image as a part of the text, but I'm unable to size the image correctly. It's taking on the style of the entire container.

I've attached screenshots that show how I want it to look, vs what is actually happening.

This is the html, starting on line 146:

       <div class="carousel-item">
          <div class="page-header" style="background-image: url('assets/img/safeidlock/istockphoto-647577820-2048x2048.jpg?dpr=2&amp;auto=format&amp;fit=crop&amp;w=1500&amp;h=1000&amp;q=80&amp;cs=tinysrgb&amp;crop=')">
            <div class="filter-safelockdarker"></div>
            <div class="content-center">
              <div class="container">
                <div class="row">
                <div class="col-md-6 text-left">
                  <div class="col-md-6">

$1,000,000 ID Theft Protection Policy

Fast, professional Identity Restoration

Access your credit score and report - Anytime

I'm having a problem with the Carousel slider, where the slides will not advance beyond slider #2. The issue is on tablet devices, such as the iPad.

Development site:
http://www.lock.cgiadvertising.com/home-page-test.html

Please view the page on an iPad (not on a desktop browser in "responsive" mode"). The carousel will advance to the second slide, but then stop. Slides 3 and 4 never appear.

There is no problem on desktop or on an iPhone.

Note: This issue is in your demo as well:
https://demos.creative-tim.com/paper-kit-2-pro/sections.html

I'm currently using this framework on a pretty large project and I'm finding some of the CSS choices.... confusing and somewhat sloppy. I'm noticing a reliance on things like auto margins where properly implemented Flex would be a lot better.

The most prominent example of this came up while implementing the Project 4 section styling on a page and I made the following revisions to make it much less fiddly to implement in a dynamic site.

/* SCSS */
.project-4 {
   > .container > .row {
        justify-content: center;
        &:nth-of-type(odd) > *:first-child {
            order: 1;
        }
    }
}