Hi themicon team,

I have a problem:

I need a fixed layout in my solution, i'm working on aspnet core and jquery (i only add class="layout-fixed" to body element), but in one of page i need to show something fixed on the top, and the way for scroll to specific content is document.location.href in javascript, but i can't scroll successfully (also i've tried this solution: https://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery). Can you help me?
Hi, adding fixed content, to an already fixed element, needs some extra css to locate correctly, for example the page heading needs some margin to locate below topnavbar and right next to the sidebar.
The href scroll should work because the scroll in on body element, but sometimes plugins or a configuration may interfere, any chance we could see your site online? It's hard to say what could be the problem without seeing the code running at least. If you want to keep it private, please send us a message via our profile page and we will chat via email.

I've got almost everything working perfectly but I'm having an issue with the static pages (.e.g error404). For some reason it is not rendering propertly - it's showing the cshtml content in the browser, but not formatted as through the example. On the example it is working fine but in my site I seem to have missed something.

all other pages are rendering fine.

Any suggestions on what I missed here?
Some additional info: This is the angular mvc5 template I'm using.
The controller is triggering correctly and the correct view is loading.
Hi, it's difficult to say without seeing the whole context, and never had a similar error like this. After google similar issues, it seems it could something related from an IIS configuration to a file bad located. If some pages are working fine, iis should be ok, so there must be something specific with static pages.
The main difference in this pages is the layout used, you can see it at the top of each page:
@Layout = "~/Views/Shared/_LayoutPage.cshtml";
So, one chance is that the file doesn't exists in your project or it's not in the right location. For example, the project mvc5+jquery seed version doesn't contain this file and needs to be copied manually to use pages like 404, login, etc.-

Let us know if you have any question.
The @Layout = "~/Views/Shared/_Layout.cshtml"; is present. All the other pages are loading that as the layout template.
Also suspected a missing file or invalid reference, but no luck yet tracking it down.

Hi, could you check that the file "_LayoutPage.cshtml" is present, not "_Layout.cshtml" ? Because the second one is only used for admin pages.

I've copied the _LayoutPage.cshtml now from the Jquery project, but no change.
The template I'm using is the backend-mvc5-angular one and that does not contain a _LayoutPage.cshtml. Yet when I run that project the static pages runs fine.

From what I can see that uses the _Layout.cshtml template as well (when I view source).
ok I made some progress here. If you can shed some light on this behaviour and advise me the approriate way to use this it will be greatly appreciated.

First I had this line uncommented: $locationProvider.html5Mode(true);

If I call the page directly http://localhost:9090/pages/error404 I get the unrendered html. (managed to reproduce on the template)
Calling it with "http://localhost:9090/page/404" gives me a blank page.
Calling it with "http://localhost:9090/#/pages/404" gives me the properly rendered 404 page.

Then I commented the $locationProvider.html5Mode(true); out again. Calling it with "http://localhost:9090/#/page/404" then works fine.

Is this the expected behaviour?
Any suggestions here?
Hi, thanks for update, and sorry for previous answer we understood you were working with jquery version, not angular.
Regarding to second comment, the sentence $locationProvider.html5Mode(true); enables html5 history in angular, but this also needs an extra setup to allow Angular to work correctly in this mode.
In the template, we provide the html5Mode with "false" by default because of the reason described.
In other words, with Html5 mode enabled, you can use pretty url, when it's disabled Angular will use the "#" symbol for url. You can use any of them, of course, the second one is the more simple to use.

Let us know if you have any question
Can you help with this?

Hi, another user reported a similar problem, we don't have a confirmation about if it was solved but seems to be related with the node/npm used. Please could you check you are using node 6.x (LTS) and npm 3.10.8? Newer version seems to have some issues with dependencies.

Node: v7.10.0
npm: 5.0.3

I need these versions for my vue stuff.

Any chance of fixing? If I fix in the meantime, I'll let you know.
Hi, we will check for latest version of dependencies to see if it works with latest npm. In the meantime, using node v7 and npm 3.10.8 should work in case you need latest Node features, the main issues seems to be related with npm,

juanbeau PURCHASED
I use AngujarJS 1.x
As I can keep the routes in the main menu and in the URL without using ui-view, for example:

# App / invoice
# App / invoice / new

Since scope.watch does not work correctly in ui-view
Hi, ui-view is necessary for the uiRouter to place the markup of the view according to the route that is loaded. Regarding to scope.watch, could describe a bit more the issue? You need to communicate a parent controller with a child controller?

teamjoint PURCHASED
I searched the comments and couldn't find it: how to do change the default theme in the meteorjs version? I believe it is currently using public/themes/theme-a.css. How do I change it to use other theme such as theme-b.css?
Hi, the most simple way to add a default is by importing the css into the main stylesheet, using imports/styles/app.scss (or .less) you can add at the bottom:

@import "themes/theme-b.scss"; // or .less

The files under 'public' folder are mainly used for the demo to switch between styles.

Let us know if you have any question
rdheepan PURCHASED
Project : Angular 1.x
Page : buttons.html
Section : Pagination
Component : Pager

The 'Previous' and 'Next' Button for the Pager is not visible in the 3.7.5 version of template.
Could you please check and let me know if there is any quick fix ?
rdheepan PURCHASED
The buttons.html has the code..

<uib-pager total-items="pag.totalItems" ng-model="pag.currentPage"></uib-pager>

But nothing is shown!
rdheepan PURCHASED
Ahhhh! It was because of a BREAKING CHANGE in angular-bootstrap version 2.0.0.
The usage of pager has been changed. We need to add it as an attribute instead of element.

<ul uib-pager total-items="pag.totalItems" ng-model="pag.currentPage"></ul>
Hi, thanks for the update and sharing the solution. We have updated the uib-pagination but haven't noticed we forgot to change also the uib-pager.

Let us know if you have any question

Thanks for your time!
Hi themicon, Is flot chart library is compatible with Angular 4 ?
Hi, the flot chart library by itself is not compatible with angular4 because it's a jQuery plugin. To make it compatible, meaning, to allow use it in the "angular way" we have added a simple directive that takes parameters from tag attributes (like options, dataset, etc) and send them to Flot library, also with events to update chart on data changes, so it can be used with props from components without wrapping explicitly jQuery.

Let us know if you have any question
odessitv PURCHASED
How can I make the #summernote component bi-directional? Meaning, if the 'note' object changes I want to the contents of the textarea to change as well:

height: 280,
dialogsInBody: true,
callbacks: {
onChange: (contents, $editable) => {
this.note = contents;
odessitv PURCHASED
Answering my own question -- $('#summernote').summernote('code', noteHTML);
Great! Thanks for the update!
Problem i have with ng2angle (Angular4 version)
after running npm install and "ng serve" command - i got green notification in the console that everything is ready but when i browse for localhost:4200 - all i can see is "Cannot GET /" message...
Please Help
Hi, please try running the ng-serve command with the following flags:

$ ng serve --host --port 4201

Also, another user reported a similar problem and solution is to run the following command:

$ ng serve -op c:\temp

The -op flag is for output path, we took this workaround from https://github.com/angular/angular-cli/issues/6119
This flag seems to be necessary mainly for windows, so change c:\temp to a correct temporary path if you are using another OS.

Also, if none of the above worked check you have installed the following versions:
> node 6.x (LTS) (v7 should work too)
> npm 3.10.8
> @angular/cli 1.0.0

If you have newer version please downgrade and try again.

Let us know if you have any question
Hello. When creating a new module crud module with Yo MEANJS, which files must I change so that when I access the newly created module -I can see the side and nav bars, styling etc?

There is nothing in the documentation about that (at least if so, I didn't find it).

Thank you in advance!
Hello, the Yo generators should work fine but it's necessary to perform some changes in other to adapt the generated code to the template structure.
1- When the generator asks for "menu identifier" type sidebar. Instead of the default 'topbar'. In case it the generator doesn't change that, please check the file moduleName/client/config/moduleName.client.config.js
2- Routes must have a prefix 'app' because it's used to serve the application layout for views.
Example, a state named 'dummies.list' becomes 'app.dummies.list'
3- You need to do the same for other route references (ui-sref, $state.go, etc) adding the prefix 'app'
4- If it fails, remove the test folder that is generated to avoid dealing with test issues.

Let us know if you have any question
Not sure why you would change the default creation of the generator, that kind of defeats the purpose of having a generator. Unless there is another way I can generate the modules individually and set the routing differently? I tried creating a app.gigs module but it created app-gigs instead.

I am taking another file as reference of where to add .app infront=

In the Client/config/gigs.client.routes.js I think I got all, since I had the other files as reference.

On the Server config though, The only reference that I could find is the Core and that is still nothing.

I imagine the other files I have to change is server/routes/gig.server.routes.js

This is the original file, I should add in front of gig routes?

Please let me know what other folders and files and where I have to add .app in front

var gigsPolicy = require('../policies/gigs.server.policy'),
gigs = require('../controllers/gigs.server.controller');

module.exports = function(app) {
// Gigs Routes


// Finish by binding the Gig middleware
app.param('gigId', gigs.gigByID);
Hi, on the server files you shouldn't need to change nothing because the changes are mainly related with route state names of the uiRouter module, which is a module that is configured on the client side. We have not changed intentionally the way generators work, the template use the state inheritance from uiRouter and this is the way to make it work. Actually, the generator should support the generation of nested routes because it's a feature of the uiRouter, same for the module name. We suggest you to create 'gigs' instead of 'app.gigs' because you will have more control of the necessary changes mentioned in the previous comment.

Let us know if you have any question
Angular 1.X Project:

Previously i was using TextAngular WYSIWYG editor and it was horrible! Glad that you had integrated summernote but there are some issues.

1. Click on Help icon, the modal dialog is opened. But the entire screen is masked.. because of css collisions..
2. Could you please provide a directive to restrict the max-length for angular-summernote?

Thank you!
In case if you are not sure about what i am talking, navigate to Forms - > Extended -> Summer note editor -> click on '?' icon which is shown in the editor!
Hi, thanks for report this.
1- The issue is related with how summernote works and the setup of the layout. The following setup should solve it easily:
<summernote class="summernote" height="280" config="{dialogsInBody: true}">
Note the option "{dialogsInBody: true}" must be present to force the modal to be created in the body instead of being part of the layout.

2- By using the config block with a scope variable you can make use of callbacks to check for length of editor. Here is an example: https://stackoverflow.com/a/40830356/1754325

Let us know if you have any question
Hi Themicon,

How to upgrade my template to latest version from Angular 4? My version use Angular cli 1.0.0-beta.21. Is to older

Hi, the first thing is to update your global cli to v1.0.0 with the following commands:
1- npm uninstall -g angular-cli @angular/cli
2- npm install @angular/cli@1.0.0

Then, the hard part is to update the code and the structure, some files were removed and other renamed because of changes in the angular-cli project itself, but the application code update must be done manually, we suggest you to use any comparison tool like winmerge, beyondCompare or kaleidoscope, depending on your system and compare the file content. Alternatively, if you find changes easily to identify and separate from the code base we provide, just move them to latest version of the project and avoid comparing file by file.

Let us know if you have any question

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


Licenses: Details »

Single application $18
  • HTML Template
Bootstrap: Compatible with 3.3.x
  • Responsive
  • Fluid
  • Fixed-width
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:Yes
Tags: admin, admin template, angularjs, material, meanjs, meteor, mvc, rails, responsive, rtl
Released:2 years ago
Updated:1 month ago
Sold exclusively on WrapBootstrap


Signed up 2 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: