Checkbox is absolutely empty

[hung1998pro]

Hi Creative Tim, I just bought your Argon dashboard pro react. I have downloaded argon react pro version 1.1 . But After I installed all the required packages, I saw all the checkboxes are empty. Here are some pictures of my issue, one is on the dashboard page, the other one is on the table page.

[einazare]

Hello there, @hung1998pro ,

Please provide us with the following video:

• Download the product
• Unzip the product
• Open terminal and cd into the project
• Run node -v
• Run npm -v
• [Mac/Ubuntu/Linux] Run npm run install:clean
• [Widnows] Run npm install
• [Widnows] Run npm start
• Showcase the issue

You can share it with us via wetransfer, and send the video to *** (if you do not want to make it public, since in the video will be shown your personal account on creative-tim).

Also, maybe before making the video, maybe you have just forgotten to add some of our styles: https://demos.creative-tim.com/argon-dashboard-pro-react/#/documentation/quick-start

Best, Manu

[hung1998pro]

This is a warning message when I try to start the app

WARNING: text-emphasis-variant() has been deprecated as of v4.4.0. It will be removed entirely in v5. on line 8 of src/assets/scss/bootstrap/mixins/_deprecate.scss, in mixin deprecate from line 16 of src/assets/scss/bootstrap/mixins/_text-emphasis.scss, in mixin text-emphasis-variant from line 48 of src/assets/scss/core/utilities/_text.scss from line 28 of src/assets/scss/custom/_utilities.scss from line 69 of stdin

When I used MS Edge to access the app, I could see the checkbox properly. But when I switched to chromium-browser like chrome, I can't see the checkbox.

Then, I tried to figure out what the problem is, I inspect the after element of checkbox label and i saw some overlap CSS code here

Afterward, I uncheck the first and second ones and then it works

So where can I fix my problem

[einazare]

Hello there, @hung1998pro ,

I've just tested the project, it works fine on all browsers. Please provide us with the following video:

• Download the product
• Unzip the product
• Open terminal and cd into the project
• Run node -v
• Run npm -v
• [Mac/Ubuntu/Linux] Run npm run install:clean
• [Widnows] Run npm install
• [Widnows] Run npm start
• Showcase the issue

You can share it with us via wetransfer, and send the video to *** (if you do not want to make it public, since in the video will be shown your personal account on creative-tim).

Best, Manu

[hung1998pro]

Hi @EINazare , I've sent a video that followed your instruction, please take a look and let me know the solution as soon as possible.

[einazare]

Hello again, @hung1998pro ,

Please create a new folder under the src/assets/scss, named custom-developement. Inside that, create a new scss file, named _forms.scss, inside that file add the following code:

.custom-checkbox-success .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

And import that scss file inside src/assets/scss/argon-dashboard-pro-react.scss at the ned of the file.

That will do the trick.

Best, Manu

[hung1998pro]

Thank you @EINazare , I've tried your solution and it did the trick, I will manually warning, info ... checkbox as well.