themeselection / sneat-bootstrap-html-admin-template-free Goto Github PK

Hello,

This might be a trivial thing to do, but I’m relatively new to bootstrap et al and I have tried checking the documentations/FAQ but am still stuck 2.5 hours later.

I am trying to use ../assets/js/config.js to change the theme colours.

In that file I have

colors: {
   primary: '#181818',
   secondary: '#3f6d0a’, …

And in my html I have:

<div class="row" style="margin-bottom:20px;">
               <div class="col-md">
                 <div class="card text-white bg-primary">
                   <div class="card-header">Introduction</div>
                   <div class="card-body”>

Yet the colour of that element is still showing as the default #696cff

I believe I have the config.js correctly set up because toggling displayCustomizer turns the customiser on/off.

Thanks for your help

Steps to reproduce

Create a basic table with just one row. Like this one:

<div class="card">
  <h5 class="card-header">Table Basic</h5>
  <div class="table-responsive text-nowrap">
    <table class="table">
      <thead>
        <tr>
          <th>Project</th>
          <th>Client</th>
          <th>Users</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody class="table-border-bottom-0">
        <tr>
          <td>
            <i class="fab fa-bootstrap fa-lg text-primary me-3"></i> <strong>Bootstrap Project</strong>
          </td>
          <td>Jerry Milton</td>
          <td>
            <ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="" data-bs-original-title="Lilian Fuller">
                <img src="../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="" data-bs-original-title="Sophia Wilkerson">
                <img src="../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="" data-bs-original-title="Christina Parker">
                <img src="../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
              </li>
            </ul>
          </td>
          <td><span class="badge bg-label-warning me-1">Pending</span></td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bx bx-dots-vertical-rounded"></i>
              </button>
              <div class="dropdown-menu" style="">
                <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-2"></i> Edit</a>
                <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-2"></i> Delete</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

What is expected?

On click the 3 dots menu I expected to see the distinct options:

What is actually happening?

But instead, the menu is hidden by the Overflow property:

Additional data

CSS

Arabic characters in Menu is showing stars.
Version v1.1.1
Reproduction Steps : It shows after the application is run from VS.NET
What is expected%0AIt should show Arabic text correctly
What is happening: I am developing ASP.NET CORE MVC app with VS2022.I applied the theme and everything is perfect so far except with Arabic text in the menu part .Arabic characters now shown correctly and shows stars.

Below is what is showing .

Steps to reproduce

Hi! Have installed free version, then checked websocket is working in empty blade.
Then added @Vite('resources/js/app.js') to head - not worked, then before - again not worked. Thus when I add @Vite('resources/js/app.js') - your dropdown on click on user icon not showing dropdown menu.

What is expected?

Expect to receive message from websocket.

What is actually happening?

no ws message comes

Additional data

Code:

setTimeout( ()=>{
            window.Echo.private('my_private_channel.user.{{auth()->user()->id}}')
                .listen('.private_msg',(e)=>{
                console.log('checkWS p ', e);
            });
        },200);

What problem does this feature solve?

I wanted to change the Large screen break point from 1200px to 1420px. My primary intention is to make the side menu closed until the resolution is 1420px. I have tried changing it in helper.js but does not work. Could you please help me out on this?

What does the proposed solution look like?

Menu should be stay collapsed until 1420px screen resolution.

Version: v1.0.0

Feature Requirement

Since bootstrap 5.2 and jQuery 3.6 are out now, can you bump the versions of those packages? Likely popper will need to be bumped too.

I attempted to do it on my fork, but ran into this:

Error: Command failed: sass scss:/home/tac/survos/themes/sneat-html-admin-template-free/assets/vendor/css fonts:/home/tac/survos/themes/sneat-html-admin-template-free/assets/vendor/fonts libs:/home/tac/survos/themes/sneat-html-admin-template-free/assets/vendor/libs --no-source-map
Error: Undefined variable.
   ╷
20 │   @each $color, $value in $theme-colors-rgb {
   │                           ^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_root.scss 20:27  @import
  scss/_bootstrap.scss 7:9                      @import
  scss/core.scss 1:9                            root stylesheet

    at ChildProcess.exithandler (child_process.js:390:12)
    at ChildProcess.emit (events.js:400:28)
    at ChildProcess.emit (domain.js:532:15)
    at maybeClose (internal/child_process.js:1055:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
    at Process.callbackTrampoline (internal/async_hooks.js:131:17)

Steps to reproduce

I used the sample code as is.

Mac Chrome

Mobile:

What is expected?

I expect widgets to scale responsively.

What is actually happening?

hello.
I am using your product well.

Currently, there is an issue with heatmap chart appearing cropped on devices with small screen sizes. This issue is mainly observed on smaller screens such as mobile or reducing the screen size itself. Particularly, the placement of widgets is skewed on mobile screens as the attached picture.

Can you tell me what should I do to fix this issue?

Additional data

Hello,

I am currently using the free version of Sneat Bootstrap 5 Admin, and will most likely purchase the pro version.

But before I do that, I wanted to make sure that a limitation I'm currently experiencing is actually due to it, because I'm using the free version and when I get the pro version, I won't suffer from it anymore.

Currently all charts are limited to displaying a maximum of 4 values. The professional version will allow me to present more than 4 values ​​in the graphs, right?

Somebody can corfirm it to me?

Thanks in advance.

Version: v1.0.0

Feature Requirement

The yarn package is still at 1.0.0, can you bump it to the latest version please?

https://yarnpkg.com/package/sneat-bootstrap-html-admin-template-free

Is there a way to always see the open menu and never show the burger menu?

Thanks!

What problem does this feature solve?

Being able to use it in modern projects.

People are moving away from webpack and are more and more using vite.js. I wanted to use this template but it is too opinionated and reliant on webpack and gulp. Vite is where the world is moving towards. Would love to know if this is on the roadmap.

Bonus would be a vite.js + react + typescript (bootstrap) version.

Steps to reproduce

1. First, download the .zip laucher in windows version

2. Then, extract it in a folder.

3. Open for the first time the file "(name of your launcher) launcher"

4. Wait the 350~360 files upload.

5. The error is here !

What is expected?

The files are all supposed to load.
I was never able to launch it so I don't know what happens next.

What is actually happening?

A message apear and says me : "The image file C:\Users\Public\Documents\HyperCipher Compass\Bin\Compa ssExplorer.Desktop.exe is valid, but corresponds to a different computer type than this one."

And the launcher just stop.

Additional data

Great theme, thanks for releasing it.

Bootstrap 5.2 is out, can you upgrade the library to use it?

I can submit a PR.

Steps to reproduce

1. Go to Form section
2. scroll down to select section
   

What is expected?

Is expected to be able to select multiple options in the form

What is actually happening?

Can't select several options

Additional data

What problem does this feature solve?

Being able to use bootstrap 5.3 features.

What does the proposed solution look like?

A sneat integration built on bootstrap 5.3.

What problem does this feature solve?

overall product superb but add some more bootsrap classes and make navbar attractive

What does the proposed solution look like?

no any issue ,just suggestion

I have tried to implement the lib DataTable.min.js
But I've only gotten it to throw an error in the console

localhost/proyect\libs\DataTables/datatables.min.css
localhost/proyect\libs\DataTables/datatables.min.js

Uncaught TypeError: Cannot read properties of undefined (reading 'value')
at datatables.min.js:229:96
at datatables.min.js:64:299
at datatables.min.js:64:326

I don't know, if I'm implementing it wrong, or it should be done in another way

What problem does this feature solve?

I'm using the free version.
As my app would need to display tables with many columns and just a few menu options, I would like to have the menu hidden by default and toggle its visibility with a button on the nav bar, exactly like in mobile view.
As for now, I haven't found a class or group of classes which serves to this purpose

What does the proposed solution look like?

Menu and navigation bar looks the same in desktop and mobile

Hello,
I was looking into the code, is there a way to see an example of how to fetch the data from Mysql and show it in the dashboard using nodejs?
For instance, I need to retrieve the value into the graph 78% from a database.
I couldn´t find anything like that.
It will be so helpful
Thanks

are you have pagination UI on your template

Steps to reproduce

Hi, i tried to buy this theme, but the sign up is broken.
it does an ajax request to "https://themeselection.com/wp-admin/admin-ajax.php" which returns 403

Hi! i have download a copy of this theme and create a vuejs instance with this.

All Layout of Vue Found OK. But, the dashboard Menu not opening on Desktop and Mobile View.

Because it can be?

Steps to reproduce

i have implemented free version of [sneat-bootstrap-html-admin-template-free] to vue js i have imported all files css or js provided in themes found in htm folder suppose i have implemented dashboard content in my react or vue components with vite and npm. I have also installed gulp and npm package as guided in documentation
main.js (React)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import authReducer from './store/auth/authSlice.jsx';
import App from './App.jsx'

import "./assets/vendor/fonts/boxicons.css"
import "./assets/css/demo.css"
import "./assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css"
import "./assets/vendor/css/pages/page-auth.css"
import "./assets/vendor/libs/apex-charts/apex-charts.css"
import "./assets/vendor/js/helpers.js"
import "./assets/js/config.js"

import "./assets/vendor/libs/jquery/jquery.js"
import "./assets/vendor/libs/popper/popper.js"
import "./assets/vendor/js/bootstrap.js"
import "./assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"
import "./assets/vendor/js/menu.js"
import "./assets/vendor/libs/apex-charts/apexcharts.js"
import "./assets/js/main.js"
import "./assets/js/dashboards-analytics.js"

import './index.css'
const store = configureStore({
reducer: {
auth: authReducer,
},
});

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>



</React.StrictMode>,
)

unable to get password to text when click when no js is loaded as per my observations
so as when i logged in dashboard sidebar menus dropdown ist are not expanding further more charts are not showing css is workin fine but some expandable menus not working

Please help me in this regard

What is expected?

i want that theme should be work as it is in demo

What is actually happening?

all case is defined in Steps to reproduce setion

Additional data

i am using npm and all js that is defined in htlm file like dashboard and auth-login filt in tml folder