Version

1.0.7

Reproduction link

https://d323-77-246-50-126.eu.ngrok.io/econet-outlets/account/pages/locations.php

Operating System

local xampp

Device

Macbook

Browser & Version

Firefox Developer 112.0b2 (64-bit)

Steps to reproduce

click to switch between the nav pills

What is expected?

the new content should replace the previous on the same position

What is actually happening?

when I click to switch, the second content will appear below where the other was at

Solution

Question 1: How does the Nav pills works in terms of switching content and both content appearing on the same area? currently when I click to switch, the second content will appear below where the other was at!
Question 2: How do I make the active content appear on page reload? currently, after the reload I have to click on the other nav pill button for the content to start appearing!

Below in my Nav Pill code:

Below in my Nav Pill content code:

Please help.

Additional comments

Will there be a dark mode update available?

Im adding fontawesome toggler to the input it always comes outside the box and fixes of solution?

<div class="form-group">
<div class="input-group mb-3 has-validation">
<input type="password" class="form-control" id="password" name="password" required placeholder="Password" aria-label="password" aria-describedby="password-addon" data-bs-toggle="tooltip" data-bs-placement="right" title="Enter your password">
<div class="btn bg-transparent mb-0 shadow-none">
<i class="fa fa-fw fa-eye-slash toggle-password" id="toggle-password" onclick="togglePassword()"></i>
</div>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Please check your Password.</div>
</input>
</div>

Version

1.0.2

Reproduction link

https://demos.creative-tim.com/soft-ui-dashboard/pages/dashboard.html

Operating System

Win 10

Device

Desktop

Browser & Version

Chrome 90.0.4430.212 and all

Steps to reproduce

In Side Navigation of Soft UI Dashboard,
Nav Link's icons are given with , but if we use for placing icons, color of icon is not matching with Soft UI Dashboard's theme.

Color Styling of only SVG icons i.e are given. No Color styling for other icons which uses are given.

What is expected?

Icons other than tags should have color which are matching with theme.

.navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon i {
color : _ _ _ _ _ _ ;
}

What is actually happening?

In Side Navigation of Soft UI Dashboard.
Color Styling of only SVG icons i.e are given. No Color styling for other icons which uses are given.

So, if we use other icons,

color of icon is matching with Side-bar theme.

Solution

Add color styling in CSS Stylesheet
{ assets/css/soft-ui-dashboard.css }

.navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon i {
color: #141727;
}

after
.navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon svg .color-foreground { }

Additional comments

Version

1.0.2

Reproduction link

https://www.creative-tim.com/learning-lab/bootstrap/modal/soft-ui-dashboard

Operating System

Window 10

Device

Desktop

Browser & Version

90.0.4430.212

Steps to reproduce

In the Documentation (Modal Page) of Soft UI Dashboard.
Check demo of any Modal.
Hover over Modal Header's Close Button area.

What is expected?

Modal Header should show close button.
HTML Code for close button is already present.
Need to fix some bugs in css.

What is actually happening?

In Modal Header,
Close button is not visible, but, if you hover over close button area, it is present there. You can also click it, action of close button(i.e. Close Modal Window) will work.

https://github.com/gentritabazi01/Vue-Soft-UI-Dashboard

Version

Soft UI Dashboard Bootstrap

Reproduction link

https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/pages/sweet-alerts.html

Operating System

Windows 10

Device

Dell Laptop

Browser & Version

Firefox 91.11.0esr (64-bit)

Steps to reproduce

Create a modal

What is expected?

Open a modal or sweet alert, any option or link outside modal must be blocked

What is actually happening?

Left panel links, page and options keeps working, options get highligthed.

Solution

Additional comments

Version

Free: 1.0.7 | Pro: 1.1.1

Reproduction link

https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/dashboards/default.html

Operating System

Windows

Device

Desktop PC

Browser & Version

Chrome 109.0.5414.120

Steps to reproduce

Go to the Live Preview of Soft UI Dashboard Free or Pro.
Click on the Bell icon in the Navbar in the top right corner of the Screen.
The Dropdown Menu is displayed blurry. (Same with the Pro Version)

What is expected?

Dropdown Menu should be clear to read

What is actually happening?

Dropdown Menu and its Text appears Blurry

Solution

The Solution are some changes in at the CSS file, you can find the CSS in the Pastebin down below.

I already fixed it for myself. Maybe the code can be helpful for you to fix it for everyone.

Pastebin:
https://pastebin.com/raw/iz1PmSk3

Additional comments

This bug appears in the Free and in the Pro Version.
Also this bug appears in the Soft UI Design System Free and Pro Version.
The Solution Code i added fixes this bug on both producty.

Question 1: How does the Nav pills works in terms of switching content and both content appearing on the same area? currently when I click to switch, the second content will appear below where the other was at!
Question 2: How do I make the active content appear on page reload? currently, after the reload I have to click on the other nav pill button for the content to start appearing!

Below in my Nav Pill code:

  <div class="card card-body blur shadow-blur mb-4">
    <div class="row gx-4">
      <div class="col-md-6 my-sm-auto">
        <ul class="nav nav-pills nav-fill p-1" role="tablist">
          <li class="nav-item">
            <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#message" role="tab" aria-controls="preview" aria-selected="true">
            <i class="ni ni-badge text-sm me-2"></i> My Profile
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#setting" role="tab" aria-controls="code" aria-selected="false">
              <i class="ni ni-laptop text-sm me-2"></i> Dashboard
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

Below in my Nav Pill content code:

  <div class="row">
      <div class="col-12">
        <!-- Nav Pill Content -->
        <div class="tab fade" id="message" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <p>Messages</p>
        </div>
        <!-- Nav Pill Content -->
        <div class="tab fade" id="setting" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <p>Settings</p>
        </div>
      </div>
  </div>

Version

1.0.1

Reproduction link

http://notavailable.com

Operating System

linux

Device

all

Browser & Version

n/a

Steps to reproduce

npm install soft-ui-dashboard (into my existing project)
npm run dev

What is expected?

Build success

What is actually happening?

ERROR Failed to compile with 2 errors 11:42:14 AM

error in ./resources/sass/app.scss

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

&.bg-gradient-faded-#{$prop}-vertical{
^
Top-level selectors may not contain the parent selector "&".
╷
15 │ &.bg-gradient-faded-#{$prop}-vertical{
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/soft-ui-dashboard/assets/scss/soft-ui-dashboard/_gradients.scss 15:3 @import
node_modules/soft-ui-dashboard/assets/scss/soft-ui-dashboard/theme.scss 45:9 @import
node_modules/soft-ui-dashboard/assets/scss/soft-ui-dashboard.scss 27:9 @import

Solution

Additional comments

I recently purchased your soft-ui dasboard but wanted to inquire if there was an mvc.net version of the software or perhaps request assistance on setting it up in a MVC.net environment.

Thanks in advance!,
Alan

Version

1.0.7

Reproduction link

https://d323-77-246-50-126.eu.ngrok.io/econet-outlets/account/pages/locations.php

Operating System

local xampp

Device

Macbook

Browser & Version

Firefox Developer 112.0b2 (64-bit)

Steps to reproduce

click to switch between the nav pills

What is expected?

the new content should replace the previous on the same position

What is actually happening?

when I click to switch, the second content will appear below where the other was at

What I have

Question 1: How does the Nav pills works in terms of switching content and both content appearing on the same area? currently when I click to switch, the second content will appear below where the other was at!
Question 2: How do I make the active content appear on page reload? currently, after the reload I have to click on the other nav pill button for the content to start appearing!

Below in my Nav Pill code:

Below in my Nav Pill content code:

Please help.

Additional comments

What is your enhancement?

Default Scrollbar in Side Navigation Bar is not matching with the look of Theme.
It would be great, if scroll bar is little thinner, with no button(arrow at the end) and thumb color matching with colour combination of Soft UI Theme.

My Solution:
-webkit-scrollbar { width: 5px; } // For Decreasing Width of Default Scrollbar

Rares and his team already developed great, Soft UI Dashboard. I don't want their great effort ruined by default Scrollbar.
And, eagerly waiting for Pro Version.

Version

1.0.1

Reproduction link

https://www.creative-tim.com/learning-lab/bootstrap/build-tools/soft-ui-dashboard

Operating System

windows 10

Device

Laptop

Browser & Version

Edge 90.0.818.56 (64bits)

Steps to reproduce

1. Follow the instructions provided by the documentation
2. Execute the command line gulp compile-scss

What is expected?

creation of a functional soft-ui-dashboard.css

What is actually happening?

nothing since the mention of installing gulp (globally) is not mentioned.

Solution

Update the package.json file in order to run the gulp installed locally

Additional comments

I guess the following remarks should be in an other issue.

After installing gulp, the css file is created BUT

• no minimify version
• some classes are missing (sidenav-toggler-line for example)

Version

1.03

Reproduction link

https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/applications/datatables.html

Operating System

Mac OS

Device

Macbook

Browser & Version

Safari 14.1.2

Steps to reproduce

The "word wrap" function for a column is not working. I used your example here: https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/applications/datatables.html and added a long string of text to the first row of the final column. I've used the "wrap" commands, I've tried to style the table column and it doesn't wrap the string.

What is expected?

The long string should wrap inside the card without adding a horizontal scroll to the card.

What is actually happening?

The string in the column is displaying as a single line and stretching the table horizontally as a single line. It stretches the card and will horizontally scroll, but I would like to keep the entire table inside the fixed card.

Solution

I do not have this issue using a basic downloaded file of the Bootstrap 5 data tables directly from their website, but when I try to use it on your pages, it does not wrap. Is there some kind of CSS conflicting with it?

Thank you for your assistance!

Additional comments

Version

1.0.2

Reproduction link

https://www.creative-tim.com/learning-lab/bootstrap/pagination/soft-ui-dashboard#colors

Operating System

Window 10

Device

Desktop

Browser & Version

90.0.4430.212

Steps to reproduce

In Color Section of Pagination Documentation.
It is documented that, color of active link can be changed by adding class "pagination-{primary, info, success, etc}" in ul tag along with "pagination" class

What is expected?

As mentioned in Documentation of Pagination, if we add class of "pagination-info", "pagination-danger" to ul tag along with "pagination" class, Pagination active link's colour should change corresponding to color class of info, danger, warning, secondary, etc. However, color is not changing.

What is actually happening?

If we add class of "pagination-info, pagination-danger, etc" in "ul" tag along with "pagination" class. Color of Pagination (Active Link) is not changing.
Color of Active link remains the same of "pagination-primary" class's color.

Solution

Adding css in "soft-ui-dashboard.css" as follow
.pagination-info .page-item.active .page-link { background-color: #17c1e8; border-color: #17c1e8; }
.pagination-danger .page-item.active .page-link { background-color: #ea0606; border-color: #ea0606; }
.pagination-success .page-item.active .page-link { background-color: #82d616; border-color: #82d616; }
.pagination-warning .page-item.active .page-link { background-color: #f53939; border-color: #f53939; }
.pagination-secondary .page-item.active .page-link { background-color: #8392AB; border-color: #8392AB; }
.pagination-primary .page-item.active .page-link { background-color: #cb0c9f; border-color: #cb0c9f; }

I took reference of corresponding btn classes (btn-primary, btn-info, btn-success, etc), however, you can use any color which will match the soft ui dashboard theme.

Additional comments

On Checking CSS(soft-ui-dashboard.css), it is found that no css is available for
.pagination-info .page-item.active .page-link { .... }
.pagination-danger .page-item.active .page-link { .... }
.pagination-warning .page-item.active .page-link { .... }
etc

Hi there,

I'm trying to user react-hook-form library with soft ui theme, but i found that SuiInput is not working with register method.

I have implimented it like this

<SuiInput type="email" placeholder="Email" hook={...register("username", { required: 'Enter username' })} />
please help on this

Version

1.0.7

Reproduction link

https://d323-77-246-50-126.eu.ngrok.io/econet-outlets/account/pages/locations.php

Operating System

local xampp

Device

Macbook

Browser & Version

Firefox Developer 112.0b2 (64-bit)

Steps to reproduce

refresh the page with nav pills

What is expected?

when I reload the page, the default nav pill content should appear

What is actually happening?

currently, after the reload I have to click on the other nav pill button for the content to start appearing!

Solution

Question: How do I make the active content appear on page reload? currently, after the reload I have to click on the other nav pill button for the content to start appearing!

Below in my Nav Pill code:

Below in my Nav Pill content code:

Please help.

Additional comments

Version

v1.0.7

Reproduction link

https://github.com/sahillangoo/listify-php/blob/master/signin.php

Operating System

Windows/Linux

Device

Surface Book Pro

Browser & Version

Chrome Latest

Steps to reproduce

Create an Input box with icon inside

<div class="form-group">
                  <div class="input-group mb-3 has-validation">
                    <input type="password" class="form-control" id="password" name="password" required placeholder="Password" aria-label="password" aria-describedby="password-addon" data-bs-toggle="tooltip" data-bs-placement="right" title="Enter your password">
                    <div class="btn bg-transparent mb-0 shadow-none">
                      <i class="fa fa-fw fa-eye-slash toggle-password" id="toggle-password" onclick="togglePassword()"></i>
                    </div>

                    <div class="valid-feedback">
                      Looks good!
                    </div>
                    <div class="invalid-feedback">Please check your Password.</div>
                    </input>
                  </div>

What is expected?

Input box with icon inside it in the end

What is actually happening?

Input box with icon outside in the end

Solution

Additional comments

What is your enhancement?

add a doc for adding a custom component in sidebar

Hey there,
some parts of the dashboard that I'm building don't have a sidebar. However, when simply leaving the HTML code for the sidebar out, I'm encountering several JS bugs, which I have listed below.

Firefox

• TypeError: sidenav is null
• TypeError: referenceButtons is null

Chrome

• TypeError: Cannot read properties of null (reading 'classList')

So, what is the proper way to use the design system without a sidebar?

You can check my site for testing here.

I tried to use your issue creation tool, and it didn't work for me - lots of console errors.

The quickstart template feature here has several errors.

There are instances of /assets and .assets which should all be consistently; ./assets

Some of the packaged js & css files are called, e.g. soft-ui-dashboard.min.css but the includes specify soft-dashboard.min.css

You also have several plugins mentioned in the template which are not included in the download bundle, e.g. moment.min.js

I would suggest going through the process of creating a quickstart application from scratch, using your template, and tweak the template until the quickstart app. looks correct and doesn't throw console errors.

I really like Creative Tim templates, but if you're targeting people who might not be so skilled at JS and/or CSS, then I think you should take the time to run through your 'getting started' material from scratch, and make sure it works. Otherwise I think you're going to lose potential customers.

What is your enhancement?

Will there be a dark mode for PRO. It's a feature I'd like to see, or at least know is coming, before buying.

What is your enhancement?

There is minimal documentation about using Sweetalert in this dashboard

https://www.creative-tim.com/learning-lab/tailwind/html/sweetAlerts/soft-ui-dashboard/

But I can't find any plugin for that. As you said: Use our SweetAlerts plugin based on Tailwind CSS.

Version

1.0.2

Reproduction link

https://www.creative-tim.com/learning-lab/bootstrap/modal/soft-ui-dashboard

Operating System

Window 10

Device

Desktop

Browser & Version

90.0.4430.212

Steps to reproduce

In the Documentation (Modal Page) of Soft UI Dashboard.
Check demo of any Modal.
Hover over Modal Header's Close Button area.

What is expected?

Modal Header should show close button.
HTML Code for close button is already present.
Need to fix some bugs in css.

What is actually happening?

In Modal Header,
Close button is not visible, but, if you hover over close button area, it is present there. You can also click it, action of close button(i.e. Close Modal Window) will work.

Solution

Additional comments