197 comments found.
Is there a class to remove the opacity on a card? Ive tried the bg-opacity class but it has no effect on the cards. Usage example class=”card bg-opacity-0 mb-2” and ive tried everything from 0-100 and nothing changes it. I tried it on the container div, card-body, card-header, etc
Hi,
There is no opacity has been set for the card component. May i ask which part of the component that you wish to set the opacity?
Best Regards, Sean.
The card-body is what i want to make solid with no opacity
Hi,
For your information, there is no background color has been set for card-body. If you wish to have a solid background, you may apply the css class like bg-white, bg-inverse and etc to the card-body element.
Best Regards, Sean.
ok, that would work. Is there a list that i have not found yet of all the classes (and their colors) or is it just looking through the css file?
Hi,
All the available css class can be found via the helper page. https://seantheme.com/hud/helper.htmlBest Regards, Sean.
Thanks for the help, ended up using bg-body (which is not listed but found it after un-minified the css)
Glad to hear that your issue was resolved.
Best Regards, Sean
hello,
a date range picker/calendar question is it possible to change the position of the days of the month and put them below the input field …. also to change the order of date format
kind regards Dimitri
Hi,
You may refer to their official documentation for more options.
https://www.daterangepicker.com/#configBest Regards, Sean.
I’m trying to get typeahead working … I copy/pasted almost as it was on the sample pages but i can’t get it working ….
could you please give some extra clues on how the list with countries could be loaded
Hi,
Can you share the code that you have customised?
Best Regards, Sean.
sorry it looks like i posted twice :s
No problem
i don’t succeed in making typeahead work … it looks like it doesn’t get the list of variables that i put in the script can someone help me
Hi,
Can you share the code that you have customised?
Best Regards, Sean.
<head> <meta charset=”utf-8”> <title>Cashair v23 BO</title> <meta name=”viewport” content=”width=device-width, initial-scale=1”> <meta name=”description” content=””> <meta name=”author” content=””>
<!- ================== BEGIN core-css ================== ->
<link href="dist/assets/css/vendor.min.css" rel="stylesheet">
<link href="dist/assets/css/app.min.css" rel="stylesheet">
<!- ================== END core-css ================== -><link href=”https://www.cashair.be/v23_BO/dist/assets/plugins/jquery-typeahead/dist/jquery.typeahead.min.css” rel=”stylesheet”> <script src=”https://www.cashair.be/v23_BO/dist/assets/plugins/jquery-typeahead/dist/jquery.typeahead.min.js”></script>
</head>
......
<input type=”text” value=”” placeholder=”Type ‘af’” class=”form-control” id=”typeahead”>
.....
<!- ================== BEGIN core-js ================== ->
<script src=”dist/assets/js/vendor.min.js”></script>
<script src=”dist/assets/js/app.min.js”></script>
<!- ================== END core-js ================== ->
<script>
$.typeahead({
input: ’#typeahead’,
order: “desc”,
source: {
data: [
“Afghanistan”, “Albania”, “Algeria”, “Andorra”, “Angola”, “Antigua and Barbuda”
]
}
});</script>
Hi,
Put the script for
“https://www.cashair.be/v23_BO/dist/assets/plugins/jquery-typeahead/dist/jquery.typeahead.min.js”
after the vendor.min.js
This is because typeahead required jquery in order to run it.
Best Regards, Sean.
that’s where it is ... but it doesn’t appear to listen to me 
could you please check my “preparation form” on my page and check my source there
this is the address
Hi,
I have found what is the issue that cause the typeahead malfunction in your site. You might need to follow the html structure for typeahead.
https://pastebin.com/4CDPDTA3I will update the documentation soon.
Best Regards, Sean.
it’s not doing his magic ... 
check the same my page pls
Hi,
There is 3 unclosed in your page. Make sure your html tag is closed properly. You may try to move the input div before the breadcrumb.
Best Regards, Sean.
WOOOPIEEEEE !!!! it’s working …. i did not find the unclosed tag … but is followed your advice to put it above the breadcrumb …. where it was working …. and i went down step by step … and it worked at every place on the page … until i put it where it was …. where somehow it also worked…. but where the options where shown “behind the card” and i did not have a scroll bar … once i remarked that it was somehow solved and i changed the order of my form …. thanks for your help …. i will now try to create another “list of countries/values” coming from my database .... wish me luck
Glad to hear that your issue was resolved.
Best Regards, Sean.
Me again How do you change the z-index of the tooltips on the card full screen div? Yours is also loading behind the card expansion. If you expand a card to full screen and then mouse over the expand/collapse icon in the corner the tooltip loads behind it. I have this issue with any tooltip loaded inside that fullscreen div so i think a simple increase in z-index would situate that.
Hi,
You may add the following code in order to fulfil your needs
<style type=”text/css”> .card-expand .tooltip { —bs-tooltip-zindex: 9999; } </style>
Best Regards, Sean.
It seems ajax loaded content does not apply any of the data attributes (scroll bars, tooltips, etc) so i am wondering if you have an example of a working ajax implementation that i missed? Or a function such as init that can be called after ajax loaded content is in the dom so it can have all the data attributes applied to it
Hi,
You may use the function App.initComponent() after you load the ajax content.
For list of the global function, you may refer to the /src/app.js, line 778 as well.
Best Regards, Sean.
Thanks for the quick response and reference
So i tried this and with this called it breaks things. One thing it breaks is the jumpto logic for the nav component. I have a nav component in the expand div and when you click on one of the nav links it actually scrolls the background main window instead of the expanded div. If i comment this line out then the jump works properly inside the div. It also does not put the hash jump id in the address bar which i am guessing is the actual problem.
Hi,
Again, you should provide some screenshot / HTML code regarding your issue so that i know what issue that you are facing right now.
P.s any customisation is not within my support scope as well
Best Regards, Sean.
i have tried to avoid customizing your code entirely. Im not sure how a screenshot helps here though. The jump to logic simply breaks when you call the initComponent after the expand is loaded (via ajax complete method). The expand div contains a <nav> object (the same one you use on your settings page) and when you click on the nav links it is supposed to scroll up/down accordingly and doesn’t. It scrolls the background main window instead of the expand div that overlays the window. I removed the 2 ScrollToTop functions from the initComponent and made a initScrollTo function so those where not applied and this fixed the issue. I’ll just have to keep track of what all i modify (same with the tooltip zindex to fix that) so when i update i can fix these kind of things.
Hi,
You can inspect element and copy the HTML code (the content that you have load via ajax) and paste it to the site like https://pastebin.com/ and that will help the issue understanding from my side.
Regarding your issue, you might need to double check whether there have any duplicate id’s defined in your HTML code or not.
Best Regards, Sean.
Dears,
do you have the same theme with angular?
Hi,
Thank you for your comment and feedback. I will create a Angular version soon. Please stay tuned.
Best Regards, Sean.
I congratulate you on your template, I bought it for my software project. I would like to mention a possible problem in the table_plugins.html section. The Print and CSV buttons do not appear correctly on my mobile, they do not appear aligned, thanks
Hi,
Thank you for your comment and feedback. Regarding your issue, you may try to change the following options in
FILE: /js/demo/table-plugins.demo.js
LINE: 10
CODE:
dom: ”<’row mb-3’<’col-md-4 mb-3 mb-md-0’l><’col-md-8 text-right’<’d-sm-flex justify-content-end’<’mb-3 mb-sm-0’f>B>>>t<’row align-items-center’<’mr-auto col-md-6 mb-3 mb-md-0 mt-n2 ‘i><’mb-0 col-md-6’p>>”,
Best Regards, Sean.
Thanks, I also noticed a bug in the form_plugin.html in the jquery file uploader component. On mobile, when uploading files to the server, the file list does not obey the responsive form
Hi,
Thank you for your comment and report. Regarding this issue, you may wrap the table with the table-responsive and text-nowrap which will solve the issue for mobile view.
div class=”table-responsive text-nowrap”
Best Regards, Sean.
Thanks, I’m using the demo to upload files, it gives me the error upload server currently unavailable. This issue is not reflected in the themeforest live preview. I only have Node.js installed and nothing else. Should I install or configure something else? Thanks for the help
Hi,
The demo file is only for demo purpose and it require live site domain to upload the file to //jquery-file-upload.appspot.com/. So it is normal to have the error upload server currently unavailable.
You may refer to the
FILE: /assets/js/demo/form-plugins.demo.min.js
LINE: 172
p.s you might need to have your own backend system to upload, save and return the uploaded image url and display on frontend
Best Regards, Sean.
Hello I am interested in purchasing a license for some of your UI/UX designs. In particular one of my clients is interested in the HUD Bootstrap 5 Admin Template. In order to create a prototype for their project in Figma I will need to recreate every single component which will be very time consuming and expensive for them. Do you by chance have a Figma design file? It would make my life 100X easier and I would be willing to pay extra if you can share them for this clients project upon purchase.
Thank you!
Hi,
Thank you for your comment and feedback. Unfortunately, i do not have the figma design file for this project.
Best Regards, Sean.
Are there any plans to make something styled for scroll bars? For example if you have cards inside a fixed height div and overflow auto set, the scrollbars really make it look awful when everything else looks nice.
Hi,
Thank you for your comment and suggestions. I will make a custom style for perfect scrollbar plugins in next version release.
Best Regards, Sean.
Thanks, that would be nice as i have a lot of those big bulky grey scrollbars on top of a nice looking template lol
Hi,
For that case, you may use the built in perfect scrollbar.
e.g
https://pastebin.com/UL4DUpLgBest Regards, Sean.
That doesn’t seem to work with your card expand. The expand is a fixed height to viewport so no inline height attribute is set. If you just add the data-scrollbar to the card-content then no content shows because the height attr is missing.
Hi,
This is working fine with the card expand. You can check the chat widget in the demo site as well.
https://seantheme.com/hud/widgets.html#chatWidgetBest Regards, Sean.
That is not the same, you set a fixed height in the card-body class div. data-scrollbar=”true” data-height=”200px” where as i want to use the card classes that already set the height to the viewport when it expands data-scrollbar=”true” style=”overflow-x: hidden; overflow-y: auto;” with no fixed height
Hi,
It depends on how you wish to configure the element. You may try the following code in the chat widget
remove the data-scrollbar=”true” data-height=”200px”
and try data-scrollbar=”true” data-wheel-propagation=”true”
Best Regards, Sean.
That does the same thing with the div, doesn’t show anything because there is no height set on it. It isnt inheriting the parent height but expecting an explicit height set i guess based on things in the scrollbar classes. I’ll try to see if i can do something with CSS to keep the scrollbar class and get it to work
Hi,
Did you try the attribute / example that i show in previous comment?
The core function is not rely on the height set on it. If you didn’t set the height for data-height, it will remain the default element height and will not set the height to 0px.
The first image is without the data-height attribute
https://ibb.co/sJYLKzFThe second image is when expand button has been clicked and window height is smaller than the content height
https://ibb.co/rsq815xp.s you may share us some screenshot regarding the issue that you have right now
Best Regards, Sean.
The card-expand method, i would like to be able to ajax load content into it after clicking on it (settings for the card data as an example). Can you point me in the direction for the onclick of that which loads the existing card-body into the overlay, etc so i can look at redirecting that elsewhere.
Hi,
You may edit the following code for the card expand function
FILE: /src/app.js
LINE: 396
FUNCTION: handleCardAction
Best Regards, Sean.
i made a mistake, some people stole my files, how can i turn off this template? so others can’t use it
Hi,
There is no way to prevent other to use the template if they get the files. You just need to keep the license id to prove that you have the rights to use the template.
Best Regards, Sean.
Purchase code: 5cadc023-952e-48dd-b159-f2a1f19d741a
where is the rest of the documentation, things dealing with the grid layout, how set column widths, code to use for basic cards etc?
I asked this question over a week ago and still have not received a reply. My next step will be to instruct my bank to do a chargeback if I do not get support.
Craig
Hi,
Sorry to say that i have missed out your question from the email. It is good that you can post the question in themeforest so that i won’t missed out any question.
The documentation like grid layout, column width, card and all the ui components will follow the official bootstrap documentation. This is because the template is build on top of Bootstrap 5.
You may refer to https://getbootstrap.com/docs/5.3/getting-started/introduction/for all the documentation
Best Regards, Sean.
It is not the same, nowhere in the bootstrap documentation can I find a class named hljs-container which you use. This is only one example of how the documentation is lacking.
What you are suggesting is that I must look at the way bootstrap does it, then figure out how you applied it to your template. This is not on.
Hi,
There is only one plugins is not included in documentation which is hljs used for displaying the example of code like code editor.
In order to use the bootstrap template, you should have some basic knowledge regarding the bootstrap syntax / code / class / javascript syntax.
And what you have asked in previous comment (grid layout, column width, card) which is the basic bootstrap components can be found in bootstrap documentation. This is why i assume you are not familiar with the bootstrap components and point you to their documentation.
Best Regards, Sean.
what i also don’t understand is that you are referencing font-awesome, but all your icons have classes such as bi bi-cpu, bi bi-bar-chart, etc. where are those iconns referenced from and where can we see which icons are included.
Hi,
That is the icons from bootstrap as well and you may check the list of plugins here
https://seantheme.com/hud/documentation/#referencesBest Regards, Sean.
Thanks Sean,
I will reply here if I get stuck again, but that should get me on my way
Glad to hear that your issue has been resolved.
Best Regards, Sean.
Hi Sean,
if I change the color to yellow, the accordion up/down arrows remain green. This is true also for your live demo. How can this be fixed?
Hi,
You might need to change the variable in /src/scss/_variables.scss in order to switch the theme color to yellow color.
E.g
$theme: $yellow;
Best Regards, Sean.
Hi,
You might need to know what is the use for those scss files. Scss is used by bootstrap to generate the css file.
If you not gonna to try edit / modify the scss file and generate the new css file, you may try the traditional way.
To change the color of the accordion arrow in Bootstrap 5, you can use CSS to target the ::before pseudo-element of the collapse-button class. Here’s an example:
/* Change the arrow color to red */ .accordion-button::before { color: red; }
Best Regards, Sean.
I created a css style entry on my test page with <style> .accordion-button::before { color: red; } </style>
The arrows and the accordion heading still remains green
Hi,
If you created a css style entry, you may try the following code
<style type=”text/css”>
.accordion {
-bs-accordion-btn-active-icon: url(“data:image/svg+xml,%3csvg xmlns=’http://www.w3.org/2000/svg' viewBox=’0 0 16 16’ fill=’%23f9e80d’%3e%3cpath fill-rule=’evenodd’ d=’M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1.708 0l-6-6a.5.5 0 0 1 0-.708z’/%3e%3c/svg%3e”);
—bs-accordion-active-color: #f9e80d; }
</style>
Best Regards, Sean.
Hi Sean,
nope, it still stays green
Hi,
Try to copy the code here. May be themeforest will strip some special character. https://pastebin.com/DzLXbQ5VBest Regards, Sean.
still no change with he code from pastebin. sorry
Hi,
Can you at least share some screenshot / html code that you have applied? Or else it is hard to debug it on my side.
Best Regards, Sean.
<style type=””text/css””>
body .accordion {
-bs-accordion-active-color: var(-bs-yellow);
-bs-accordion-btn-active-icon: url(“data:image/svg+xml,%3csvg xmlns=’http://www.w3.org/2000/svg' viewBox=’0 0 16 16’ fill=’%23f9e80d’%3e%3cpath fill-rule=’evenodd’ d=’M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1.708 0l-6-6a.5.5 0 0 1 0-.708z’/%3e%3c/svg%3e”);
}
</style>
<button class=”accordion-button” type=”button” data-bs-toggle=”collapse” data-bs-target=”#collapseOne”> Accordion Item #1 </button>
... ...Why your style type=”text/css” has two double quote?
visual studio must have inserted the extra codes as I just copied your whole <style></style> section.
Anyway, removing the exta quotes solves the problem.
Thanks for your patience Sean
Glad to hear that the issue was resolved
Hello,
There is a problem with the countdown module, if there is less than 1 day left, the design breaks down and the hour, minute and second fields merge.
Regards.
Hi,
Thank you for your comment and report. Regarding your question, below is the quick fix for the issue.
FILE: /src/scss/pages/_coming_soon.scss
LINE: 48
CODE:
change from
& .countdown-show4 .countdown-section {
to
& .countdown-row .countdown-section {
Best Regards, Sean.
Full Widthmenu not opening or closing on full width page
Hi,
Thank you for your comment and feedback. Full width page sidebar is not included by default.
Best Regards, Sean
Is there a pos payment page?
Hi,
Nope. There is no payment page for pos ui.
Best Regards, Sean.
I wonder if there is a sample that provides a tree view form among the templates.
If not, I wonder if there is a plan to provide a component in the form of a tree view. I also wonder if there is a way to implement a tree view form.
Hi,
Thank you for your comment and feedback. I will try to include a tree view design in next version release.
Best Regards, Sean.
Is there an installation service?
Hi,
You might need to find some programmer on your side in order to install it into your own system.
Best Regards, Sean.
1cd4666f-6773-4c9a-8362-cba64a4e39bf how to Install？？
Hi,
You may view the html files via /template_html/dist/index.html.
p.s this is a HTML template. You might need to have some programming knowledge in order to integrate it into your own backend system.
Best Regards, Sean.
Hi,
Please I need to know how to update this theme?
I used all files from ‘dist’ folder from HUD version 1.8 for my project.
I need a simple way. What files should I overwrite?
Regards
Hi,
You just need to replace the following folder will do.
/assets/css /assets/js /assets/plugins
Best Regards, Sean.
