Hi

I think you can call a function with chart config in your ajax onSuccess callback. This solution might be useful.

Thanks

Thank you for your reply… I finally ended using google charts. In your google example page you use https://www.google.com/jsapi which is no more maintained. You have to use https://www.gstatic.com/charts/loader.js

Thank you very much for reminding, i’ve read about core update, but totally forgot about it – will be updated in the upcoming update.

Thanks!

Hey there

Everything looks good to me, the only thing that might cause this issue is you are using JS files for pages demo – all files in assets/js/pages/ are for demo purposes only, they contain a lot of examples of different plugins related to a specific page. In your case, you are using datatables_responsive.js, form_multiselect.js, components_modals.js, form_select2.js and form_layouts.js files.

If you look at browser console, there’s an error related to jQuery UI Sortable, which is called in form_select2.js file.

You also load same files twice on your page.

What i’d suggest you to do – create new custom.js file, open those files from /js/pages/ you are using and copy/paste 1-2 configurations of specific plugins and instead of using those JS files, include custom.js after app.js and all your issues should be fixed. So basically all you need to do is to clean up JS files.

Let me know please if you need further clarifications or help with specific JS configs.

Thanks

Is there a quick, clean way to organize all of our individual JS configs? Like is there a minimization tool of some sort we could use? We’d love to develop some sort of process to easily grab configs and drop into custom.js in the future when we use different limitless components. Any advice or direction on how to most efficiently do this?

Replied to your ticket.

Hello

Sorry, but i don’t understand what you mean by that. Can you please be more specific?

Thanks

Hi

Your code looks correct to me, do you see any JS errors in browser console? Would be nice if you have the page online so that i can check the possible reason.

Thanks

No ETA at the moment, it’s in progress. I am waiting for the first stable release, first BETA is about to show up and after that development will go much faster as there won’t be any significant changes onwards.

Hi

Thank you very much for reporting, confirmed – top property for .checker in horizontal form overrides default value. To fix this issue in CSS find this bit:

.multiselect-container > li > a .checker,
.multiselect-container > li > a .choice {
    top: 50%;
    margin-top: -9px;
    left: 12px;
}

and replace with:

.multiselect-container > li > a > .checkbox .checker,
.multiselect-container > li > a > .radio .choice {
    top: 50%;
    margin-top: -9px;
    left: 12px;
}

To fix this issue in LESS, open assets/less/components/plugins/forms/menus/multiselect.less (line 115) and add ”> .checkbox” and ”> .radio” accordingly.

I’ll include this fix to the upcoming update.

Thank you!

Sure, you can check out Responsive Utilities, they are included to Bootstrap by default.

Hi

1. You can find a sample config on this page. You need “Secondary top fixed” navbar, which requires affix component. The code is in assets/js/pages/navbar_multiple.js

2. Simply remove path to pace.min.js file in the list of components on your page

3. You can find a sample here, but keep in mind that you’d need to add custom styles for images inside select and results (quite easy to do).

Thanks

Many thanks

It is an excellent UI kit. Thank You!

I tried your suggestion on calling the scripts in a different order but it caused the multi and single select boxes not to work. I don’t want horizontal scroll bar for responsive view, instead I want to use the collapse Whole row as a control. Also the Single Selects show options above drop list and not below. And the Actions list on toggle control loses format. Thank You in advance

I was not sure what file and where to put the table config I thought datatables.min.js but that did not work.

Hi

That’s because you are using picker_date.js and form_select2.js files from assets/js/pages/ dir. These files are for demo purposes only and contain multiple examples of different plugins – if you look at your browser console, there’s a JS error related to pickadate plugin (it’s called in picker_date.js, but plugin itself is not loaded). Please don’t use any files from /js/pages/, instead create new file custom.js, load it after app.js and add your custom JS code in there.

In your case, you need 2 examples from both files – 1 for daterangepicker and 1 for select2.

Let me know if you need help getting this to work, i’ll send you custom.js file with correct config – email me to e.kopyov[at]gmail.com if you need that.

Thanks

Thanks for your fantastic support!

Hey Sunil

Yes, this is a common problem of all tables caused by CSS – every time you add scrollbar to any component, all children elements viewport is limited to parent container, and since scrollbar adds hidden overflow by default, all content inside table is limited to table edges. Default Bootstrap solution for responsive tables does exactly this.

In your particular case, i would suggest Datatables Responsive extension, which moves columns to the nested table when they don’t fit table width.

Hope this helps

Thanks

Hi

I am sorry, but i don’t understand the problem.

.layout-boxed class is responsible for fixed width layout, the only difference in HTML code is this class name, all magic happens in CSS – something like if body has .layout-boxed class, apply some additional styles to this class and children elements. You don’t need to change anything in HTML.

Documentation doesn’t include this kind of information, as well as basic design/development stuff. Since any HTML template requires further development, i presuming that devs have basic understanding how things work.

Sidebar disappears – this is how it works: all extra areas are hidden on small devices, but can be toggled by buttons on top right corner. Main content area is always visible. You can change it, but keep in mind that when you disable this functionality, the first thing your users will see is your sidebar (with alternative information) and in this case you force your users to scroll down quite a lot to reach the main content of the page. And this is a very bad user experience.

Please send me an email to e.kopyov[at]gmail.com with clear description of your problem with sidebars and i’ll do my best to help you out.

Thanks

Hi Kopyov,

I’ve send an email to you, with some screenshot and explanation. I hope you understand

Thanks

Hey

Yes i saw your email, will get back to you asap. Thanks

Hi Shaka

Please send me an email to e.kopyov[at]gmail.com with clear description of what colors you need and i’ll generate a new set of CSS files for you.

Thanks

Hi

Unfortunately no, you can do it only partially by using .col-xs-* grid classes, but since Bootstrap is mobile-first framework, major part of components are responsive by default.

Thanks

Hey

Yes, you can load remote content in your modal. You can find an example on this page (Remote source example). And here is a demo code:

    // Load remote content
    $('#modal_remote').on('show.bs.modal', function() {
        $(this).find('.modal-body').load('assets/demo_data/wizard/education.html', function() {

            // Init Select2 when loaded
            $('.select').select2({
                minimumResultsForSearch: Infinity
            });
        });
    });

Thanks

Hi

Unfortunately this option is not available in current version, but it’s quite easy to implement – you can add some button with “x” icon and attach a few lines of JS code which will remove list item from the tabs nav on click and/or add list item to the tabs nav when some other button is clicked.

Hope this helps.

Thanks

Hi Steve

I am not sure i understand your problem correctly. Can you please share your code with me? I need to see what exactly you are doing and what potentially can be wrong. Please send it to e.kopyov[at]gmail.com and i’ll get back to you as soon as possible.

Thanks

As stated in Common Operations, you can get content of the editor using:

editor.getValue(); // or session.getValue

And in Summernote, according to Insertion API you can try to insert a node or text.

Anyway, i don’t think this is a good idea overall. I’d suggest to use CKEditor for this purpose, there’s a bunch of code plugins available and it’s much more configurable than summernote.

Thanks

Thank you!

Always welcome, let me know if you need any further help

Of course, you can add disabled attribute and when checkbox is checked, simply remove attribute with jQuery and enable validation for this field, something like:

// Your checkbox
<input type="checkbox" value="" name="" id="check_1" disabled>

// Toggle disabled attribute
var $checkbox = $('#check_1');
$checkbox.on('change', function() {
    if ($checkbox.is(':checked')) {
        $checkbox.removeAttr('disabled');
    }
    else {
        $checkbox.prop('disabled', true);
    }
});

And then enable/disable validation depending on the checkbox state.

Hope this helps.

Thanks

If the choice of input A disables/enables input B and both are bootstrap switches, is the code different? I can’t get it work for bootstrap switches…

Yes, it’s a bit different – instead of .removeAttr(...) and .prop(...) you need to use available Bootstrap Switch methods.

Thanks

Hi

Could you please provide more information? I don’t see any issues with submenus in starter kit.

Thanks

Hey Omar

AngularJS version will be available in 2.1 version, currently focused on more important things that will available in 2.0, after that i’m going to release Angular and React versions.

Thanks