Boostrap v4.0.0-beta was released yesterday. I know that it's a little bit early, but has anyone tried to use now-ui-kit with Bootstrap's most recent version?

When adding to the navbar dropdown menu, the mobile view sees the submenu space but not the text. The first image shows the menu when clicked to the hamburger, the second when expanded the topic "Klubi"

Now UI Kit is based on Bootstrap 4 but it depends on Bootstrap-4.0.0-Beta not the Bootstrap v4.0.0 final release. You can find a number of bugs if you use the latest stabe version. I found the issue on the Login page Input groups. Please update the release which is compatible with the Bootstrap stable release.

Hi. I am trying to integrate date picker from this material kit into my project. It seems I've copied all needed snippets while it doesn't work. Can you help me to solve the problem? I am using Bootstrap 4 and here is the link on code pen: https://codepen.io/Hayko/pen/QgvYMv

first of all, thanks for publishing this great looking project under such a liberal license.

that said, please consider using a less suggestive avatar stock photo for the image section on the sample page.

my first reaction when scrolling down that page was "geez, why the f^@# is this dude called tim using a picture of a naked woman. so immature and sexist." (yes, i know tim is the agency name.)

after a quick google image search i figured out this is a free "do whatever you want" stock photo by @araltasher from their unsplash portfolio, more specifically this photo, which does not feature any nudity, which proved my initial reaction was "wrong". that said, the cropping suggests otherwise, at least to me upon first glance.

anyway, i am sure none of this is intentional so i am not calling out anyone here. i just want to share my reaction when looking at that otherwise very nice demo page, hence this message.

keep up the good work, but please reconsider the stock photo. :)

Hello, I am facing some problems with Datepicker that I can not solve (I have already looked at other topics here and nothing worked), it follows errors below:

1 - Arrows that select year / month do not work correctly, there is time that the return when being clicked advances the month forward.

2 - Selecting dates does not work. By clicking on the date, sometimes it goes, sometimes not, even giving several clicks, alternating the month the date selection does not work.

3 - if in value I put the date 06/03/2018 (d / m / Y), when I click to open the datepicker, instead of opening it in month 3, it is opening in other months, eg in June.

Even in the documentation site, when trying to use this function, I encounter difficulties and errors.

Other than that the theme is great, I'm getting to use it perfectly.

For fixing this issue please go in your project in assets/_scss/now-ui-kit/plugins/_plugin-datepicker.scss and search for the following lines of code:

.datepicker .day div,
.datepicker th {
  @include transition($general-transition-time, $transition-ease);
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 2.2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 50%;
  font-weight: $font-weight-light;
  font-size: $font-size-base;
  border: none;
  position: relative;
  cursor: pointer;
}

Here you just have to add the property ‘ z-index: -1; ’ and after you do that please compile your scss with Koala( koala-app.com ). Please be sure that your output path is ‘ assets/css/now-ui-kit.css ‘. Everything will work fine after you will do the modification. Hope that will help you!

Regards, Dragos

When the modal content increases to the point when it becomes scrollable, the modal just shifts way down the page when launched.

As you can see in the screenshot above when I increased the content the modal just shifted way down to the page. I tried this in the example pages that comes with nowuikit when downloaded. Whereas in bootstrap4 docs and example on their website the modal works fine for longer content. Please look into this.

Upwards dropdown Is it possible to create a dropdown which goes above the text instead of below? I want to have a dropdown on my footer but it will currently only go down.

Thanks for creating this theme. Looks like it's already inspired many to create remixes of the work. One thing I noticed while reviewing the repo was GitHub wasn't showing the license in the normal location. Upon inspection I believe it's occurring because the theme is using a non-standard MIT license.

In particular, this line appears in the license file:

Designed by Invision (https://www.invisionapp.com). Coded by Creative Tim (https://www.creative-tim.com/)

The intent here seems to be FOSS. But with the above line in the license file it's not clear if those building upon or remixing this work are supposed to copy that line with the LICENSE (which would make it not MIT). Mind removing that line from the license file so it's standard MIT? Thanks.

Anyone have a solution for this?

It´s on Internet Explorer, I tried adding html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; } But just work on right side after scrolling.

Thanks.

Version

pro-v1.3.1

Reproduction link

https://demos.creative-tim.com/now-ui-kit-pro/docs/1.0/plugins/fileupload-jasny.html

Operating System

Windows 10

Device

Lenovo Thinkpad X1 Carbon

Browser & Version

Google Chrome Version 91.0.4472.114 (Official Build) (64-bit)

Steps to reproduce

1.Click select image 2.Select the image file 3.Click open to attach the file to the control

What is expected?

Attached file name and remove button

What is actually happening?

No file attached, it shows select image again

Solution

Show the attched file

Additional comments

Version

1.3

Reproduction link

https://jsfiddle.net/jStefano/j23nvhy0

Operating System

MAC OS

Device

MacBook

Browser & Version

Chrome/Firefox

Steps to reproduce

input a username and don't check the checkbox, then hit submit

What is expected?

the browser form validation should display a warning prompting the user to check the terms and conditions checkbox

What is actually happening?

the warning is not shown, in fact nothing happens, and in Chrome an error is logged to the console

Solution

remove visibility: hidden from the input style and move it a bit so that the warning message can appear in the expected position.

.form-check input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    visibility: initial !important;
    left: 27px;
    top: 8px;
}

Additional comments

Version

1.3

Reproduction link

https://demos.creative-tim.com/now-ui-kit/docs/1.0/components/buttons.html#disabled-state

Operating System

MAC OS

Device

MacBook

Browser & Version

Any

Steps to reproduce

just load your docs page and hover over any disabled button

What is expected?

hovering over a disabled button should not trigger any color/state change

What is actually happening?

the color and the element shadow are changing like they were active

Solution

apply the right color to disabled buttons https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/css/now-ui-kit.css#L1731-L1732

and removed opacity applied to any .btn:hover https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/css/now-ui-kit.css#L1603

Additional comments

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

SCSS should be compiled and colors should have been changed in CSS files.

Current Behavior

First I was getting an error in gulp, I used npm audit fix --force then different error.

Failure Information (for bugs)

Error before audit fix:

ReferenceError: primordials is not defined
    at fs.js:35:5
    at req_ (C:\Users\Sai Ram\Downloads\now-ui-kit-master\node_modules\natives\index.js:143:24)
    at Object.req [as require] (C:\Users\Sai Ram\Downloads\now-ui-kit-master\node_modules\natives\index.js:55:10)
    at Object.<anonymous> (C:\Users\Sai Ram\Downloads\now-ui-kit-master\node_modules\graceful-fs\fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)

Error after audit fix:

AssertionError [ERR_ASSERTION]: Task function must be specified
   at Gulp.set [as _setTask] (C:\Users\Sai Ram\Downloads\now-ui-kit-master\node_modules\undertaker\lib\set-task.js:10:3)
   at Gulp.task (C:\Users\Sai Ram\Downloads\now-ui-kit-master\node_modules\undertaker\lib\task.js:13:8)
   at Object.<anonymous> (C:\Users\Sai Ram\Downloads\now-ui-kit-master\gulpfile.js:34:6)
   at Module._compile (internal/modules/cjs/loader.js:1156:30)
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
   at Module.load (internal/modules/cjs/loader.js:1000:32)
   at Function.Module._load (internal/modules/cjs/loader.js:899:14)
   at Module.require (internal/modules/cjs/loader.js:1042:19)
   at require (internal/modules/cjs/helpers.js:77:18)
   at requireOrImport (C:\Users\Sai Ram\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}

Steps to Reproduce

Follow the guide given in build tool section of the kit.

• Device: HP Notebook
• Operating System: Windows 10
• Browser and Version: Chrome Version 83.0.4103.61 (Official Build) (64-bit)

For some reason the background-color of the default button is not defined as $default-color (actually the line is commented out), therefore you can't change it via variable:

// _buttons.scss

// .btn-default { @include btn-styles($default-color, $default-states-color); }
.btn-primary { @include btn-styles($primary-color, $primary-states-color); }
...

See https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/scss/now-ui-kit/_buttons.scss#L83

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [x ] I am running the latest version
• [x ] I checked the documentation and found no answer
• [x ] I checked to make sure that this issue has not already been filed
• [x ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

At the desired breakpoint the nav menu will toggle into the navbar-toggler-icon.

Current Behavior

The navbar-toggler-icon is not appearing at the correct breakpoint. Even in the documentation the navbar-toggle-icon doesn't appear.