2470 comments

This looks really cool (bought it) but Is there ever going to be a sass version?
Hi,

With stable Bootstrap 4, we'll be switching to sass.

Regards.
Hello,
Merry Christmas!

Chosen plugin not supported to mobile device. Here the error snap. http://zebrathoughts.com/error.png
can you please guide me to resolve that.

Regards,
Hi,

Meer Chritmas!

Currently chosen is not available in mobile for various reasons. please check

https://github.com/harvesthq/chosen/pull/1388

Regards.
Hi,

I'm trying to load data from rest service, I'm using JQuery template & added angular files in that template.
Drop down menu is not being populated when the data is get loaded after UI rendered.
Here is the screenshot which displaying data but not populated inside drop down.

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

Code Snippet :-

<div class="form-group">
{{masterData.master_religion}}
<label for="userReligion" class="col-sm-3 control-label"> Religion <span class="text-danger">*</span></label>
<div class="col-sm-9">
<div class="fg-line" id="userReligion">
<select data-ng-model="user.religion" class="selectpicker ng-pristine ng-untouched ng-valid ng-empty initialized" id="user-religion"
data-ng-options="key.name for key in masterData.master_religion track by key._id"
data-live-search="true" required>
<option value="" disabled="" selected="selected" class="">Choose your option</option>
<option ng-repeat="religion in data.masterData.master_religion" value="{{religion._id}}">{{religion.name}}</option>
</select>
</div>
</div>
</div>
Ok I'm able to solve this using below script

$(document).ready(function() {
$('.selectpicker').selectpicker('refresh');
});
Hi,

How can I set the layout from another controller. When a particular controller is loaded, I want to set the page layout to full width programatically insted of changing the layout from the toggle button. How this can be achieved?

Thanks.
1.7.1 jquey light full.
How to stop a propogation when open and close a nested collapse panel ?
Hi,

May be you can try adding it manually.

e.g $('element').on('click', functions(e){
e.stopPropagation();
})

Regards.
If somebody will need
Nested collapsed panels problem resoved with next

if ($('.collapse')[0]) {

//Add active class for opened items
$('.collapse').on('show.bs.collapse', function (e) {
$(this).closest('.panel').find('.panel-heading').addClass('active');
e.stopPropagation()
});

//
$('.collapse').on('hide.bs.collapse', function (e) {
$(this).closest('.panel').find('.panel-heading').removeClass('active');
e.stopPropagation()
});

//Add active class for pre opened items
$('.collapse.in').each(function(){
$(this).closest('.panel').find('.panel-heading').addClass('active');
});
}

just added { e.stopPropagation() }
most corrected

if ($('.collapse')[0]) {

//Add active class for opened items
$('.collapse').on('show.bs.collapse', function (e) {
$(this).closest('.panel').find('.panel-heading').addClass('active');
$(this).find('.panel').find('.panel-heading').removeClass('active');
e.stopPropagation()
});

//
$('.collapse').on('hide.bs.collapse', function (e) {
$(this).closest('.panel').find('.panel-heading').removeClass('active');
$(this).find('.panel').find('.panel-heading').addClass('active');
$(this).find('.panel').find('.panel-collapse').removeClass('in');
e.stopPropagation()
});

//Add active class for pre opened items
$('.collapse.in').each(function(){
$(this).closest('.panel').find('.panel-heading').addClass('active');
});
}
I purchased this, but I'm new to this framework. How do I actually start the server on my local host so I can preview it?

The instructions say do 'npm install' and that's it. I've already done that. Please excuse if this is an elementary question, I come from a Rails background.
Hi,

For jQuery variant, you don'e need a web server. You can simple preview it on your local browser. For Angular variant, I would suggest you using Brackets editor which has built in web server with live preview options.

Please take a look here:
http://brackets.io/

Regards.
Do you have a version for bootstrap 4 in the works?
Hi,

Not at the moment. We'll wait for stable bootstrap 4 release. Currently angular 2 and rails 5 variants are in the works. Both will be based bootstrap 3.

Regards.
How to vertical align an actions dropdown icon within a panel-collapse header?
Hi,

Use padding/margin with a modifier class.

Regards.
Hi, I purchased it yesterday, kindly let me know how to add drawer toggle button to jQuery \ light and dark theme like angularjs. Thank you.
i am new to this if i create a new asp.net proj like to check how do the add this to master page as template?
<select chosen> doesn't work with ng-repeat, can't output the options at all, and binding mg-model will cause option(written statically) offset -1 when click
Could you give an indication of when Rails support will arrive? next week, next month 3+ months? thanks
jacjac PURCHASED
Hi, checkbox colors are not like on the demo :
http://image.noelshack.com/fichiers/2017/01/1483497740-checkbox.png
Hi,

Could you please share a screenshot of what you're getting?

Regards.
Hi, for me too have same issue checkboxes are not like on demo and dropdowns are overlaying on top of the button when I click but in demo it's toggling under the button with animation it's not happening in my purchased one I choose angular one.
vh0909 PURCHASED
Is it possible to control the label of the inputs via javascript with angular?

If I set a ng-model in the input, and instead of clicking on the input, I set the value of the variable in angular programatically, the label stays over the text, instead of going up like it happens when I click the input.

For now I won't use this functionality because of this, but it is a shame since it's a very clean approach to the inputs.
Hi,

For pre valued floating inputs, make sure to use the modifier class 'fg-toggled' on 'fg-line' elements.

Regards.
Hi
I purchase twice this template!
Everything is cool other than UI datepicker not working in angular version!
Hello gchokeen, I found where the problems is looks that is a problem related with the $templateCache, to make UI datepicker works on angular version just open the file /js/template.js once the file is opened comment the $templateCache.put instruction related to 'template/datepicker/popup.html', reload the page and everything it'll be working.
Hi

Loving this template! I found a small display issue though: when using Floating Labels for text inputs, the floating label placeholder appears behind the text the user typed when the input loses focus.

To see what I mean, go to the form-components demo page and type something into the "Full Name" input. I've tested and seen this behaviour on the latest FF, Chrome and I.E 11.
Hi,

Thank you for your feedback. We'll fix this in our next version release.

Regards.
Has this theme a PSD layouts?
Hi,

Sorry there is no PSD available.

Regards.
hello, I am using angular version and I am facing a problem with the datepicker popup is not working, could you help me ? I am using version 1.7.1 angular. thx.
I'm trying to add the select component (<select id="role" chosen multiple...> form-components.html) to a modal (ui-bootstrap.html), but it never renders in the modal. How can I fix?

<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<div class="col-sm-3 m-b-15">
<p class="f-500 c-black m-b-15">Multiple Example</p>
<select chosen multiple data-placeholder="Select a country..." class="w-100">
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-link" ng-click="ok()">OK</button>
<button class="btn btn-link" ng-click="cancel()">Cancel</button>
</div>
</script>
I figured out the issue myself. In case someone else has this issue when the 'select chosen' does not render in a modal:

Add directive to app:

.directive('chosen', function ($timeout) {
var linker = function (scope, element, attr) {
$timeout(function () {
element.chosen();
}, 0, false);
};
return {
restrict: 'A',
link: linker
};
});

Also add width to the select:

<select id="role" ng-model="modalContent.roles" chosen multiple data-placeholder=" " class="w-100" width="100%">
Hi,

Great theme, just purchased, however, have an issue on the Login screen relating to the HTTP Progress indicator. When The progress / Page loading bar at the top starts running on a post, the Login box jumps from the middle to the top of the screen.

Here is a screenshot: http://imgur.com/a/KEDMv

Any ideas as to how I can stop it from doing that so the login box remains centered.

Thanks
Chris
Hi,

Not sure why it's happening exactly. Looks very strange. Are you using Angular version?

Regards.
Yes, I am using the Angular Version. All I have done as add an ng-click event to the Login button and an Ajax call in that event, it's during this that the httphandler intercepts and shows the bar. It works fine from all other pages, it is just on the Login page that it looks like this which gives people logging into the theme a terrible first experience.

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

Licenses: Details »

Single application $24
Version:2.0.2
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:Yes
Uses Sass:Yes
Categories:
Tags: admin template, dashboard, lightweight admin, material, material admin, material design, responsive admin, responsive dashboard
Item#:WB011H985
Released:2 years ago
Updated:2 months ago
Sold exclusively on WrapBootstrap
rushenn

rushenn

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