creativetimofficial / black-dashboard Goto Github PK

Got the following error while using npm install

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/typescript npm ERR! optional typescript@"4.1.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peerOptional typescript@"^3.2.1" from [email protected] npm ERR! node_modules/react-scripts npm ERR! react-scripts@"4.0.1" from the root project npm ERR! npm ERR! Conflicting peer dependency: [email protected] npm ERR! node_modules/typescript npm ERR! peerOptional typescript@"^3.2.1" from [email protected] npm ERR! node_modules/react-scripts npm ERR! react-scripts@"4.0.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\HUNGRYMINDS\AppData\Local\npm-cache\eresolve-report.txt for a full report.

When you use RTL the Dropdown menu gets hidden below the chart on the example page.

Version

last version

Reproduction link

creativetimofficial/black-dashboard-angular#6

Operating System

Windows 10

Device

Laptop

Browser & Version

Chrome lastest

Steps to reproduce

Add FormsModule in components.module.ts
Add a form
bind with a ts variable
"core.js:8046 Can't bind to 'ngModel' since it isn't a known property of 'input'."

What is expected?

Correct binding

What is actually happening?

I've added page in pages folder and this page is a form. This form cannot accept any binding "core.js:8046 Can't bind to 'ngModel' since it isn't a known property of 'input'." whereas I've added FormsModule in NgModule on components.module.ts ...

Solution

Additional comments

Hi again, it seems toggle icon in RTL version is not moving as expected. When scrolling down its position fixed there.

Hi Team,

Great work on the template.

I am facing two issues while using the template for personal use:

1. Input Select options display White on White when open

Markup:

<div class="card-body">
<div class="row">
	<div class="col-md-5 pr-md-1 offset-md-1">
	    <div class="form-group">
	        <label class="control-label">SELECT ITEMS</label>
	        <select class="form-control">
	            <option>Item 1</option>
	            <option>Item 2</option>
	            <option>Item 3</option>
	        </select>
	    </div>
	</div>
</div>
</div>

2. The focus color on the input control is always set to the pink, even if the Blue theme is selected
Highlighted rectangle in the screenshot above.

Please assist.

Version

1.0.1

Reproduction link

https://www.creative-tim.com/product/black-dashboard

Operating System

Windows 8.1

Device

Laptop

Browser & Version

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

Steps to reproduce

So there are 2 charts, given that both charts have data of 12 and values are 0.

myGlobalChart and anything you want, maybe try myGlobalChart2.

When you try to do the code below to chart1, it will definitely work, but then when you hover to chart2, the error will occur.

Do this, update chart1 and then update chart2, now try to hover to chart1, it does produce the error, but then chart2 does not, now, try to update chart1, hovering on data works now, but then when you hover to chart2, it does not work.

I used this to remove the data on the chart
myGlobalChart.data.datasets.forEach((dataset) => {
for(let i = 1; i <= dataset.data.length; i++)
{
myGlobalChart.data.labels.pop();
}
});

    myGlobalChart.data.datasets.forEach((dataset) => {
    for(let i = 1; i <= dataset.data.length; i++)
    {
      dataset.data.pop();
    }
    });
    myGlobalChart.update();

and used this to add new data
let days = 10;
for(let i = 0; i < days; i++)
{
let keys = Object.keys('data' + i);
myGlobalChart.data.labels.push(keys);
}

    myGlobalChart.data.datasets.forEach((dataset) =>
    {
      for(let i = 0; i < days; i++)
      {
        let values = Object.values('data' + i);
        dataset.data[i] = values;
      }

      dataset.data.push(config);
    });
    myGlobalChart.update();

What is expected?

On hover to the data in the chart, the error will occur and the tooltip will not appear.

What is actually happening?

I don't know, the error says it's in (search l._view.skip||e(l) in chart.min.js)

Solution

This is very odd, so have a config variable and I use it to both charts

var myGlobalChart = new Chart(globalChart, config);
var myChart2= new Chart(chart2, config);

now, I just copy paste the config, and renamed the variable to config2

so now I have this
var myGlobalChart = new Chart(globalChart, config);
var myChart2= new Chart(chart2, config2);

and it worked, I'm like.. "What just happened? It doesn't make aaaaaanyy sense at all?!"

Additional comments

I have bought the library from "http://themes.getbootstrap.com/preview/?theme_id=8214&show_new=", but I think you upload past version of black dashboard.

There are some parts which work differently with previous live demo.

For example, the package said "Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"" (https://demos.creative-tim.com/marketplace/black-dashboard-pro/docs/1.0/getting-started/introduction.html#starter-template).
However it didn't work when I tried changing data-color.
I checked out _sidebar-and-main-panel.scss file, and realized that I have to use 'data' attribute to change the color from this part(_sidebar-and-main-panel.scss:365-370).
In addition, the border-top color is fixed as purple at _sidebar-and-main-panel.scss:491 which is different from livedemo.

Because the livedemo is supporting this kind of weird behavior correctly, I think you guys send me past version of black dashboard.

Thanks :)

Still getting missing image notices when trying to build. Noticed another Issue about the exact item was closed without being solved.

× Build failed.
@parcel/resolver-default: Cannot find module '../img/asc.gif' from 'R:\NG-VS-Dashboard\assets\css'
R:\NG-VS-Dashboard\assets\css\black-dashboard.css
R:\NG-VS-Dashboard\assets\css\black-dashboard.css:11553:3
  11552 | table.tablesorter thead tr .headerSortUp {
> 11553 |   background-image: url("../img/asc.gif"); }
>       |   ^^^^^^^^^^^^^^^^
  11554 |
  11555 | table.tablesorter thead tr .headerSortDown {

Hi,

Thank you very much for crating such a beautiful template.

However, I am not able to increase lines in text area.
Could you please help?

Need help. How can i create Sidebar dropdown?

Hi,

I downloaded your template to use it with webpack.

At my first build, i had errors for some missing files :

ModuleNotFoundError: Module not found: Error: Can't resolve '../img/asc.gif' in ...

Next, i have looked at your css file and i found this three references to X.gif who are not present in the release :

background-image: url("../img/bg.gif"); line 14345
background-image: url("../img/asc.gif"); line 14352
background-image: url("../img/desc.gif"); line 14356

I commented this lines in my code.

I had this error too :

ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/nucleo.svg' in ...

This error come from nucleo-icons.css at line 12 :

url('../fonts/nucleo.svg') format('svg')

I commented it too.

I think it was just some files who was not versionned.

Have a nice day.

https://www.creative-tim.com/new-issue/black-dashboard
Hi,
Special thanks for your beautiful work.
My dear friends, What to do to change the charts on the first page (dashboard.html) for example shipment chart?
Sorry for asking a simple question.

What is your enhancement?

test

Hi,

We use black-dashboard.css in our webapplication, and the application uses datatables version 1.10.19 and the datatables scroller extension, version 2.0.0 - and the whole site builds upon bootstrap 4.

We've experienced that the Edge browser (Microsoft Edge 44.17763.1.0) has problems with the datatables scroller extension, and only when the black-dashboard sheet is used.

If we bypass the black-dashboard sheet, datatables with the scroller works fine. Chrome and Firefox has no problem rendering the content nicely.

Inspecting the black-dashboard sheet indicates that is was built with datatables-1.10.18 and datatables scroller 1.5.0.

Could we try to have an updated version built on recent versions?

Here's an image of the resulting problem in Edge - there's a sort of loading indicator all over, and the contents are present, but hardly visible. And it renders without vertical scrollbar which is also not an issue in Chrome/Firefox.

Here is how it looks in Chrome...

Thank you for your support on this.. and an otherwise awesome theme.

mlgdk

IMPORTANT: Please use the following link to create a new issue:

https://www.creative-tim.com/new-issue/black-dashboard

If your issue was not created using the app above, it will be closed immediately.

Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉 https://www.creative-tim.com/bundles
👉 https://www.creative-tim.com
Hi,
Special thanks for your beautiful work.
My dear friends, What to do to change the charts on the first page (dashboard.html) for example shipment chart?
Sorry for asking a simple question.

hi I'm tryin integrate the editor to theme but there is some little problems :d
`...

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet" />

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

...`
and then i get result like that

what can i do for use the any editor in your theme

Version

last version

Reproduction link

http://www.nolink.it

Operating System

osx

Device

MacBook

Browser & Version

safari last update

Steps to reproduce

go to dashboard

change background (es. light mode)

change page using sidebar

What is expected?

background remain

What is actually happening?

change and return to black

Solution

need help

Additional comments

Hi team,

I facing an issue, the input type file it shows nothing but when I click in the image or in Additional Image from the browser the file manager comes up.

Thanks

I am getting an Issue on Toggle-Button. Toggle on resize is working fine. Toggle on button without any function:

html.txt

Hi

I'm trying to get toggle button on sidebar without media query, I want it there for whole time in every screen size but i'm unable to do it because there is a lots and lots of code there.

if I change background (es. light mode) and after change my page background return tu dark mode!
how I can fix??

Hi,
I am using black dashboard PRO BootStrap 4. I am unable to get a standalone Navbar example going.

I have imported the following files correctly into the HEAD tag of the HTML page:

<link href="assets/css/black-dashboard.css" rel="stylesheet" />
<script src="assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/black-dashboard.min.js" type="text/javascript"></script>

This is the HTML code I am using:

<body>
    <nav class="navbar navbar-expand bg-warning">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown1"
                aria-controls="navbarNavDropdown1" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-bar navbar-kebab"></span>
                <span class="navbar-toggler-bar navbar-kebab"></span>
                <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown1">
                <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="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            Dropdown link
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>

What you will see is that at full page width the Navbar appears correctly. As soon as the browser window is decreased (beyond a responsive breakpoint md) the navbar completely disappears. I am not sure what I am doing wrong.

Please help.

Best Regards,

What is your enhancement?

how to call the demo.showNotification('top', 'right') function from theme.js without onclick?
I want to call it inside Laravel session notification like this
@if(session()->has('success'))
*i want display it here
@endif

Hi, thanks for your great dashboard.
I try to change the default color to the light one, but i can't find where to do that.
Can you point me in the right direction ?
Thanks. :)

hi,

i am trying to show modal in this template

https://themes.getbootstrap.com/product/black-dashboard-pro-premium-bootstrap-4-admin/

but it didn't work and also it didn't work in your live version or in your documentations

thanks

Version

Latest

Reproduction link

https://github.com/creativetimofficial/vue-black-dashboard

Operating System

Windows10

Device

PC

Browser & Version

Chrome

Steps to reproduce

Module not found: Error: Can't resolve '/img/bg.gif' in 'C:\Users\Jesper\Desktop\vue-black-dashboard-master\src\assets\sass'
Module not found: Error: Can't resolve '/img/asc.gif' in 'C:\Users\Jesper\Desktop\vue-black-dashboard-master\src\assets\sass'
Module not found: Error: Can't resolve '/img/desc.gif' in 'C:\Users\Jesper\Desktop\vue-black-dashboard-master\src\assets\sass'

What is expected?

I cant find where these files are supposed to be called in

What is actually happening?

I cant ignore the files either.

Solution

Send the gifs or give an example how to ignore them

Additional comments

I presume it's meant to be box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.05); ?

https://github.com/creativetimofficial/black-dashboard/blob/master/assets/scss/black-dashboard/custom/_white-content.scss#L165

Missing in the down load!

Hello and Hi :-), I think the tamplet is extremely good. Unfortunately, I can not use it myself 100%. Unfortunately, I get the user nciht out, no one can sign on or off. What else would have to be created to create profiles, delete, edit, etc ...
Is there somewhere for a video or a guide. Thank you for any help

Cideg

Hello,
I got "Black Dashboard Pro" with me. I am trying to use this template in Angular 7 project and I'm facing problems like : 1) making it responsive in nature. 2) Even if I am hard coding the dropdown, isnt working on my angular 7 component's HTML page. 3) Having problem in rendering chart.js charts which i evaluated in my component's ts file. Is there any way it will work with my angular project properly?
Thanks in advance.

The documentation for integrating Perfect Scrollbar v1.4.0 shows jQuery based interactions.
See here

However, when I attempt to use the following code:
$('.scroll-window').perfectScrollbar();

I get the following error:
Uncaught TypeError: $(...).perfectScrollbar is not a function.

However, this code works:
const ps = new PerfectScrollbar(".scroll-window");

Despite the included file being called /perfect-scrollbar.jquery.min.js it seems they've discontinued jQuery support.

Hi i want to edit your table to datatable but actually i don't know how can i do this. table doesn't be
responsive when i add datatables.js to project

You documentation suggest setting data-color="orange" on the .sidebar element to change the color.
However your own demo code just sets data="orange".

Setting data-color="orange" has no effect, but setting data="orange" changes the sidebar color.

can anyone help me with how to call the demo.showNotification('top','right') function from theme.js without onclick?
I want to call it inside Laravel session notification

There is some extra padding in RTL version which cause content not align with sidebar.