Hi.

Please open datepicker.less file located in assets/less/components/extensions/jquery_ui/ folder, find

// Date select
select {
    margin: 0 1%;

    &.ui-datepicker-month,
    &.ui-datepicker-year {
        width: 48%;
    }
}

and replace with

// Date select
select {
    outline: 0;

    &.ui-datepicker-month,
    &.ui-datepicker-year {
        width: 48%;
    }
}

Basically margin needs to be removed. This issue is already fixed and included in upcoming update which will be out today/tomorrow.

Thanks

Hello, Thanks, Please Check this image : http://itc-indonesia.com/stillbug.jpg ang this http://itc-indonesia.com/question.jpg , sorry for my bad english.

1. Year range – you can use yearRange option to set a specific year range

2. Quick question – did you re-compile less files after changes? And regarding white text color – no idea why, can you please show me your code online so i can quickly investigate? Seems like you have added .bg-* class somewhere which changes text color to white, or didn’t close the tag.

Thanks

Sorry, correct less code is:

// Date select
select {
    outline: 0;

    &.ui-datepicker-month,
    &.ui-datepicker-year {
        width: 48%;
        font-size: @font-size-base;
        font-weight: 400;
        color: @text-color;
    }
}

Hi.

All echarts js files contain all available examples from specific category: file lines_areas.js contain 7 charts setups from echarts_lines_areas.html page. All you need to do is to open the file and copy configuration of the chart you want to use. Now you try to initialize all 7 charts, but in fact only 1 of them exists on the page.

Calendar doesn’t work because you get a js error related to charts. Once it’s fixed, calendar should work. Other thing is loading calendar in hidden areas, such as tabs. To load calendar in tabs, you need to use one of tabs events to re-render calendar when the tab is shown:

// Render in hidden elements
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('.schedule').fullCalendar('render');
});

Thanks

Thanks. Now calendar is working perfectly in tabs. But what about charts nad calendar at the same time. How can i solve that js error.

When i add echart i get the below error for calendar

TypeError: $(...).fullCalendar is not a function $(’#calendar’).fullCalendar({

As i mentioned above, you need to clean up echarts configuration file. Assuming you are using one of the files that come in the package.

Open that file, for example lines_areas.js located in assets/js/charts/echarts/, you’ll see there ALL chart configurations shown on echarts_lines_areas.html page.

These lines initialize charts:

// Initialize charts
// ------------------------------

var basic_lines = ec.init(document.getElementById('basic_lines'), limitless);
var stacked_lines = ec.init(document.getElementById('stacked_lines'), limitless);
var inverted_axes = ec.init(document.getElementById('inverted_axes'), limitless);
var line_point = ec.init(document.getElementById('line_point'), limitless);
var basic_area = ec.init(document.getElementById('basic_area'), limitless);
var stacked_area = ec.init(document.getElementById('stacked_area'), limitless);
var reversed_value = ec.init(document.getElementById('reversed_value'), limitless);

When you try to initialize a single chart, you get an error, because it tries to initialize charts in the containers that don’t exist. Try to remove these inits and keep only one you are using, that should fix your problem.

Also check please in the same file paths to echarts core, in case if you’ve changed your files structure.

Thanks

// Initialize after dom ready

var basic_columns = ec.init(document.getElementById(‘attendance’), limitless); var feegraph = ec.init(document.getElementById(‘fee_graph’), limitless);

I am using these two lines for initializing the chart. attendance div is in first tab and fee_graph div is in third tab. Graph in first tab is working perfectly when i load it in first time. But if i change the tab graph will not be displayed . I can see the values in tool tip for both charts.

Understood, you need to do the same as with calendar, but instead of re-render, you need to resize them:

// Resize in tabs
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    basic_columns.resize();
    feegraph.resize();
});

Place this piece of code inside the function with chart settings.

Unfortunately this is the only way for now, as described on echarts dev website. It works perfectly, but every time you switch between tabs, charts re-animate the width.

Thanks

My code for echart, https://www.dropbox.com/s/y8h41avbk9mmcgw/graph.txt?dl=0

And my code for calendar is,https://www.dropbox.com/s/y8h41avbk9mmcgw/graph.txt?dl=0

Charts are given in first and third tab and calendar is given in second tab. But the chart is only working when it load for first time in first tab. If i change the tab we can’t see the plotted values. We can see the values only in tool tip.

Chart is working only when i add the echart.js file. But if i add that file, calendar will not work and i get the error “TypeError: t is null”

Hi.

Just checked your use case, got the same error – calendar is not defined. Tried to change loading order – works when echarts are loaded after full calendar:

<script type="text/javascript" src=".../moment.min.js"></script>
<script type="text/javascript" src="...fullcalendar.min.js"></script>
<script type="text/javascript" src=".../echarts.js"></script>

Please try to do the same. I can’t reproduce charts error, all good here. If issue remains, can i see your document’s head where you loading js files?

Btw, you’ve sent same link twice.

Thanks

sorry for my mistake. For fullcalendar, https://www.dropbox.com/s/61huxa4vtrvcvvu/fullcalendar.txt?dl=0

Hey.

There is a dynamic tree plugin with sortable functionality. Sortable lists – i didn’t include any additional libraries for that, because this functionality can be achieved with jQuery UI’s Sortable extension. Also in upcoming update a new drag&drop library will be included for easier manipulations.

Thanks!

Hi,

I mean sortable with drag & drop like navigations. For ex: https://jqueryui.com/resources/demos/draggable/sortable.html

Looking forward next release!

Good work..

Understood. I’ve added Dragula library with some examples, but i haven’t included navigation list, because you can actually connect it to any list with pre-defined styles, like Bootstrap’s navs (accordions, nav menus, tabs, pills, media lists etc etc). I added these examples, update will be out very soon.

Thanks

Super news, thanks!

By the way, limitless is the best backend theme i ever seen! Just say “All in one”..

Thank you very much for kind words! Indeed, 9 months of development

I started to work on the theme. There are a lot of features I have not seen yet ;)) Few enhancement would be better, just proposal:

1. On spacing helper: mt, mb, mr, ml exists but margin vertical (mv), margin horizontal (mh) and margin all (m-5, m-10, etc..) would be great.. For padding same..

2. Panel heading elements so flexibilty, perfect! But panel footer not.. I put the action buttons to footer and it does not look good. I think panel footer should be enhance..

Thanks @Kopyov

I simply want a horizontally scrolling datatable, where multiple rows can be selected, as well as the data exported as csv/excel

I mean… I dont want a fixed column… only da scrolling

Hey hey.

You don’t need to use multiple class names, you just need to combine options in 1 table configuration. I’d suggest to wait a few days, i’ll push an update with new DT extensions. TableTools extension was removed, because it’s deprecated and replaced with “Select” extension. “Columns visibility” is now a part of “Buttons” extension, which was integrated as well. Also DT library was updated to the latest version.

Here is an example of fixed columns and new columns visibility integration.

Thanks

ok.. how do I “combine options in 1 table configuration’? I need a horizontally scrolling datatable (NO fixed column), with multi-row select, and csv/pdf deal… please help

You can do this way:

    // Datatable configuration
    $('.selector').DataTable({
        dom: '<"datatable-header"fBl><"datatable-scroll"t><"datatable-footer"ip>',
        language: {
            search: '<span>Filter:</span> _INPUT_',
            lengthMenu: '<span>Show:</span> _MENU_',
            paginate: { 'first': 'First', 'last': 'Last', 'next': '?', 'previous': '?' }
        },
        autoWidth: true,
        scrollX: true,  // enables horizontal scrolling
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print' // buttons you want to show
        ],
        select: true // enables "os"-like select
    });

And add paths to datatables.min.js file, select and buttons extensions. But this will be available in a few days.

In current version you’re using these 2 extensions are not included, but will be added in a few days with a new update. Current Columns visibility and Table tools extensions are retired and replaced with Buttons and Select.

Thanks

:( when is few days? I’m on a deadline to deliver something… I wish there was a way to make it work in current version… thanks anyway :(

when is few days? I’m on a deadline to deliver something… I wish there was a way to make it work in current version… thanks anyway

In current version it should look like this:

    // Table configuration
    $('.datatable-tools-select-multiple').DataTable({
        autoWidth: true,
        dom: '<"datatable-header"fTl><"datatable-scroll"t><"datatable-footer"ip>',
        scrollX: true,  // enables horizontal scrolling,
        language: {
            search: '<span>Filter:</span> _INPUT_',
            lengthMenu: '<span>Show:</span> _MENU_',
            paginate: { 'first': 'First', 'last': 'Last', 'next': '?', 'previous': '?' }
        },
        tableTools: {
            sRowSelect: "multi",
            aButtons: ["select_all", "select_none", "csv", "xls", "pdf"]
        }
    });

and include path to tabletools extension:

<script type="text/javascript" src="assets/js/plugins/tables/datatables/extensions/tools.min.js"></script>

Cool… I’ll give that a go… where should I enter the Table configuration? In any of the exisitng JS files, or put in a custom JS?

i think you need to use a custom js file, or if you have 1 common file with all plugin initializations, you can place it in there. It’s really up to you, because i don’t know your files structure

hehe… i have the exact same structure as in the template (Layout 1, LTR)... so custom JS it is

yeah, in default structure i’ve used a separate js file with config examples – datatables_extension_tools.js But yes, create a new one if you don’t use any other plugins on the page, otherwise combine files into 1

Thanks Kopyov!! This works nicely! But I’ve discovered a slight hiccup… the options dropdown (actions) for each row are getting cut-off (hidden) at the boundaries of the scrollable div… can this be fixed?

Unfortunately not in this example, because of scrolling. To make table body scrollable, DT wraps it in a div with overflow: auto; so everything that is displayed outside the table dimensions is hidden.

You can use callbacks added to the table config to revert last 3 dropdowns direction and display them as a drop up menu:

        drawCallback: function () {
            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
        },
        preDrawCallback: function() {
            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
        }

Hey Kopyov… i adressed the issue with individual icons as links, instead of dropdowns within a table cell… so thats sorted .... I want have style=”white-space:nowrap” for a basic table … (.table-hover, within .table-responsive).... should I touch the CSS for this? maybe a custom.css? or perhaps a .JS initiation like the scrollable datatable? Please advice..

Hey.

You can try to add existing text-nowrap helper class to the table, this should do the thing

Thanks

Hey Kopyov…. I’d swear I had seen some sort of draggable list items (to change nesting/order) somewhere in the template… cant seem to locate it now… Can you remember in which section it was? Or am I mistaken?

Hey there.

Yep, you are There is no sorting functionality for table rows in the current version, but already added in the upcoming update. It should have been out yesterday, but i’ve reverted it to update Bootstrap version. Will re-upload again today or tomorrow morning the latest once i finish going through pages and fixing minor bugs if present.

Thanks

oh cool… I specifically want the user to change the order of the rows of a table, which when saved, will get stored in a DB field (1,2,3) for order…. so I understand this is coming tomorrow… wont I get notified when the template is updated?

Yes, exactly, i’ve added Row Reorder extension with multiple examples.

Sure, you’ll get an email when update is approved

Btw… I was also asking about Nested lists… something like ubold_1.1/dark/components-nestable-list (dot) html …. can I do that with limitless?

Not at the moment, noted for the next update

Hey Kopyov… I just updated the files in my project with your update! Help!! Back to datatables, I want a multiple select datatable, with pagination, autowidth, scrollX, Select all, select none, & CSV buttons… how do I configure this & in which file?

Hi.

1. Can i see your picker configuration? Seems like something is wrong with format.

2. It’s a custom built icon set, from Ultimate pack and a few other icon sets.

Thanks

var options = {
          "showDropdowns": true,
          "timePicker": true,
          "timePicker24Hour": true,
          "autoApply": false,
          "dateLimit": {
            "months": 3
          },
          "ranges": {},
          "linkedCalendars": false,
          "parentEl": "body",
          "startDate": moment().subtract(29, 'days'),
          "endDate": moment(),
          "opens": 'left',
          "minDate": '01/01/2014',
          "maxDate": '12/31/2016',
          "applyClass": 'btn-small bg-slate',
          "cancelClass": 'btn-small btn-default'
};

1. I found this problem: select box has three class: hourselect form-control input-sm
Class .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect has width: 60px; and I can’t see selected time because class .daterangepicker .daterangepicker_input .form-control has padding-right: 35px;
Solution: If you increment width of .daterangepicker select.hourselect… to 80px the problem will resolve. Please update.
Thanks

Hello.

That’s pretty easy to do, you just need to play with variables. Open variables.less and core-variables.less files located in assets/less/core/variables/ folder:

1. Navbar – in variables.less, find @navbar-inverse-bg variable and change it to you color;

2. Sidebar – in core-variables.less, find @sidebar-dark-bg variable and change to your custom color;

3. For other components please open .less file with the component you need and change background colors to orange, it really depends on the component – some of them use new variables, some use already existing ones.

If you have any question please let me know.

Thanks

hello, in core-variables.less //* Navigation active link background colors @navigation-dark-active-bg: @color-teal-400; i have changed: //* Navigation active link background colors @navigation-dark-active-bg: @color-orange-400;

but it does not work ¿? thanks

Have you re-compiled CSS files from LESS after changes?

Thanks

If you have any problems with it, let me know your desired colors and i’ll compile them for you.

sorry but dynamic style sheets I’m lost. As it is compiled? sorry

I would like the primary colors in orange. Active menu orange, etc. thanks for your help!

No problem

Once you made any changes in LESS files, you need to compile new CSS file with these changes. Keep in mind, that LESS files can’t be used as a direct source of styles and need to use LESS compiler.

Depending on your operating system, you can use one of available applications: WinLESS for Windows or Koala for Mac. This is a really simple way to compile if this is your first experience with pre-processors. You can also use gulp task runner, but it requires some additional knowledges in order to setup everything correctly.

Koala and WinLESS use the same logic, please refer to the documentation, there is an explanations how to compile in Koala, but it’s quite the same for Winless.

Thanks

Quick one – you need @color-warning-400? And minified or not? Also how can i contact you?

Hi again

First of all, you don’t have a “Purchased” badge on the right side of your username.

According to your questions:

1. “after I add widgets to my new page the “switch to page builder” options turns off and cannot be used any more I click on it and only the script is visible it is no longer possible to open the page in page builder?”

>> Limitless admin template doesn’t have dynamic widgets and page builder, this is related to Wordpress theme builder.

2. “When I modify a predifined page like “portfolio 3 column”. Where I can change the Revoluthion theme and the pictures which are encoded into this page-”

>> Limitless admin template doesn’t have Revolution theme or Revolution slider or Revolution builder. This is related to Wordpress theme.

3. “Revolution builder is set to default and no other themes are possible thus I cannot change to my own revolution theme.”

>> Again, there is no any kind of builders in the template.

Please go to your your downloads page and open the link where is says “Limitless”, i am pretty sure you’ll find a wordpress theme with the same name

Thanks!

I do not know why I do not have a purchase badge- but I did pourchase your product via Evanto Studio- if you wish I can send you an invoice and I have it already installed but the premium version does not work. The only thing I ask is where the clients get this support which is mentioned in the license?