Discussion on Xenon - Bootstrap Admin Theme with AngularJS

Discussion on Xenon - Bootstrap Admin Theme with AngularJS

Cart 3,091 sales
Well Documented

Laborator supports this item

Supported

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

520 comments found.

Hi,

I’m having problems with the sort in the databables angular version, same as integcubes.

You said to try angular-datatables (http://l-lin.github.io/angular-datatables/#/welcome). I did, but the new version won’t work (I would have to upgrade all angular and jquery versions), so I tried the old one, v 0.2.

I put everything in index.html;

<script src=”assets/js/datatables/js/jquery.js”></script> <script src=”assets/js/datatables/js/jquery.dataTables.min.js”></script> <script src=”app/js/angular/angular.min.js”></script> <script src=”assets/js/datatables/js/angular-datatables.js”></script>

But when I add ‘datatables’ to the list of references in my angular.module, in app.js, everything stops… Have you actually made this work? Could you post some more information?

Thanks

Hi alexandrevalente, have you fixed your problem?

Kind Regards,
—Ylli

Not really, I used a jquery-only solution, which is bad since this is an angular project… But it is working. Hope you include this angular-datatables in your next version.

Hi alexandrevalente

I haven’t tested it yet with the new angularjs datatables so in the next update we will try implement this angularjs version of datatables, but you can try to update to the latest version of angularjs datatables and see if it works.

Best regards


Arlind

Hi,

I plan to buy this template but I have three questions:

1: Do you plan to propose email templates such as regsitration, forgot password …

2: Do you plan to create a part ecommerce. Details of the product and edition of products.

3: What is the roadmap for the next year? What do you plan to include?

Thanks,

Hi there,

We are planning some updates for the theme but not big updates only some bug fixes and plugin updates, we don’t plan adding new features in the theme.

Kind Regards,
Art

Hello again,

Is there a fix for http://themeforest.net/item/xenon-bootstrap-admin-theme-with-angularjs/9059661/comments?page=8#comment_8715949 yet?

I am using the footer-type-2 class and it really messes up the layout to have a floating black bar.

Thanks,

Hi zerofail

Actually this issue hasn’t been solved, but I will give a try when the update is ready. I am sorry for delay because we are very busy with the support and don’t have an ETA for the update.


Arlind

Thanks, keep us updated :)

Glad to hear that :)

Arlind

Hello there and thank you for another excellent theme.

For some reason, Scrolling in fullscreen of the angular version breaks the background (it scrolls white).

Let me know if you need more explanation.

Hi zerofail, yep now i see it

I think i found a solution for that, just go to this folder assets/css/ and open xenon-core.css

and from this CSS line

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

just comment the height: 100%; rule, it should look like this:

html, body {
  /* height: 100%; */
  margin: 0;
  padding: 0;
  border: none;
}

Have a nice weekend :)
—Ylli

Thanks! Would you happen to know in what LESS file we should fix that ?

Hi again,

Just go to assets/less/xenon-less/main.less

Kind Regards,
—Ylli

I am trying to run Karma – Jasmine tests on the Xenon AngularJS code and it is erroring out with many errors. Do you have a karma-conf.js file for the code?

Hi ,

This issue is related to theme developer and I am unable to give you any solution about this because I am not backend developer.

Our theme developer Arlind can help you with this, but he took the vacation and will be back on 7 May.

When he comes back, just reply to this thread and you will make sure Arlind will see your comment.

Hope for your understanding :)

Hi,

In Angular version responsive table page,

When i fill the table with ng-repeat focus doesnt work. How can i fix this?

Hi hasanaydogar

I guess you have to initialize responsive table manually after filling the data with ng-repeat, so remove table-priority and all data- attributes in the table, after that inside the controller (after ng-repeat is finished) call this JavaScript:

<script>
   $(function() {
      $('.my-sample-table').responsiveTable({options});
   });
</script>

I hope this will help you.


Arlind

I have a question regarding ‘modeless’ windows… Basically I’m trying to make a chat/conversation window stay on screen so the user can continue to work or minimize it to go back to later. In your templates I see what you’ve done regarding that but I’m wondering if that is the best way to do it or not.

Here’s an image of what I’ve built so far. http://chilp.it/b5775c7 The conversation/chat window I envision will also have a minimize option in the title bar so the user can minimize the chat window.

I’ve found a plunkr that does something like this, http://plnkr.co/edit/IacJX1mlsQ09h44LXV2f?p=preview

Is there any thing in your templates that does something like this? Perhaps you have another suggestion for me?

Thanks, Troy

Hi Troy

The chat conversation window we have implemented are just a plain HTML and so if you want to continue to develop your chat system, you may use the current style of the chat we have included.

As you can see there are two types of chat:

1. Sidebar chat – http://drops.laborator.co/19obl

2. Footer chat – http://drops.laborator.co/103Aj

Its up to you to decide which one you will use, and the way you implement the chat matters, so if you are a ready-to-use chat plugin you may change the style of chat and its implementation.

I am not sure what can help you more but i suggest you to use the easiest method you to implement the chat.


Arlind

One more problem I am facing. I am unable to use Data Table (Basic) with AngularJS table.Initially table appears perfect, but when I click on Column Sort, Search Text or Page Number, my data vanishes and shows AngularJS typical expression tags.

Hi integcubes

The reason your page get that page change is because the sorting link has ”#” in href.

So recently I have found that DataTables have specific version for Angular and it has really easy initialization:

http://l-lin.github.io/angular-datatables/#/welcome

You just need to include the library, and module datatables

And assign datatable attribute to table

<table datatable="" class="row-border hover">

This will solve all the issues with DataTables.


Arlind

Hi guys! When are you planning to release update?

Hi akasangre, we don’t have any ETA, but an update will come with some fixes, plugins updates and some new features we think.

This month we are very busy updating our latest theme, so don’t expect it very soon.

In the meantime if you have any suggestion about Xenon, or oif you fund any bug, we would be glad if you can report that :)

Kind Regards,
—Ylli

Hi, the scroll bar does not appear in IE when in full-screen mode. Any fixes for that? Tnx.

Hi there, i investigated to this problem and it looks like this is problem in IE, here is a good article that may help you link.

and please try to add this code to custom.css, and see if it does something

@-ms-viewport{
  width:auto!important
}

Kind Regards,
—Ylli

Thank you for the effort, but your answer/suggestion is useless!!

Hi SingularGroup

Sorry about this but we are not able to fix this for the moment, if you see other themes for example this popular angular theme:

http://flatfull.com/themes/angulr/angular/#/app/dashboard-v1

It is the same, I think the problem is at IE so in the next update I will try to find a fix for this issue.


Arlind

Hi, Datepicker doesn’t works properly in model window. It shows calender when cursor goes out of browser.

Kindly help me

I did the same but it was showing fine!

Is it possible for you to record a video about this so I will understand what is going wrong.


Arlind

Here is my code, if you can understand

$scope.PopUpEdit = function () {
      $('#mdlDetail').modal('show', { backdrop: 'fade' });
       $("#DoB").datepicker({
       });
   };
<!- Add/Edit Modal Box ->
    
        
            
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>×</button>

{{Action}} User

Title:<select id=”Title” name=”Title” class=”form-control” ng-model=”selectedTitle” ng-options=”item.TitleId for item in PersonTitles” ng-change=”TitleChanged()”></select> First Name:<input id=”FirstName” name=”FirstName” type=”text” class=”form-control” ng-model=”User.FirstName” /> Last Name:<input id=”LastName” name=”LastName” type=”text” class=”form-control” ng-model=”User.LastName” /> Gender:<select id=”Gender” name=”Gender” class=”form-control” ng-model=”selectedGender” ng-options=”item.Title for item in Genders” ng-change=”GenderChanged()”></select> Date of Birth: <input id=”DoB” type=”text” class=”form-control” data-format=”dd MM yyyy” ng-model=”User.DoB” /> <button type=”button” class=”btn btn-white” data-dismiss=”modal” ng-click=”CancelEdit()”>Close</button> <input id=”Update” type=”button” value=”Update” class=”btn btn-purple” ng-click=”Update()” ng-show=”Action 'Update'" /> <input id="Save" type="button" value="Save" class="btn btn-purple" ng-click="Save()" ng-show="Action ‘Add’” />

Hi

Here is what you are doing wrong:

$scope.PopUpEdit = function () {
    $('#mdlDetail').modal('show', { backdrop: 'fade' });
    $("#DoB").datepicker({});
};

You are initializing $("#DoB").datepicker({}); before the modal is shown, thats why it acts weirdly. Here is the fixed code:

$scope.PopUpEdit = function () {
    $('#mdlDetail').modal('show', { backdrop: 'fade' });

    $('#mdlDetail').on('shown.bs.modal', function()
    {
        // Intitalize the datepicker only when the modal is already shown
        $("#DoB").datepicker({});
    });
};

This will work.


Arlind

Hi,

This is a very nice admin theme. We are finding issue with some of the areas of this theme in Safari for Windows version 5.1.7(7534.57.2). Here is the link that are not working on Safari for Windows for the said version:

http://themes.laborator.co/xenon/angular/#/app/dashboard-variant-4 http://themes.laborator.co/xenon/angular/#/app/extra-icons-font-awesome

Can you please suggest/provide fix for this issue?

Thanks.

Hi nkaliya,

Can you please attach us screenshots where those problems are?

As for the second url can you please add this code, it will fix the issue

.tocify.fixed {
  position: fixed;
  top: 15px;
  width: 17% !important;
}

Cheers!
—Ylli

Hello Ylli,

Thanks for your reply. Please find 2 link of screen captures shared on Google drive. These two pages does not load at all in Safari on Windows, the loader bar keeps on waiting for infinite time. Let me know if I can provide any other information.

https://drive.google.com/file/d/0B7uHHSXT9LJuS2VJTklmVTh6SlU/view?usp=sharing https://drive.google.com/file/d/0B7uHHSXT9LJuU2M4d2MxUUlMWVE/view?usp=sharing

Thanks.

Hi nkaliya, this may happen because Safari for windows it’s not updated for years, and it don’t supports latest technologies.

We will check that again, but i doubt that it will work.

Cheers!
—Ylli

“We have used this admin template for a huge project. That save us so much time ! thanks !!”

  Xenon received a 5 star rating from IronTemplates for Feature Availability.

Are you using Xenon too? Don’t forget to rate it!.

Hello,

Thanks for another excellent theme by you guys: Xenon.

We are trying to use it now (Angular version of the theme) and are getting an Angular error in console, here is the link of error:

https://docs.angularjs.org/error/$compile/tplrt?p0=sidebarProfile&p1=App%2Ftpls%2Flayout%2Fsidebar-profile.html

Can you please provide a fix how to resolve this issue? Thanks.

Hi nkaliya, we are really sorry for the late response, as we accidentally pushed “mark as read” for all tickets :S

Do you still have this problem?

Cheers!
—Ylli

How do i modify the Navbar and Accordion to use the theme colors? So when the user changes the color to say “Purple” the Navbar and Accordion also change.

Thanks

Hi there,

what you need to do is put the project in a LESS compiler, and open page-skins.php file located in this folder /assets/less/xenon-less/,

scroll down and put the element id or class you want to customize below this code, you can use one of the variables below, they will change when the skin changes.

.xenon-sidebar-skin-variant(@bg-color; @text-color; @text-active-color; @border-color; @primary; @secondary; @scroll-color: #fff) {

Regards,
Art

I do not have a page-skins.php file. I am using AngularJS.

Sorry for this mistake, file name is page-skins.less not .php


Arlind

Hi I’m trying to change some table style and I want to remove blue box and move red box to center just wondering where can i find css file and fomats.

I dont know why it doesnt show up In Datatable “showing 1 to 10 of 57 entries” I want to remove this text and “previous ,1 2 …. next” paging I want to move to center but I can’t find where is Js file.

Hi wangspider

To translate strings in the data tables go to this file:

/assets/js/datatables/dataTables.bootstrap.js

It has all the required strings and code for jQuery datatable.


Arlind

Hi I’m trying to insert a menu item using services.js like the example from the docs, but the menu item i’m trying to insert has an accent, ie: Relatórios.

The accent not appears on the sidebar menu, and the word is missing the letter “ó”. ie: Relat?rios

Any solution for this issue?

Thanks in advance

Hi wrodrigobr

Can you please try to add this in ascii character form, so instead of * Relatórios * write this:

Relatórios

It should work!


Arlind

Hi,

I purchase your theme and love it. But i cant make a little thing. I want use your Counter Widget live value with interval.

I try everything but i can’t call your function from another file.

Can you help me ?

Hi CeRBeR

Thanks for purchasing this theme.

I guess your are using Angular version of Xenon. This fix has been suggested by our user, so please read this thread and see if this will help you:

http://themeforest.net/item/xenon-bootstrap-admin-theme-with-angularjs/9059661/comments?filter=all&site=themeforest.net&term=Counter&utf8=%E2%9C%93#comment_9060509


Arlind

Hi,

I have exactly the same problem.

I am using the HTML version of xenon and I have an issue with the csv / xls export module. The export works fine with the angular version but not in the HTML version. I have checked on your demo and it’s the same problem. Can you please advise how to make the export work ?

I can see the csv button but it wont export. I checked and the swf is loading properly.

Thanks

Hi milfulles

This issue that has been reported before has been fixed when you have updated DataTabla TableTools plugin, because newer version has this bug fixed.

Also do not forget to set up the SWF path for the export that is specified in plugins docs:

https://www.datatables.net/extensions/tabletools/

Hopefully you will manage to set it up properly.


Arlind

Hi there! Great Template. I just found a bug with the UI Modals. I’m using Chrome and when I open a Modal the backdrop does not display.

I found this was due to Bootstrap 3.3.1. To fix the issue you could do the following or upgrade to Bootstrap 3.3.4;

.modal-backdrop { width: 100% !important; height: 100% !important; position: fixed !important; }

Hi there,

thanks a lot for sharing this fix with us, we have lately released a new theme and now we’re more free to work on the updates for other themes, I hope we can manage to update Xenon this month.

Kind Regards,
Art

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