5885 comments

TianDaGe PURCHASED
Hi, how can I change port? current default port is 3000
Hi, for what project version do you need this?
For example, using React version based on react-create-app it can be changed like this

> set PORT=9001
> npm run start

Let us know if you have any question or need instructions for another version
Regards
b_dev PURCHASED
In the future could we enjoy a version of React with Typescript?

Thank you so much.
Hi, yes, that would be a really good addition. Even there a good support for TS on create-react-app based application so we will give a try and provide a variant in the future

Thanks!
b_dev PURCHASED
Thank you very much!!

I am very interested in this feature.

Any approximate date for this release?
Hi, we don't have an ETA for this feature, at least not in the very short time. For the moment we have in our priority list to work on making jQuery an optional dependency for all projects.
What could be possible is to provide you a seed project running TypeScript, it will serve as a start point but may require to deal with extra assets integration that are not present in the features of the seed project.

Let us know if that could be suitable for you and we'll let you know when could be ready.

Thanks
Regards
coderion PURCHASED
+1 for vue.js version
Thank you!! :)
kodeshark PURCHASED
I might give Vue a whirl now that it's in this package. Thanks for version 4. Looks very appealing!
Thank you!! :)
Dear admin,
I already download Angle V4, I use Angular Material with bootstrap 4, does it still use jQuery library like Angle V3?
Moreover, I cannot install or use Angular Bootstrap 4. Could you check it, please.

Thanks,
Hi, removal of jQuery is planned for v4.1, our intention is to provide code changes to work out of the box, meaning, seed projects will not require it by default unless you decide to you jQuery plugins. If an app already is not using jQuery, the update should not be more than a files replacement.

Regarding to install/use issue, we have checked the angular project again and it's working fine, maybe there's something we have missed to check. Do you see errors in console or in the browser?

Thanks
Regards
Hi,
Both Angular Bootstrap 4 and Angular Material Bootstrap 4 seed do not work without jQuery when i deleted distribute link in Angular.json.
Could you send both of Angular seeds without jQuery, please.

Thanks,
Hi again, removal of jQuery is planned for v4.1, In the current version (v4.0) the template still depend on it so removing will make some pieces to fail.
We'll to deliver this feature soon as possible as it's a very requested feature.

Thanks
Regards
ccatlin PURCHASED
Hi, thanks again. Quick question,

For the sidebar (left side menu) float mode in both the html versions, BS3 & BS4. Was wondering is there a quick way to make the sidebar height responsive to the items inside?

Example: I have four items in the left sidebar in float setting. Height wise, vertically I'd like the menu to be the height size of the 4 items in it in the float setting. Thanks!

This wouldn't affect the hover menu as I think it's already responsive to the items in it.

I'm going to quick try some stuff here, but if there's a quick way.

Thanks again!
HI, you can achieve that by remove the "height" from the ".sidebar" class which forces the sidebar to always the full available height.
It's also better to replace it with max-height so the scrollbar work, like this:
.sidebar {
max-height: 100%;
....

If you only need for the floating sidebar, you can wrap the change with class ".aside-float" just in case you plan to support both standard and floating sideabar layouts.

Let us know if you have any question
Regards
ccatlin PURCHASED
Thank you! As always, works well.

Hey I noticed that:

-webkit-border-radius: 5px !important;-moz-border-radius: 5px !important;border-radius: 5px !important;

only works on the top-left and bottom-left corners of the sidebar, is there a way to set the right corners to also be rounded(border-radius) for the top-right and bottom right corners of the sidebar?

Thanks. When I set those specifically in the CSS file or locally in the sidebar html code using local css it ignores me. =)

Thanks again! Best, -C
ccatlin PURCHASED
I noticed it does round the right top corner if I have the scrollbar toggled on for the sidebar. But squares it if I don't.

If I turn the scrollbar on always for the sidebar. Where's the quickest place to add 20px in width for the sidebar but only when the sidebar is in collapsed or collapsed text mode in float mode? Thanks!
ccatlin PURCHASED
When in float mode, in both collapsed or collapsed text the scrollbar covers part of the sidebar text area here when the scrollbar is toggled on. Quickest way to fix?
Hi again,

The border radius only shows on left corners, because by default we made the scrollbar hidden by cutting the right right edge of the sidebar.. So, the border radius works but they are not visible.
Setting the 'Show scrollbar' mode on fix that because it basically removes the tricky css to hide scrollbars. As you mentioned, the border radius will work correctly with such mode on.

For the initial comment, a better approach is to add custom stylesheet (css or scss @import'd at the bottom of app.scss) with the following css to override defaults

.sidebar {
height: auto;
max-height: 100%;
}

To target specific modes, you can use the classes applied to the body tag
.aside-float .sidebar { /* floating sidebar */
.aside-float.aside-collapsed .sidebar { /* floating sidebar in collapse mode */
.aside-float.aside-collapsed-text .sidebar { /* floating sidebar in collapse mode with text */

Regarding to last comment, that was the intention of hiding the scrollbar by default, an alternative could be adding a JS scrollbar but never added before because we consider it sometimes affects performance. Not sure if this could be your scenario, depending on the height of the sidebar, the scrollbar will appear usually on mobile devices, or tablets, but on those devices the scrollbar does not obstruct the content.

Let us know if you have any question
Regards
ccatlin PURCHASED
Hi, I ended up with viewport height:

max-height: 80vh;

Which worked out perfect for me, with the scrollbar toggled on, it let the bottom of the scrollbar still be visible for the current layout we have when resizing the height.

To fix the scrollbar when toggled on covering up the sidebar content in collapsed or collapsed text modes:

I'm hoping if I expand the width of the sidebar a little, by the width size of the scrollbar in both the collapsed or collapsed text modes, possibly it will allow the scrollbar to settle in nicely on the right side of the sidebar menu in those modes instead of covering the sidebar content, much like when those are turned off and it does in regular full-text mode.

So couple quick questions, fastest easiest way to expand the sidebar width for both the collapsed or collapsed text toggles for the above to do that? And will I need to reposition the hover menu when I do it? The hover menu seems to open with the left side of the hover menu overlapping the right side of the sidebar menu box by 17 or 18 pixels. Could the hover menu be flush with the right side of the sidebar menu? Much thanks!
Hi,

Simplest way to change sidebar width is by editing sass variables. Look in the source for the file "layout.scss" There you will see at the top variables which controls the width of the sidebar in each mode:

$aside-wd: 220px; // default sidebar width
$aside-wd-collapsed: 70px;
$aside-wd-collapsed-text: 90px;

This variables are used to make the layout element match and it better to change them than overriding everywhere they are used.
We usually don't recommend to touch core files, but this case the change is very simple (a value)

For the hover menu, this can be fixed by adding to the current margin-left those extra pixels so the hover menu doesn't overlap the sidebar.
To fix this please, edit the file sidebar.scss and at the very bottom add the following

.aside-float.aside-collapsed .wrapper .aside-container .nav-floating {
margin-left: $aside-wd-collapsed + $float-space;
}
.aside-float.aside-collapsed-text .wrapper .aside-container .nav-floating {
margin-left: $aside-wd-collapsed-text + $float-space;
}

$float-space is an internal variable we used (layout-extra.scss) to reference the left space that appears when the sidebar is in floating mode.

In case you find any problem or the above sounds confusing, please let us know and we will send you a modified version of the files in order to replace in your project.

Regards
ccatlin PURCHASED
I did something a little less elegant =)), which I'll change to the above. As always your advice is spot on and fast. Thanks! -C

Is there a way to do it so that the width change only happens when the scrollbar displays? Much Thanks.
Thanks for your kind words C!

Regarding second questions, from CSS this don't seems to be possible, but with some javascript it could be achieved as it's stated here: https://stackoverflow.com/a/5038256
It seems a bit tricky, because you will have to check it when the page loads, when a the screen change (resize) and then on every event that could affect the height of the sidebar.

Perhaps, instead, is better to add an unobtrusive scrolling solution like slimScroll (considering that it does not affect the overall performance)

What do you think is more suitable for your requirements? We can check it and let you know how to implement.

Regards
ccatlin PURCHASED
Hey, what's true is true. You've done a ton of work here. I'll give it all a look. We'll give it a quick work here as we're still on the BS3 version, just upgrading now. One other thing, the sidebar hover menu seems to stay open on the Android browser after you open it. It's a small thing, but if you have a patch for it to hover and close, much appreciated. Thanks again!
ccatlin PURCHASED
Let me know if there's a better place to report stuff.

Much Thanks!

You all do great, fast, work. Thanks again! -C
No problem C!
And thanks so much to you for the bug report, we'll check it asap.

Let us know if you have any question
Regards
dgsqrs PURCHASED
Hi there.

What is the recommended way to upgrade an Angle 3.9.x to 4.x project ? In my case, an Angular 4 seed.
Hi, in the last version we have updated all project to Bootstrap 4. So it depends mainly on the Bootstrap version of your project.
Bootstrap 4 by itself is not backward compatible, meaning many things changed, the markup and styles have changed a lot. The simple way to update is to identify custom changes to the current Bootstrap 3 version and migrate them into them BS4 version, this way will be more simple than dealing with the full set of changes in the template.

For the moment, the best practice we recommend for update is to keep own code the most separated as possible from the template code. In that way, you can simply drop a new version without worrying to review many files. Anyway, this depends on each project and there are cases where you need to change parts of the template, for this using a comparing tool do is the best option. WinMerge, Beyond Compare or Kaleidoscope are great solutions.

Let us know if you have any question
Regards
jinweijie PURCHASED
WOW! Finally Vue!!!
Yes! Very delayed (and we apologize for that) but it's finally here!
Hope you enjoy it! :)

Thanks
Regards
Yes! Very delayed (and we apologize for that) but it's finally here!
Hope you enjoy it! :)

Thanks
Regards
I am having problems with mods while working with asp.net. In the master page, I set the div tag, which is the class wrapper property. but when I add modal codes on other aspx pages, the modal page appears as complex pale and I can not even click on the modal items. I removed the "wrapper" class feature on the master page, but the page layout is broken, but modal can work normally. Please help me.
HI, on asp project we use a @section to put modal markup as a body child so the layout doesn't not conflict with the modal positions.
For example, in file Views\Elements\Notifications.cshtml scroll to bottom and look for a section named:
@section BodyArea { .. }
There you will find a modal example that should work correctly without problems with layout elements.

Let us know if you have any question
Regards
Hi,

Sometimes I can see the items in the sidebar being displayed with an animation (angular 6 project)
How can I remove this animation?

Regards
-Stephane
Hi Stephane,

You can remove animations the following css:

.sidebar-subnav.opening {
animation: none;
}

We recommend you to add it in a custom SCSS stylesheet, for example, custom.scss and then @import at the bottom of the file 'app.scss' in order to override defaults.

Let us know if you have any question
Regards
Hi,

First of all thanks for this powerful template.

I am having issues with IE 10-11. Application works fine on Chrome and Edge but page not on IE. The error messages are:

script1002 syntax error on Vendor.js (which navigates to class AnimationBuilder{})
script1002 syntax error on main.js

The back-end is .net core 2.1 with web.api 2.

We spent too much on this issue and any help asap is most welcome.

Thanks

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

$20
12301Purchases

Licenses: Details »

Single application $20
Version:4.0
Type:
  • HTML Template
Bootstrap: Compatible with 4.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Category:
Topic: Internet & Web
Labels: admin, admin template, angularjs, material, meanjs, meteor, mvc, rails, responsive, rtl
Item#:WB04HF123
Released:3 years ago
Updated:1 week ago
Sold exclusively on WrapBootstrap
themicon

themicon

Signed up 4 years ago

Need a front-end template?

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 10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running:

  • Responsive 12-column grid
  • 12 custom, modular jQuery plugins
  • CSS styles for forms, navigation & more
  • Dozens of reusable components
  • Components are scaled according to a range of resolutions and devices
  • Built with Sass (CSS included)
  • Complete styleguide documentation