1409 comments

Hi Sean,

Thank you for the wonderful template. I have been able to make multiple pages by slicing and dicing your html example files. I have run into a snag though and although I have googled it multiple times, I am not sure what I am doing wrong.

I am trying to utilize your Select With Search option on the form_plugins.html page in the forms_wizards.html page. I have copied over the select with search panel, and the following links to what I think are the complimentary files.

I get the dropdown without the search function. Can you please help?

<!-- ================== BEGIN PAGE LEVEL STYLE ================== -->
<link href="assets/plugins/bootstrap-wizard/css/bwizard.min.css" rel="stylesheet" />
<link href="assets/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
<!-- ================== END PAGE LEVEL STYLE ================== -->

<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="assets/plugins/bootstrap-wizard/js/bwizard.js"></script>
<script src="assets/plugins/bootstrap-select/bootstrap-select.min.js"></script>
<script src="assets/js/form-wizards.demo.min.js"></script>
<script src="assets/js/apps.min.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
Hi Mjengejp,

Thank you for your comment and feedback. You might need to render the bootstrap select plugin after rendering the bootstrap wizard IF the bootstrap select is placed inside the bootstrap wizard content.

Best Regards,
Sean.
Dear Support Team,

We would like to kindly ask for your help in order to achieve two things using Flot interactive graphs from the template (Color Admin) that we bought.

Firstly, we need to somehow be able to have time stamps instead of data count on X axis of the graph. A screenshot can be found below:
http://prntscr.com/f1x02l
Instead of 1.0 2.0 etc, we need to show the date of each measurement that is stored in our database.

Secondly we would like to show something like graph paper with millimeters in the background of the graph. We would like to depict an electrocardiograph measurement. The graph appears great, but we need to have a millimeter background.

Please send us an example of how we can manage those 2 things (source code with demo data would be most appreciated).

We would like to ask you for an fast response as we are on a tight schedule.

Thank you in advance for your time and effort.

Best Regards,
Angelos Kynigalakis
Hi Angelos,

Regarding your question,
1. You may use the tickLabel to configure the x or y axis label.
E.g
xaxis: {
ticks: [[0, "Monday"], [1, "Tuesday"], [2, "Wednesday"], [3, "Thursday"], [4, "Friday"], [5, "Saturday"]] }
}

2. So far the plugin do not have the options to change the graph background. If you insist to do so, you may create a small pattern background and apply it into your graph container.

Best Regards,
Sean.
Dear Sean,

Thanks for your kind reply.
Can you please give me an example code on how to apply a pattern into the graph container?

Thanks in advance
Angelos Kynigalakis
Hi Angelos,

You may refer to the following example for the flot background issue.
http://jumflot.jumware.com/examples/Experimental/background.html

Best Regards,
Sean.
Dear Sean,

Thanks for your kind reply.
The example you gave us doesn't work in our diagrams because the type of the graph is different.
Please find below the graph that is generated
http://prntscr.com/f34tbt

and the code that we 're using here
http://prntscr.com/f34tfp

Can you give us instructions on how to generate a graph with a millimeter background?
We 're looking forward for your reply.

Best Regards
Angelos Kynigalakis
Hi Angelos,

First of all, you are not using the Flot chart but NVD3 Chart.
Secondly, you may add the options "ticks(20)" on xAxis and yAxis.
E.g
lineChart.xAxis.ticks(20);
lineChart.yAxis.ticks(20);

Best Regards,
Sean.
Hi Sean,

Wonderful work you have done here.

I am generally python/django by trade with JS knowledge. I am hoping to experiment with your template and get used to the way Angular 2.0 works. Sorry if this is posted elsewhere, but I am having difficulties getting a basic development environment setup with the specific packages you have configured.

I have installed node in a nodeenv and installed all of the dependencies. To view the changes I have made I continuously run: npm start - and watch the page refresh. Everything appears to be working based off of the content you have provided.

The basic .html files all show updates, however, when I edit other files such as the sidebar components etc, I do not see any changes to the names of the titles or honestly anything for that matter.

I also do not ever see any updates to the .css/.js files as the minified ones are the ones loaded on the refresh. Should I be doing something so my files are minified at save?

Which files should I be editing while doing this? Based on the configuration, I assume the .ts files?
Do I need to add something for the less files?
Should I be using gulp?
Should I be using some form of webpack?
Should less be installed and be used?

A step by step basic dev/prod setup would be greatly helpful (and potentially maybe something you throw into the documentation).

Thank you so much in advanced and sorry for the million questions!

node
p.s. I have purchased this without an account so thats why It doesn't show me as a verified purchaser, I can provide additional information via email if you need proof before providing support! Thanks
Hi Node,

Thank you for your comment and feedback. Regarding your question,
1. The main reason why you didn't see the changes is because of we are using the webpack to compile everything into bundle.js for faster load purpose.
2. You may check on the downloaded documentation page - Angular JS 2.x section.
3. Run the command "npm run build" to compile all the typescript file into dist/bundle.js
4. After you run the command, you might be able to see the changes on your browser.

Best Regards,
Sean.
Hi,

Bootstrap datetime picker not working in IE8 browser. Please provide fix for this.
Hi Prabakar,

Thank you for your report and feedback. Because of the IE8 didn't support the array indexOf and trim function, you might need to add the following code before the App.init() in order to solve the issue.

<script>
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;

var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;

for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
</script>

Best Regards,
Sean.
Dear Sean,

Any examples to implement right to left languages in the theme?
Hi Reeehman,

The languages should be saved into your database or some constant variable for your backend programming. We are not providing this example because of there have plenty ways to implement it.

Best Regards,
Sean.
Dear Sean,

If i implement right to left languages, does the theme support it without breaking the css styles?
Hi Reeehman,

Unfortunately, our theme is not support for RTL yet. You might need to add some custom css in order to align the text from left to right.

Best Regards,
Sean.
dgerton PURCHASED
Really love this theme. And thanks for keeping it updated. Great work.

Please don't use the minified versions of your stylesheets in the examples html files. It makes it harder to inspect.
Hi Dgerton,

Thank you for your comment and feedback. Normally if you are using the browser inspect element tools, it will still showing the correct css class and the minified css file will increase the speed of page load. This is why we are using the minified version of css files in our demo site.

Best Regards,
Sean.
Hello...
I am using the ajax version but in my requests I can not use the $.blockUI ().
Exists a similar function in the template to block the screen while waiting for request return?
I tried to use the generic function of jQuery, but it conflicted with the project scripts.
Hi Phgsistemas,

Thank you for your comment and feedback. For your information, we do not have function named blockUI. Can you send us an email with the screenshot for your browser error message. So that we can know what is the issue that you are facing right now.

Best Regards,
Sean.
Hello
Congrats for the great theme.

I use the Material Version.

Is it possible to put an animation when I click to leave the menu in "minify"?

Thanks
Hi Gmartha07,

Thank you for your comment and feedback. You may use the class "page-sidebar-minified" to indicate which element you wish to animate.

E.g
.page-sidebar-minified .sidebar {
//add your animation here
}

Best Regards,
Sean.
Hi,

I'm using ajax template_content_ajax and I'm trying to submit a form from a page that is inside ajax folder. So, when I submit the form, the entire page is reloading. How can I submit without refresh all content?

Tks!
Hi Techsaas,

You might need to use jQuery ajax function in order to submit your form in ajax.
E.g
HTML
=========
<form action="/your-url-here" method="POST" form-ajax-submit="true">
// your form here
</form>

JS
=========
<script>
$(document).on('submit', 'form[form-ajax-submit]', function(e){
var url = $(this).attr('action');

$.post(url, $(this).serialize()).done(function(data){
alert(data);
});
});
</script>

Best Regards,
Sean.
Any plans to update bootstrap form wizard?
Bootstrap-Wizard is no longer maintained (since 2013 - https://github.com/gilluminate/Bootstrap-Wizard/blob/master/README.md). The owner has mentioned combining functionality into twitter-bootstrap-wizard (https://github.com/VinceG/twitter-bootstrap-wizard).
Hi Penleychan,

Thank you for your comment and feedback. Yeah. We will add another bootstrap wizard in next version release.

Best Regards,
Sean.
Hi,
I'm using form_slider_switcher (checkbox) and I'm trying to check / uncheck using jQuery, but I have not been successful. Can you help me?

I tried to use it in the following ways:

jQuery("#chk1").prop("checked", false);
jQuery("#chk1").attr("checked", false);
$("#chk1").prop("checked", false);
$("#chk1").attr("checked", false);

Thanks!
Hi Techsaas,

For switchery, they didn't provide any api / options to check / uncheck the checkbox. But here is the solution from one of the commenter:
https://github.com/abpetkov/switchery/issues/84

Best Regards,
Sean.
Hi Sean,
Awesome theme! I am having a little issue however. I am implementing the material templates with a Ruby on Rails app. When spoofing as an iphone 6 in chrome, if I click on a link in the sidebar, the page will load no problem. However, after this, clicking on a link in the sidebar will just hide the sidebar - perhaps some event bubbling going on? This seems to only happen on the soft-refresh because If I do a hard refresh after this, clicking on the link in the sidebar will work, but again only once and subsequent clicks just hide the sidebar.

This behavior is the same on an iPhone 7 in Safari, however in iPhone 7 on chrome everything works fine. The iPhone/Safari issue is my primary concern.

I have tried playing with the Z-index in the sidebar and sidebar background but nothing with z-index seems to stop this behavior.

If I change the sidebar position to static and the sidebar background to position:static in my chrome developer tools, then the links will work every time - however the top of the sidebar gets cut off by the header. Also, I assume this is not the proper way to resolve the issue.

Do you have any thoughts on what may be happening?

Thanks in advance!
Hi Joe,

Thank you for your comment and report. We have tested our site on iPhone 7 and iPhone 7 plus safari browser and it is working fine on our side. Can you send us some screenshot regarding the issue that you have? So that we can assist you to solve your issue.

Best Regards,
Sean.
Hi,

I got:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.resolve has an unknown property 'extension'. These properties are valid:
object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! color-admin@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the color-admin@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/demonfuse/.npm/_logs/2017-06-10T03_08_26_966Z-debug.log

On a fresh installation. Fresh home-brew on a new Mac. Followed all instructions in the documentation folder. npm install followed by npm run build.
Hi Ascension,

Thank you for your comment and feedback. You may refer to the following link by downgrade your webpack version from beta version to another stable version.

https://github.com/AngularClass/angular-starter/issues/1019

Best Regards,
Sean.
Hi Sean,

I'm having problem in doing form validation following the sample code using angular 2.
When I click the sign in button, the error message is not shown.
Below is part of my code:

HTML :
<form class="margin-bottom-0" [formGroup]="loginForm" (ngSubmit)="submitForm(loginForm.value)" novalidate>

<div class="form-group m-b-15">
<div [ngClass]="{
'has-error':!loginForm.controls['username'].valid && loginForm.controls['username'].touched,
'has-success':loginForm.controls['username'].valid && loginForm.controls['username'].touched }">
<input type="email" class="form-control input-lg" name="username" placeholder="Email Address"
[formControl]="loginForm.controls['username']" required="required"
pattern="[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$" />
<p *ngIf="(!loginForm.controls['username'].pristine && !loginForm.controls['username'].valid) && loginForm.controls['username'].touched" class="help-block">Please enter a valid email address</p>
<p *ngIf="loginForm.controls['username'].hasError('required') && loginForm.controls['username'].touched" class="help-block">Username is required.</p>
</div>
</div>

<div class="form-group m-b-15">
<div [ngClass]="{
'has-error':!loginForm.controls['password'].valid && loginForm.controls['password'].touched,
'has-success':loginForm.controls['password'].valid && loginForm.controls['password'].touched
}">
<input type="password" class="form-control input-lg" name="password" placeholder="Password"
[formControl]="loginForm.controls['password']" required/>
<p *ngIf="loginForm.controls['password'].hasError('required') && loginForm.controls['password'].touched" class="help-block">Password is required.</p>
</div>
</div>

<div class="checkbox m-b-30">
<label>
<input type="checkbox" /> Remember Me
</label>
</div>

<div class="login-buttons form-group">
<button type="submit" class="btn btn-success btn-block btn-lg"
[ngClass]="{'disabled': !loginForm.valid}"
[disabled]="!loginForm.valid">
Sign me in
</button>
</div>

<div class="m-t-20 m-b-40 p-b-40 text-inverse">
Forgotten password? Click <a (click)="forgotPassword()" class="text-success">here</a> to reset.
</div>
<hr />
<p class="text-center">
© Color Admin All Right Reserved 2015
</p>
</form>

TS:
loginForm : FormGroup;

constructor(
private router: Router,
private authService: AuthenticationService,
private alertService: AlertService,

fb: FormBuilder
) {
this.loginForm = fb.group({
'username': [null, Validators.required],
'password': [null, Validators.required]
})
}

ngOnInit() {
window.dispatchEvent(new CustomEvent('form-validation-ready'));
}

Thank you very much for your help
Hi Hazel,

After you change the file, you might need to run the command npm run build to compile the ts file into bundle.js.

Best Regards,
Sean.
Hi Sean,
Thanks for your reply.

I got another question in using the switchery checkbox.

<input *ngIf="userDetails.userStatus != 2 && userDetails.userStatus == 0" type="checkbox"
[ngModel]="userDetails.userStatus"
data-render="switchery" data-theme="default" data-click="check-switchery-state" checked/>
<input *ngIf="userDetails.userStatus != 2 && userDetails.userStatus == 1" type="checkbox"
data-render="switchery" data-theme="default" data-change="check-switchery-state"/>
<input *ngIf="userDetails.userStatus == 2" type="checkbox"
data-render="switchery" data-theme="red" data-change="check-switchery-state-text" checked/>

I have condition above to display the switch according to different status.
When the status is 2 (display in red) and user click on it, how could I change the switch to different theme color?

Could you please advise? Thank you
Hi Hazel,

We suggest you to use the switchery in Angular version.
https://www.npmjs.com/package/angular2-ui-switch

Best Regards,
Sean.
lommez PURCHASED
Hi Sean,

Do you have plans to update the project to support news versions of webpack?

Thanks
Hi Lommez,

Yeah, we are preparing the next update for Color Admin and upgrading from angular 2 to 4 is one of the update for version 3.0.

Best Regards,
Sean.
lommez PURCHASED
Do you have an expected date for that release?
Hi Lommez,

The version 3.0 will be released within this two weeks.

Best Regards,
Sean.
c-liang PURCHASED
hi sean,

Really cool template !!
I would like to confirm 2 things as follows:
1, After purchase, will I also get the past version?
Since I consider trying with AngularJS 1.x, is version 2.0 also included?
2, Is there any extra pay for getting updated version in the future after purchase?

Thanks & Regards,
Liang
Hi Liang,

Thank you for your comment and feedback. Regarding your question:

1.
After purchase, you will be able to download the latest version of Color Admin (v2.2).
Both Angular 1.x and 2.x is included in our template.

2.
All the future update will be FREE of charge. Once we have pushed another version of updates to Wrapbootstrap system, you will be able to receive a new download link to download the latest version of the template.

Best Regards,
Sean.
Hi Sean,

I'm having problem with calendar, in the console apear appears '$(...).fullCalendar is not a function' and if i search in 'calendar.demo.js' this function doesn't apear, can you help me with this?

Thanks for your time :D

Andrés
Hi Andres,

Sorry for the late reply. You might need to double check all the required css and js file for fullcalendar has been included properly.

Best Regards,
Sean.
Hi Sean,

In our application we have multiselect tree dropdown field in a form. Can you provide a design for the same using jstree plugin?
Hi Prabakar,

You might need to write your own customisation css / js file in order to fulfil your own requirement.

Best Regards,
Sean.

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase

$30
5878Purchases

Licenses: Details »

Single application $30
Version:3.0
Type:
  • HTML Template
Bootstrap: Compatible with 4.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:No
Categories:
Tags: admin template, blog, bootstrap, css3, e commerce, forum, html5, jquery, one page parallax, responsive
Item#:WB0N89JMK
Released:3 years ago
Updated:4 months ago
Sold exclusively on WrapBootstrap
seanngu

seanngu

Signed up 4 years ago

Need a front-end theme?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 9/10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running: