Discussion on Xenon - Bootstrap Admin Theme with AngularJS

Discussion on Xenon - Bootstrap Admin Theme with AngularJS

Cart 3,090 sales
Well Documented

Laborator supports this item

Supported

This author's response time can be up to 1 business day.

520 comments found.

I am using the angular.js version with horizontal menu. When i access the login page the menu bar still appears. How do i hide the horizontal menu bar when i am in the login page ?

Hi vembu

I saw this issue and fixed it. Here is the quick fix for you:

Open ~/app/tpls/layout/horizontal-menu.html

Add ng-hide attribute to nav element, it looks like this:

<nav class="navbar horizontal-menu" ng-class="{'navbar-fixed-top': layoutOptions.horizontalMenu.isFixed, 'navbar-minimal': layoutOptions.horizontalMenu.minimal, 'click-to-expand': layoutOptions.horizontalMenu.clickToExpand}">

Replace to this:

<nav class="navbar horizontal-menu" ng-hide="isLoginPage || isLightLoginPage || isLockscreenPage" ng-class="{'navbar-fixed-top': layoutOptions.horizontalMenu.isFixed, 'navbar-minimal': layoutOptions.horizontalMenu.minimal, 'click-to-expand': layoutOptions.horizontalMenu.clickToExpand}">

It will fix the issue.


Arlind

Hi Laborator,

how do I select be required? data-validate = "required" does not work.

Hi gustavops

To enable this plugin you must import:

<script src="assets/js/jquery-validate/jquery.validate.min.js"></script>

<input type="text" class="form-control" name="name" data-validate="required" data-message-required="This is custom message for required field." placeholder="Required Field" />

This is how we have implemented it.


Arlind

Can you summarize the differences that exist between the HTLM and angular version.

Hi Steve, the HTML version, it has basic HTML implementation, and all pages are provided in static content, AngularJS has integrated inside JavaScript MVC framework.

Ylli

Sorry if it was asked before, do you include the two versions? ..one with angularjs and another with with pure bootstrap? I mean, I dont want to use angular but Im really interested in buying the theme.. but if angluar is the integrated Im afraid thats a no for me. :)

Hi onlyfrank, buyers get 2 versions, just like in the demo :)

Ylli

Thank You Ylli!

Awesome job guys! REALLY love it, super clean!

-Frank

Glad to hear that, enjoy Xenon :)

Ylli

Would it be difficult to implement the form elements of this theme?

http://pages.revox.io/latest/form_elements.html

I would try to combine the two myself but I’m not much of a front-end guy – I wouldn’t know what to do with LESS files and whatnot to make it work

Hi jamesaps

These features can be added but we must design them and it takes time, because our designer is not present till after new year.

Thanks for your suggestions, we are going to bring some new features in the next version.


Arlind

Wow this theme is amazing … will purchase soon. Just a bug I found:

Image and video hosting by TinyPic

The submenu on the side bar is hidden by the main content

Also if you have the sidebar collapsed and fixed, it will appear static

Thanks for reporting this, we will check that and release a new update when is ready :)

Ylli

If I buy this theme, I need someone to install for me (Assemble the database of all pages (paid well for it)) is possible?

Hi, playnicegaming, maybe you can find one on Envato Studio or oDesk.

Ylli

Hey! I got an error with your Template: Error: [$compile:tplrt] http://errors.angularjs.org/1.2.26/$compile/tplrt?p0=sidebarProfile&p1=app%2Ftpls%2Flayout%2Fsidebar-profile.html

I have the latest Update installed…

Hi Coach83

If you have overwritten the files there might be issues of this kind. So you must read the changelog to know which files have been added/modified/deleted.

Please give me your bitbucket username and I will invite to see the repository.


Arlind

Hi Laborator,

First, I must say, Xenon theme is very impressive. Unfortunately, I would like to ask for a few questions regarding to AngularJS and some of css requirement.

1. For AngularJS part, do you have a plan to add automation workflow such as Yeoman, Grunt, Bower into this theme in near future?

2. Style Sheet link tag in index.html in Angular app require some font from Google fonts. I would like to ask, if it possible, to include those fonts into this theme? So it can be loaded even if the internet is dead.

Regards.

Hi zentetsuken

Thanks for your kind words.

1. As new developer in AngularJS I have no clues how to use these automation process, but will consider learning how to add them in the next update. Also would be great if you can give me any tip how can I do this.

2. The fonts used from Google Webfonts cannot be downloaded, they are only served in CDN network. If you find them as typeface for web, then you can include the font.


Arlind

Hi, Laborator

You can look for Grunt document here http://gruntjs.com/ and Bower http://bower.io/

As for Yeoman, it’s actually is a generator, however Yeoman angular generator has a very good grunt example + automation workflow, you can start from there.

Anyway, thanks for your reply and keep up good work guys. Cheers!!

Regards.

Hi zentetsuken

Thank you so much for your beautiful words and your suggestions, will provide these features in the future updates.


Arlind

Timeline does not open in Angular version. I did not even change anything. Just exploring your template as downloaded.

Yes, I just bought it two days ago. Downloaded version is different from your demo. I found and fixed the error myself.

The left-aligned timeline also has a glitch. When you make the screen wider, the date/time slowly goes underneath the circled symbol. The distance between the time, the circle, and the post should not change.

Hi, the demo version is exactly the version that the buyers purchase.

As for the time/date, can you try to add this CSS code, it will help a bit:

.cbp_tmtimeline>li .cbp_tmtime {
padding-right: 120px;
}

Ylli

I noticed some strange behaviour of the horizontal menu. When I click on any menu item and then move the cursor away from it, it immediately shows a small underscore _ char right before the item title, but when I point at it again, it disappears.

screenshot

Can you tell me which browser are you using? I tested it on Chrome, FF and Safari, and i can’t reproduce your problem.

Ylli

Latest version of FF on Mac OS

I’m also using latest FF on Mac, but i can’t see this bug that you are reporting.

Ylli

Hi ,

Can you add a horizontal timeline similar to this :

http://codepen.io/P233/pen/lGewF?

Hi paragsanghavi, on Xenon there are 2 types of timelines,

1. http://themes.laborator.co/xenon/extra/timeline/ 2. http://themes.laborator.co/xenon/extra/timeline-center/

And we don’t plan to release a new one.

Ylli

The display drop down is not working on the angular version. But it works in the html version is there anything i am missing. Its not working on the below url too

http://themes.laborator.co/xenon/angular/#/app/tables-responsive

Hi vembu

The dropdown is generated by TableTools, I guess they should have a fix for the dropdown menu. Because all I did here is that I’ve used the jQuery("#el").DataTable({...}); to initialize the table.


Arlind

Can this template be used in designing a product and selling over codecanyon with credit given in footer/header as you want??

Hi

No this is not allowed. Only if you buy Extended license (1150$) otherwise Envato will take it down.


Arlind

Hello Laborator

Thank you for your great theme!

I have a problem though, i can’t seem to get the custom checkboxes working (with iCheck). The regular checkboxes are hidden, but the advanced checkboxes are not displayed. I think the CSS isn’t loaded correctly, i already included the icheck.min.js and the skins/all.css. Am i missing something?

Regards Ramon

Hi comvation2014

Firstly thank for your kind words.

I am not sure why this happens to you, you seem to have everything set up correctly because I checked our files and looks the same:

http://cl.ly/YwK3

Just make sure you initialize the checkboxes correctly:

$('input.icheck-1').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal'
});

$('input.icheck-2').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red'
});

I hope this will work for you.


Arlind

Hi Laborator,

I purchased this theme, and I found a bug in the angular version.

In the demo, when you go on the Data Tables page, go to another page, then go back to the data tables page, it throws up a javascript error (Cannot read property 'value' of null) then the table cannot be sorted or filtered anymore.

Do you have a fix for this ?

Thank you.

Hi Innovmc

Thanks for reporting this. I have been trying to fix this issue but with no luck :( I guess it should be the filtering plugin that crashes here, I tried about 30 minutes to fix but I couldn’t :( If you could find a fix we would appreciate if you could share with us.

The bug appears here:

http://cl.ly/Ytz7


Arlind

Hi Laborator,
thank you very much for this amazing theme.
We have a problem with “Bootstrap WYSIHMTL5” editor. When we insert a link nothing happens. By clicking on the “edit HTML” button we can see all other things formatted, but no link is inserted. Do you have a fix for this?
Thank you.

Hi Wachipi

Firstly thank you for your kind words, we really appreciate them.

I have tried to find a fix for this issue but with no luck, I have added in todo list for this fix and will discover more about where the issue is coming and try to fix in the next version.

Cheers
Arlind

I just love this theme! Great features and still expanding!

Question: can you add something like this? Or have a good suggestion to solve this with the current possibilities?

Hi sversteg

Thank you so much for your sweet words.

We will add these type of tiles in the next version, I have added them to todo list.

For now you can create these with CSS till we release new update.

Regards


Arlind

Hi, I started using the Xenon upgrade. It seems to be fine, but there is one javascript console error as below:

Error: [$compile:tplrt] http://errors.angularjs.org/1.2.26/$compile/tplrt?p0=sidebarProfile&p1=app%2Ftpls%2Flayout%2Fsidebar-profile.html

Error: error:tplrt Invalid Template Root

Could you please let me know if you have any solution?

Hi maurizioconfortin

Please locate that template in newest update and place it on your project tpls/ folder. If you want to see the changes between 1.2.1 to 1.3 please give me your bitbucket username so I can invite you to see the git repository of changes.


Arlind

Well done on the 1.3 release, looking even better!

Unfortunately one issue still exists – the collapsed sidebar nav showing through the main content container.

https://www.dropbox.com/s/stq2mhijy5doypn/xenon-issue.PNG

To repro:

  1. Make sure left hand nav bar is in expanded mode.
  2. Expand any of the parent nav elements with child links by clicking on it.
  3. Collapse the left nav bar using the ‘burger’ toggle button.

Hi trystol, thanks for reporting this, we will include it on the next update. If you want to fix it now just put this code on CSS:

.page-container .main-content:hover { z-index: 0 !important; }

Ylli

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey