5324 comments

lotpi PURCHASED
Hallo,

how can I use Spinners in jQuery Version.
I want to Show Spinner until the Site loaded.

Thanks
Hi, you can try to add the spinner markup (the one of your choice, whirl, loader.css, etc) using a container element that will cover the entire page. For example, add right next to <body> element a <div> with class "preloader" then add a custom css like this:
.preloader {
position: fixed,
z-index: 9999; // cover evrything
top: 0; right: 0; left: 0; bottom: 0;
background-color: white;
}

Then inside that element add the markup for the spinner of your choice and play with css to place it in the center and in a corner of the screen, depending how you plan to show the spinner.

Finally, from JS you can use the following snippet to hide the prelaoder container

// run when the page is fully loaded including graphics.
$( window ).load(function() {
$('.preloader').hide();
});

Please consider that in the case of the jQuery project, the spinner will be loaded for every page, unless you add it manually to some pages (different from angular for example where the loader text is shown only once due to how the framework works).

Regards
lotpi PURCHASED
Thanks
sunil233 PURCHASED
i tried to integrate in vs2017 dotnet application (with out dotnetcore).
Runninng without cli with index.html as start page
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('/app/main.js').catch(function(err){ console.error(err); });
</script>

Iam getting the below errors
Loading typescript
Unable to load transpiler to transpile http://localhost:54950/node_modules/ngx-bootstrap/accordion/index.js
Instantiating http://localhost:54950/node_modules/ngx-bootstrap/accordion/index.js
Loading http://localhost:54950/app/shared/shared.module.js
Loading /app/main.js
at fetch.js:37
at ZoneDelegate.invoke (zone.js:391)
at Zone.run (zone.js:141)
at zone.js:831
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:595)
at <anonymous>
Hi, it seems you are using SystemJS and the project provided was prepared to work with Webpack setup. We know it's not exactly the same setup and it may require some modifications that we are not aware of due to we don't have experience with SystemJS
For example, typescript compilation is performed by Webpack loaders and changing that means to configure another way to load typescript correctly.
Optionally you can check the ngx-bootstrap for systemjs errors, a similar issue found is https://github.com/valor-software/ngx-bootstrap/issues/1588

Regards
sunil233 PURCHASED
Where can i see the Webpack.config.js in the project?,..if i want to setup webpack in vs 2015 without using the SystemJs what are the steps required?
Hi, the webpack.config.js can be found in the root folder of the project, "netcore-angular5/Angle/Angle/webpack.config.js"
You will need also the package.json included in the project in order to install dependencies that are required by webapck like loaders and other features.
Please consider that the template was designed to build your application on top of it and not to be integrated 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

Let us know if you have any question
Regards
Hello
I want to use foldcode property for code editor in my project. How to add this property to my code editor component ?

Thanks.
Hi, for what project version do you want to add this (angular1.x, angular5, etc)?
Did you already tried to add it as it's sated in the their site https://codemirror.net/demo/folding.html ? Did you find any issue with it?

Thanks
Regards
Hi,
My project version is angular5. Yes, I already tried. But it is not working. Can you help me about how to add foldcode property to my code editor component?

Thanks.
Hi, please follow this instructions to the folding addon for Codemirror

1- Edit file src/app/routes/extras/codeeditor/codeeditor.component.ts and add the following imports (after the codemirror import)
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/xml-fold.js';
import 'codemirror/addon/fold/indent-fold.js';
import 'codemirror/addon/fold/markdown-fold.js';
import 'codemirror/addon/fold/comment-fold.js';

2- Then edit src/app/routes/extras/codeeditor/codeeditor.component.scss and import the css of the addon
@import '~codemirror/addon/fold/foldgutter.css';

3- Finally, add to the codemirror options the following entries
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]

Please note that this works with JS files and currently we don't have one in demo files for codemirror. There was a .ts files added but after problems with the compiler we disabled it. Add or modify an entry in file assets/codemirror/filetree.json to show a JS in the file tree and when you load it, the folding icons should appear next to the line numbers.

Regards
Thanks, it is working :)
Hi I'm using Angular 5 + CLI

In menu.ts file we can add menu items and links
but
i've something like this: const Configurations = {
text: 'Configurations',
link: '/test',
icon: 'icon-chemistry'
};
in the above case instead of '/test' i need to assign it with this :
" window.location.assign('/'+window['testlink']) " when i do this
const Configurations = {
text: 'Configurations',
link: window.location.assign('/'+window['testlink']) ,
icon: 'icon-chemistry'
};
error is thrown : Argument of type '({ text: string; link: void; icon: string; } Type 'void' is not assignable to type 'string'.

how can solve this issue?
Hi, unfortunately is only possible to use a string in the "link" entry of the menu configuration, because is used as a value of the [routerLink] attribute for each sidebar item. The value you can use is a route path already defined in the list of routes for your application that .
As a possible approach, you can create a route that will load a component, that component has a constructor function that you can use to perform an action like you want soon as component is created.
Anyway, please consider that ti could present some issues if you change routes manually outside the angular-router control, no tested before but just a consideration.

Let us know if you have any question
Regards
Hi,

my changes in layout.scss doesn't appears in my app, I´m running "npm build" and "npm start" and nothing happens.

I also add a new scss file and import it in app.scss and none style is added to application too.
I fact, in react seed I can´t add a spinner SCSS to a project
Hello.

I'm getting the following errors

$ npm install
$ npm start

> webpack-dev-server --config webpack.dev.js --inline --progress --port 3000 --open

10% building modules 2/2 modules 0 active
Project is running at http://localhost:3000/
webpack output is served from http://localhost:3000/
404s will fallback to /index.html
10% building modules 6/6 modules 0 activewebpack: wait until bundle finished: /
68% building modules 960/988 modules 28 active ...es/fullcalendar/dist/fullcalendar.css(node:6815) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
960 modules

ERROR in ./app/Vendor.jsx
Module not found: Error: Can't resolve '../node_modules/whirl/dist/whirl.css' in '/templates/WB04HF123/reactjs/app'

ERROR in ./app/Vendor.jsx
Module not found: Error: Can't resolve '../node_modules/jqgrid/js/jquery.jqGrid.js' in '/templates/WB04HF123/reactjs/app'

ERROR in ./app/Vendor.jsx
Module not found: Error: Can't resolve '../node_modules/jqgrid/css/ui.jqgrid.css' in '/templates/WB04HF123/reactjs/app'

ERROR in ./app/Vendor.jsx
Module not found: Error: Can't resolve '../node_modules/jqgrid/js/i18n/grid.locale-en.js' in '/templates/WB04HF123/reactjs/app'
webpack: Failed to compile.
Fixed

In Vendor.jsx, should be:

import '../node_modules/@jh3y/whirl/dist/whirl.css';

instead of:
import '../node_modules/whirl/dist/whirl.css';

and

import '../node_modules/jqGrid/css/ui.jqgrid.css';
import '../node_modules/jqGrid/js/jquery.jqGrid.js';
import '../node_modules/jqGrid/js/i18n/grid.locale-en.js';

MacOS and Linux are case sensitive for paths.
Hi @albertomr86, thank you so much for report the issue and also share the solution!
We'll add the fix in next update
Regards
balassar PURCHASED
In JQGrid, If I add a filter toolbar, the textboxes have a very small size as compared to the underlying font used in it.

{ label: 'Category Name', search: true, searchoptions: JSON.parse('{"sopt": ["cn","eq"]}'), name: 'CategoryName', width: 75 },

.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
HI, please use the following CSS to override default and other styles that affects the inputs.
These rules try to emulate to the look an feel of bootstrap form control inputs

.ui-search-toolbar input[type="text"] {
font-size: 14px;
height: 35px;
padding: 6px 16px;
border: 1px solid #dde6e9;
border-radius: 4px;
color: #3a3f51;
font-family: inherit;
font-weight: normal;
}
.ui-search-toolbar input[type="text"]:focus {
border-color: #66afe9
}

Thanks for for report this issue.

Let us know if you have any question
Regards
Degaltec PURCHASED
Hi,

Im using the template with Angular 4. Im trying to use summernote but I got some errors.

I have add ""../node_modules/summernote/dist/summernote.js" to ".angular-cli.json" and the styles, but I have got this error:

core.es5.js:1084 ERROR Error: Uncaught (in promise): TypeError: $node.attr(...).tooltip is not a function
TypeError: $node.attr(...).tooltip is not a function

Have I to include another library or something else?
Hi, summernote requires standard tooltip from bootstrap, add before the path the summernote the following line:

"../node_modules/bootstrap/js/tooltip.js",

You will need stop compiler and run again,

Let us know if you have any question
Regards
Hi! Any news on the BS4 version yet?
Hi, we plan to be releasing the version for html5 jquery with bootstrap 4 at the end of February, then will start to migrate the rest of the projects.

Let us know if you have any question
Regards
Nice! Any plans to use Webpack instead of Gulp?
Yes, it's in plan. The first release of Bootstrap 4 version will continue using Gulp, we have already moved the dependency manager from bower to npm so that's the main change for a webpack support.
Webpack 4 is also very close so we would like to put hands on that last version which seems to provide very good improvements over v3

Let us know if you have any question
Regards
Awesome! Thanks!
Hi,

I want to know that is there any support for RTL in Angular 5 + CLI template ? because i couldn't find it anywhere in the template and offside bar's RTL radio button is commented out. Any kind of help would be appreciated.
Hi, regarding to RTL, it's only possible by pre-processing the styles with 'rtlcss' tool . This project doesn't support live switch of styles (between rtl and ltr) because the RTL mode is defined at build time but not possible to generate both stylesheets for live switch. If this is suitable for you, after purchase please send us a message and we will send you detailed instructions to implement RTL.

Let us know if you have any question
Regards
usamaxyz PURCHASED
http://themicon.co/theme/angle/v3.8.3/backend-jquery/app/timeline.html

left timeline items' arrow is not shown. the right items are OK.
usamaxyz PURCHASED
could please review the demo, there are items that are not associated with icon. Is this done intentionally or there is something wrong?
Hi, thanks for report this.
Regarding to popover arrows, there's a typo in the left popovers, they need also the "left" class to place the arrow, we haven't noticed that and will fix them on next update.
Regarding to second comment, icons are optional and will be placed automatically if you add an element with class "timeline-badge", so you can create a timeline with or without icons (showing only the line in the middle)

Let us know if you have any question
Regards
I'm currently trying to get the current version of angular5-seed running, but installing node 6.x with npm 3.10.9 (as mentioned in the comments here) is a nightmare, because when installing 6.10, 3.10.10 is default and running "npm install -g npm@3.10.8" breaks npm completely. Long story short, would you please consider supplying a "Dockerfile" in the samples, so we can create and run a container with your configuration? I tried for hours now and had no success getting to start the newest samples, so I'm not even considering updating my angular2 project to angular5. Being able to run "docker build " would be really nice, to just set up the samples :)
Hi, sorry but we couldn't fine any recent comment stating the npm 3.10 is required.
we are currently using
> npm 5.6.0
> node v8.9.4
and running without problems, Some deps were working only on node v6 but this doesn't seem to be a problem now. Could you let us know if you there any error for you using mentioned version?

Thanks
Regards
pbohny PURCHASED
I am using the Angular 5 version and would like to use the sidemen tree not only to route to pages, but also launch external webpages. How would I add e.g. http://google.com to menu.ts ?
Hi, in the menu definition (menu.ts) you have to use "elink" entry instead of "link" external links.

Let us know if you have any question
Regards
pbohny PURCHASED
I guess I found the answer in another comment. I will laugh a page and put the links there
Hi again, thanks for the update!
Regards
dedi4u PURCHASED
Hello,

how i can change FullCalendar language to German?

Thank you
Hi, for what project do you need this (angular, jquery, etc) ?
Btw, here you can find docs about language setting in fullcalendar https://fullcalendar.io/docs/text/lang/

Let us know if you have any question
Regards
Hello

I want to use the template for MEAN stack angular 5, is it compatible?

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
11433Purchases

Licenses: Details »

Single application $24
Version:3.8.3
Type:
  • HTML Template
Bootstrap: Compatible with 3.1.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 months 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: