5143 comments

Hi,

I am using backend-query folder. I have a problem with select2 library because this only applies to select tags that have id as 'select2-1', 'select2-2', 'select2-3' and 'select-4'.
I dont know why.
Please help me.
Hi, you need to add your custom js to target the id you are using. Currently we only provide demo for those id but you can use:

$('#another-id').select2({
theme: 'bootstrap'
});

You can see example in app.js or master/js/modules/select2.js

Regards
Good afternoon

Does the template come with all source code or the template are downloadable components?
Hello, the template package contains source code in different languages (html, .ts, js, css, scss, less, jade)
After purchase you can download a zip package with folder for each version, chose one and you will see the source code.

Let us know if you have any question or need further details.
Regards
samiul42 PURCHASED
How to use html text editor in this templet or have any html editor in angle
Hi, angular based projects contains a code editor based on codemirror plugin:
You can see example here for angular 1.x: http://themicon.co/theme/angle/v3.8/backend-angular/#!/app/code-editor
And for angular4
http://themicon.co/theme/angle/v3.8/angular2/extras/codeeditor

Regards
Is there a way to enable/visible or visibility off/on for tab controls programmatically?

thanks
Hi, could you let us know for what project are you asking about? Also, do you mean the tab controls from Bootstrap framework?

Thanks
Regards
I am using React with Angle bootstrap

thanks
Hi again, the React project uses react-bootstrap components. You can see specific information for Tabs here: https://react-bootstrap.github.io/components.html#tabs
Each <Tab> component has an "eventKey" property that is used to identify the active tab.
The <Tabs> component has an "activeKey" property to set the current active tab. By using the key from the component state, you can change programmatically the active tab.
Example:
<Tabs activeKey={ this.state.key } ...
<Tab eventKey={ 1 } ...
<Tab eventKey={ 2 } ...

The initial component state could be,
constructor( ...)
this.state = {
key: 1
};
which shows first tab as active.

Then, you can change the component state from a component method with:
this.setState({
key: 2
});

Hope this helps
Regards
bigteams PURCHASED
With backend-jquery, is there a way to bind events to the left sidebar? I have a specific case where we use the mini fullCalendar as a left nav item which requires being initialized. This works fine when the sidebar is open, but when it is collapsed it is a clone and not initialized. Having some events to bind to in the sidebar would help with this issue.
Hi, the collapsed states is performed using a script located in master/js/modules/toggle-state.js
This script is a listener for elements with attribute "data-toggle-state" and what it does is simply toggle a classname from the body element.
At the bottom of the script we trigger the $(window).resize(); event in order to inform some plugins the size of the screen has changed so they can change and adapt to the new size.
If that's is not enough for your implementation please send us a message via our profile page and we will send you a modified version of the mentioned script to trigger a custom event, the you can listen and check for the specific classes to collapse sidebar and perform any action accordingly.

Let us know if you have any question
Regards
Hi, I tried to activate the linter in Codemirror without success. Is this possible? If yes, how ?
Thank you !
Hi, the codemirror support linter as a an addon http://codemirror.net/doc/manual.html#addons
To use it you need to include the lint.js library in your project (which depends on what project version are you using).
If you have already tried to add the file, please let us know what project are you using and if there's an error message and we will check it.

Regards
Hi, I use MeanJS project. In wich file I must include file ?
Thanks
Hi, please follow this instructions
1- Install jshint with bower
> bower install jshint --save

2- Add required files in modules/lazyload/client/config/lazyload.client.constants.js
Like this

'codemirror-modes-web': ['/lib/codemirror/mode/javascript/javascript.js',
'/lib/codemirror/mode/xml/xml.js',
'/lib/codemirror/mode/htmlmixed/htmlmixed.js',
'/lib/codemirror/mode/css/css.js',
// new files from here for Linter addon
'/lib/jshint/dist/jshint.js',
'/lib/codemirror/addon/lint/lint.css',
'/lib/codemirror/addon/lint/lint.js',
'/lib/codemirror/addon/lint/javascript-lint.js'],

3- Edit controller to add options to enable lint in modules/extras/client/controllers/code-editor.controller.js

vm.editorOpts = {
....
gutters: ["CodeMirror-lint-markers"],
lint: true
};

4- This a fix to show the tooltip with the lint error. Edit file modules/core/client/scss/app/code-editor.scss and add at the bottom:

.CodeMirror-lint-tooltip { z-index: 9100; }

Stop gulp and start again and linting with codemirror should work.
Please note we have added only lint for JS (that's why jshint was added), if you need more languages please please check the documentation of the addon.
Also, the source of this demo could help: http://codemirror.net/demo/lint.html

Regards
I followed your instructions, I see error icon, but I dont't see the tooltip over icon.
I try de line at the end and like that in code-editor.scss
.code-editor {
position: relative;
padding-top: $toolbar-hg;

// a bit of hack
.CodeMirror {

@media only screen and (min-width: $mq-mobile) {
max-height: 100%;
min-height: 180px;
height: 100%;
}

.CodeMirror-scroll {
height: 100%;
}
.CodeMirror-gutters {
min-height: 100%;
}
.CodeMirror-lint-tooltip {
z-index: 9100;
}
}

}
Hi, the css needs to be outside any wrapper because it's added by the addon directly as a body child element.
In short, add it at the bottom but without any wrapper class

Let us know if you have any question
Regards
Hi,
I added it bottom but without success. Here is my file.
Thanks
/* ========================================================================
Component: code-editor
========================================================================== */

$toolbar-hg: 50px;
$toolbar-bg: #fff;
$toolbar-border-color: $gray;

$codefiles-bg: $gray-lighter;
$codefiles-border-color: $gray;

$codefiles-item-color: $gray-dark;
$codefiles-item-hover-bg: $gray-light;
$codefiles-item-active-bg: $brand-info;
$codefiles-item-active-color: #fff;

.code-container {
margin: 0;
padding: 0;
background-color: #fff;
}

.code-files {
border-right: 1px solid $codefiles-border-color;
background-color: $codefiles-bg;

.nav.nav-pills {
padding: 10px;
overflow: hidden;
> li > a {
color: $codefiles-item-color;
&:hover {
background-color: $codefiles-item-hover-bg;
}
}
> li.active > a {
background-color: $codefiles-item-active-bg;
color: $codefiles-item-active-color;
}
}
}

.code-toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: $toolbar-hg;
margin: 0;
border-bottom: 1px solid $toolbar-border-color;
background: $toolbar-bg;
z-index: 5;
}

.code-editor {
position: relative;
padding-top: $toolbar-hg;

// a bit of hack
.CodeMirror {

@media only screen and (min-width: $mq-mobile) {
max-height: 100%;
min-height: 180px;
height: 100%;
}

.CodeMirror-scroll {
height: 100%;
}
.CodeMirror-gutters {
min-height: 100%;
}
}

}

.CodeMirror-lint-tooltip {
z-index: 9100;
}
Hi again, the stylesheet looks fine. Please try stopping gulp and run again. There's an issue with gulp watching files, it doesn't trigger the compilation of sass files. Will be solved for next version.

Please let us know if problem persists
Regards
Sorry no luck. That's what I was doing already, just to be sure of the file change.
Could you check in the source of the page the stylesheet core.css contains the rule?
You should be able to see it if you open the following url with gulp running
http://localhost:3000/modules/core/client/css/core.css

Just in case if you want to take a look, the file that contains the css for the lint is public\lib\codemirror\addon\lint\lint.css and there you will see the rule we have changed in order to override the default value an adapt to work with the template layout.

Regards
Hi see the rule in http://localhost:3000/modules/core/client/css/core.css
.CodeMirror-lint-tooltip {
z-index: 9100; }
and in public\lib\codemirror\addon\lint\lint.css
in function showTooltip
Hi, it's hard to say what could be the issue here without seeing the code, any chance you could put online the project so we can check it? Because if the rule is present it should take effect, at least in our project with extra modifications. You could try a bigger value for the z-index but doesn't seem to be the case.

Regards
I send you a message.
Thanks
Steven
Received and replied,
Regards
Problem fixed. I want to thank you for time spent on my problem, this is really appreciate. Great support, great theme.

Thanks
Steven
aflorin PURCHASED
The netcore-angular4 project's package.json node-sass dependency needs to be updated to 4.5.3 (currently 4.5.2) in order to be compatible with node 8.x. Otherwise you get an "OS Win 64-bit with Unsupported runtime (57)" error

Alex
Awesome!. Thanks so much for sharing this helpful tip!

Regards
aflorin PURCHASED
Is there a seed project for netcore-angular4? Seeds seem to be missing for all mvc5 and netcore projects. Also the documentation also seems to be missing.
Hi, seed projects will be added again, they were not included in last version because we decided to speed up the last release.
We would like to perform some updates to dependencies and other improvements like netcore 2.0 and then include again seed versions.

Let us know if you have any question
Regards
aflorin PURCHASED
Thanks, do you haven an ETA for the next release?

Alex
Hi, we don't have an ETA right now, next release will not include seed projects. Anyway if you could send us a message via our profile page we can provide you a seed project asap for netcore-angular4.
Also, if you want the new version with netcore 2.0 just let us know that in your message.

Thanks
Regards
I want to integrate angle template to my rails project, what should I do ?
Hi, an important thing to consider here is that the template was designed to build your application on top of it and not to integrate with another application, meaning, if you have separated components already created you can try to add them to the existing structure of the template with routes, views, etc. But if your application relies on an existing layout and structure, it's necessary to adapt it the structure of the template, otherwise you won't be able to compile the files correctly.
One good option could be to use the seed version because it has a few dependencies and then you can go adding there your own components, one by one if possible so you can isolate any issue that may appear.

Regards
Hi,
I wanna integrate angle template to my rails project, what should I do ?
Answered above.
relbaek PURCHASED
Hey there.

This theme is amazing, with a lot of potential and options etc

i was thinking to start with a regular MVC5 Jquery Project.
And wanted to load the Angle theme into this project.

so i vent for some kind of Documentation to getting startet, or a "step by step thingy to wireframe it etc.

So how to get startet correct?

do you just use the Project Solution?

or Add it as a reference to your own or ?
I can see there is controller for all kinds of things,
but it seems to be only for the "Preview" site. ??
Hi, the template was designed to build your application on top of it and not to integrate with another application or existent project, meaning, if you have separated components already created you can try to add them to the existing structure of the template with routes, views, etc. But if your application relies on an existing layout and structure, it's necessary to adapt it the structure of the template, otherwise you won't be able to compile the files correctly.
We suggest you to use the solution as if it was the project you have created and then start to customize the according to your needs. In following updates we will include again a seed version which contains only basics features instead of the full set of pages and plugins.

Let us know if you have any question
Regards
relbaek PURCHASED
Sure thx for the answer.

Ill just use the Angle MVC5 Project as my Barebone for my application then.

Can i use Dapper with ease in this template or is it strictly binded to EF ?
Hi, you should be able to use Dapper without problems, we haven't tested it with the project but we don't rely on specific .net frameworks. Entity Framework was included because we have added an example page (movie app) but most of the code don't use it as a core dependency.

Let us know if you have any question
Regards
How do I change the theme in the mvc-jquery version?
Hi, please try the following:
- Edit file Views/Shared/_Layout.cshtml
- Add the following in the head section (before closing tag)

<link href="@Styles.Url("~/Content/app/css/theme-a.css")" rel="stylesheet" type="text/css" />

You can change the theme-a.css for any of the predefined themes or use a custom file.

Let us know if you have any question
Regards
Can you provide instruction or relevant online tutorial on setting up testing for netcore/angular project (client-side karma/jasmine). Is there any special instruction for the systems used such as napa/Webpack?

Thanks
Hi, we have implemented a basic karma/jasmine testing workflow. When you get a chance please send us a message via our profile page and we will send you the files.

Thanks
Regards
jan222 PURCHASED
Hi, i was working again on meanjs version of Angle. I have some strange problem i don't know how to resolve clearly. The abstract states of meanjs states are buggy or at least does not load total of the application.

.state('app.articles', {
abstract: true,
url: '/articles',
template: '<ui-view/>'
})
.state('app.articles.list', {
url: '/list',
templateUrl: '/modules/articles/client/views/list-articles.client.view.html',
controller: 'ArticlesListController',
controllerAs: 'vm'
})
.state('app.articles.view', {
url: '/:articleId',
templateUrl: '/modules/articles/client/views/view-article.client.view.html',
controller: 'ArticlesController',
controllerAs: 'vm',
resolve: {
articleResolve: getArticle
},
data: {
pageTitle: '{{ articleResolve.title }}'
}
});

when we access with url " /articles/:id" , we have this error:

angular.js:68 Uncaught Error: [ng:btstrpd] App already bootstrapped with this element 'document'
Hi, based on error message, described here: https://docs.angularjs.org/error/ng/btstrpd the application is trying to bootstrap angular twice. Any chance you have included in your code the "angular.bootstrap" function?
If you look in the source code for "angular.bootstrap" text it only appears in file, modules/core/client/app/init.js
In file modules/extras/client/config/extras.client.routes.js there's a similar case like yours using the "mailbox" views, the states hierarchy is similar, also using route params but it seems to be working fine.

Regards
jan222 PURCHASED
i do not use 'extra' module and i did not touch the init.js file.
Hi, sorry for the delay. Any chance we can see your project online so we can check the code?
If you want to keep it private please send us a message via our profile page and we will chat via email.

Regards
Como agrego las dependencias a la plantilla?

base.js:24340 Error: [$injector:unpr] Unknown provider: SweetAlertProvider <- SweetAlert <- LoginController
Hi, we have already answered your message via email.

Regards
bantha PURCHASED
Any change of a rails 5.1 update using the included web packer?
Hi, for the moment we don't plans to add webpack in the short term, we have moved from bower to npm in last update, and that should simplify a bit the process of adding webpack in the future. Our plan is move all project to webpack but we need to work on all versions together in order to have some consistency across each project version.

Thanks
Regards
Degaltec PURCHASED
Hi,

I would like to use timeline in angular2. How can i do it?

I have pasted the code from the template live preview, but it does not work itself. I guess that I have to import a css but I dindnt find.
Hi, that's right, you need also the styles from this file : src/app/shared/styles/app/timeline.scss

Let us know if you have any question
Regards
How do I change the title of the tab for the material design version of the template? Here is a screenshot of what I mean?
https://imgur.com/a/bsJqB
Hi, in file master/jade/index.jade we bind the function "pageTitle" to the title element of the page.
Then, in file master/js/modules/core/core.run.js that function is defined as part of the $rootScope and you can customize the returned value to change what is displayed in the title.

Let us know if you have any question
Regards

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

$24
11095Purchases

Licenses: Details »

Single application $24
Version:3.8.2
Type:
  • HTML Template
Bootstrap: Compatible with 3.3.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:Yes
Categories:
Tags: admin, admin template, angularjs, material, meanjs, meteor, mvc, rails, responsive, rtl
Item#:WB04HF123
Released:3 years ago
Updated:2 weeks ago
Sold exclusively on WrapBootstrap
themicon

themicon

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