Discussion on Limitless - Responsive Web Application Kit

Discussion on Limitless - Responsive Web Application Kit

By
Cart 13,880 sales
Well Documented

Kopyov supports this item

Supported

This author's response time can be up to 5 business days.

2227 comments found.

Hi Kopyov,

I have been using this template for my project. I have managed to make it working. just a doubt. For the footer, I have a layout_fixed_footer.html file. which has footer always fixed on top. How can I change it so that it is visible only when users scroll down (if page is long) or at the top for a single page.

Thank you!! Kepin

Hi there.

Just to confirm – are you sure that you have a footer on top, not a fixed navbar? :) Anyway, in both cases you can use fixed navbar, that hides on scroll, either top or bottom. If you want a footer to be hidden by default and appear only on page scroll, you can simply change 2 classes: .headroom-top-pinned – from 0px to -46px; and .headroom-top-unpinned – from -46px; to 0px;

If you are familiar with less, you can do the same in headroom.less file, located in assets/less/components/plugins/ui/ folder.

Thanks

Hi Kopyov, Thank you for your mail. I am talking about footer (fixed on top (@ bottom)

http://demo.interface.club/limitless/layout_1/LTR/layout_footer_fixed.html

I want that footer to be visible only when user scrolls down to bottom, ex.

http://egemem.com/theme/kode/v1.1/index.html

Thanks, Kepin

Understood, pretty easy to do. Please send me an email to e.kopyov[at]gmail.com, i’ll guide you how to change the code.

Thanks

Hi,

I am trying to use your template for building a web app. I wanna use change the colors of Left nav in Layout 2. I make changes in sidebar, navigation classes in components.min.css but to no effect. I am not familiar with LESS. Can you help me and tell me which all locations I need to make changes to change the colors for side navigation. I wanna have a white background instead of [ background-color: #263238; ]

Thanks and Regards, Bharat.

Hey,

Could you please send me an email to e.kopyov[at]gmail.com, i’ll write you a complete guide about less files or send you modified css files.

Thanks

Hello,

Excellent work on your theme, very impressive!

Is there currently functionality in the content panels (aka widgets) to make that particular content panel full screen? I see collapse, refresh and exit, but I’m wondering if there’s a way to make a given content panel full screen upon click.

This would be an excellent feature if it doesn’t already exist, I see it in other admin templates here. Example in another theme, first box of second column titled “With Tools” has full screen option: http://egemem.com/theme/kode/v1.1/panels.html

Thanks in advance for your response!

Hello,

Unfortunately not at the moment, but it is planned for the next update.

Yep i know, i’ll implement it for different parts of layout and window itself.

Thanks!

I have found a bug. When using the jquery ui datepicker inside the steps wizard nothing happens. In order to reproduce the issue just add the Jquery UI datepicker inside the jquery steps wizard and click on the textbox to display the calendar and you will notice that nothing happens. Could you please tell me what I need to do to fix the issue. Thanks in advance.

Hi.

It’s not a bug, it’s an ordering issue. You just need to initialize datepicker after steps wizard, not before. For example:

    // Init wizard
    $(".steps-basic").steps({
        headerTag: "h6",
        bodyTag: "fieldset",
        transitionEffect: "fade",
        titleTemplate: '<span class="number">#index#</span> #title#',
        labels: {
            finish: 'Submit'
        },
        onFinished: function (event, currentIndex) {
            alert("Form submitted.");
        }
    });

    // Init datepicker
    $(".datepicker").datepicker();

Just tried both options – this one works well, but doesn’t work if datepicker init code placed before wizard.

Thanks

What the best way to set an input box size, I don’t want 100% width but still want the responsive design.

Thanks Steve

Hi,

You can wrap text input in container with grid column classes, for example:

<div class="row">
    <div class="col-xs-4">
        <input type="text" class="form-control">
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control">
    </div>
    <div class="col-xs-5">
        <input type="text" class="form-control">
    </div>
</div>

You can also combine classes to apply different widths on different screen sizes: – 1/3 on large screen, 1/2 on small and full width on extra small (mobile).

If you want text input to have % based width regardless screen size, you can use .col-xs-* classes.

Alternatively you can add additional classes to CSS and specify custom width, for example:

.form-control-sm {
    width: 200px;
}
.form-control-xs {
    width: 100px;
}
and use class=”form-control form-control-xs” classes added to the input.

Thanks

Hello Kopyov, I loved the product and bought it. Next will be a request for the update: Floating Labels :)

Hello,

Already done and will be included in the update :)

Thanks

Waiting, thanks :)

Is it possible to get one CSS file and one JavaScript file for each layout? I just want to include the library once and not care about multiple files on different pages.

Basically I want to include the limitless.js and limitless.css file and that is it. Let me know if there is anything else I can provide to make it more clear what I’m trying to achieve.

Awesome work on the design btw, looks great!

Hey,

Basically yes, it is possible, but not available at the moment. Gulp file allows you to concatenate files with the following task, which is commented in gulpfile.js:

gulp.task('concatenate', function() {
    return gulp
        .src('assets/js/**/*.js') // path to js files you want to concat
        .pipe(concat('all.js')) // output file name
        .pipe(gulp.dest('assets/js')) // destination path for normal JS
        .pipe(rename({ // rename file
            suffix: ".min" // add *.min suffix
        }))
        .pipe(uglify()) // compress JS
        .pipe(gulp.dest('assets/js')); // destination path for minified JS
});

Since there is no point in concatenate all JS files that come in the template, i’d suggest you to create 1 separate folder and add plugins/extensions/libraries you want to use and change .src(‘assets/js//.js’) to .src(‘assets/js/your-new-folder//.js’), so all js files inside “your-new-folder” will be combined into 1 and compressed.

I’d recommend you to keep CSS files separately, because if you want your project to be compatible with IE9, there is a well known bug with limitation of rules inside single CSS file – all rules after 4095 will be ignored. So if your single CSS file will contain a lot of styles, you’ll have styling issues in IE9, that was the main reason why i separated them.

Thanks!

Thanks!

Hi Kopyov, I really like your template and would like to use it. But I don’t want to use everything – I only want to use a very small fraction of what you have.

My question is, do you have a set of core files that I can install and then add the bits of design that I want ? For example, if I install bootstrap and jquery – can I add only a few files to get your header for the third design, or would I need to install ALL files to get that ?

I hope the question makes sense.

Hi,

Of course, each layout includes Starter kit – a set of pages with basic functionality required for layout, you can check an example here.

So you get a very basic layout without any extra components – all js files and css code is excluded. After that you can add necessary components that you want to use. All those pages are also in the package, but they are mostly for demo purposes to display different features and configuration examples.

Thanks

Nice one, Kopyov – I’ll definitely be adding your design to my collection. It is well worth it !! Justin

Thank you! :)

Hello i’m trying to add a bootstrap-select dropdown with thick icon to the tabbed form create account tab, however both select are showing. I see the normal select dropdown with all the options and the bootstrap select with only one option.

html Head section:

<head> <meta charset=”utf-8”> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1”> <title>AppName</title>

<!- Global stylesheets ->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="../assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../assets/css/core.css" rel="stylesheet" type="text/css">
<link href="../assets/css/components.css" rel="stylesheet" type="text/css">
<link href="../assets/css/colors.css" rel="stylesheet" type="text/css">
<!- /global stylesheets ->
<!- Core JS files ->
<script type="text/javascript" src="../assets/js/plugins/loaders/pace.min.js"></script>
<script type="text/javascript" src="../assets/js/core/libraries/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/core/libraries/bootstrap.min.js"></script>
<script type="text/javascript" src="../assets/js/plugins/loaders/blockui.min.js"></script>
<!- /core JS files ->
<!- Theme JS files ->
<script type="text/javascript" src="../assets/js/plugins/forms/selects/bootstrap_select.min.js"></script>
<script type="text/javascript" src="../assets/js/plugins/internationalization/i18next.min.js"></script>
<script type="text/javascript" src="../assets/js/plugins/forms/styling/uniform.min.js"></script>
<script type="text/javascript" src="../assets/js/core/app.js"></script>
<script type="text/javascript" src="../assets/js/pages/login.js"></script>
<!- /theme JS files ->

</head>

here is my htnl code : <select class=”bootstrap-select” data-width=”100%”> <option selected>Gender</option> <option value=”1”>Male</option> <option value=”2”>Female</option> </select> .......

and th js code

$(function() {

// Style checkboxes and radios
$('.styled').uniform();
// selectpicker configurations
// Override defaults
$.fn.selectpicker.defaults = {
    iconBase: '',
    tickIcon: 'icon-checkmark3'
}
$('.bootstrap-select').selectpicker();
// i18next Configuration
// ---------------
// Add options
i18n.init({
    resGetPath: '../assets/locales/login/lng.json',
    debug: true,
    load: 'unspecific',
    detectLngQS: 'lang',
    fallbackLng : 'en',
    cookieName: 'applang',
    cookieDomain: '.mydomain.com',
    //useCookie: true,
    //lngWhitelist: ['en','es', 'de', 'fr']
},
function () {
    $('body').i18n(); // Init
});
// Change languages in dropdown
// ---------------
if(i18n.lng() === "en" || "fr" || "es" || "de") {
}
// Set active class
//$('.english').parent().addClass('active');
// Change language in dropdown
$('.language-switch').children('.dropdown-toggle').html(
    $('.language-switch').find('.english').html() + ' '
).children('img').addClass('position-left');

});

Hey,

Just tried to re-produce the issue – i get a correct bootstrap dropdown list. You have an error with i18next configuration though, when i remove it – selects works fine, configuration code is correct.

Also if you want to use a multiple select option with tick icon, you need to add “multiple” to your <select>.

Could you please email me a link to your page if you have a dev version, so i can quickly check for errors? e.kopyov[at]gmail.com

Thanks!

Are you going to upgrade echarts 3.0 on you next release? If so, when will you be releasing a new version?

Yeah, will be included in upcoming update. Should be out by the end of Feb or early March.

Thanks

Hi,

I’m trying to make a list of buttons with dropdown menus on the right side of the button. For this, I’m using nav-pills. Here’s what I need it to look like: http://imgur.com/1Tv6jPp

The left side of the button needs to perform the normal action of the button, while the right side (darker blue) needs to trigger a dropdown menu where I can see additional options.

Here is what I have so far: http://pastebin.com/v5882FPc

Thanks for any help you can provide, Toby.

Sorry, this one is correct:

.nav-pills-bordered > li > a {
    background-color: #fff;
}
.nav-pills > li > .btn-group {
    position: absolute;
    right: 0;
    top: 0;
}
.nav-pills > li > .btn-group > .btn {
    padding: 10px 15px;
    border-radius: 0 3px 3px 0;
}

All works well, thank you.

Always welcome, let me know if you have any other issues.

Hi, I would like to ask you if is there any way to fix the left sidebar (eg: http://demo.interface.club/limitless/layout_2/LTR/layout_navbar_hideable_sidebar.html) but with the difference that, when minifed, on hover, I would like the menu labels to be showed (as in this version: http://demo.interface.club/limitless/layout_2/LTR/layout_navbar_fixed.html ) instead of getting the whole menu “exploded”.

Thanks very much!! By the way, great work!!

Hi,

Wondering what solution did you work out? :) I mean these labels work by default in collapsed sidebar if sidebar isn’t fixed, so didn’t understand if you’ve changed default appearance or not.

Yeah, since hover state doesn’t exist on mobile, you need to unfocus nav item to hide label. If you want to add a delay and force labels to hide, you can replace CSS :hover with jquery solution = show label on mouseenter and hide on mouseleave (using setTimeout() function). As for me, i wouldn’t bother with changing css to js, because css solution is always better :) But up to you.

Let me know please if that doesn’t work.

Thanks

Sorry, I uploaded the wrong page: this has the sidebar fixed and the labels working ;-)

Thanks for the reply, I will try!

Aha, i see, you just removed scrolling in sidebar :) Yes, in this case all labels are visible, but if your scrollbar has a lot of items, you won’t be able to scroll, this is the main issue unfortunately.

Thanks

HI will the next update be compatible Bootstrap 4?

Hi.

Nope, i am not planning to release a BS4 version until bootstrap dev team releases a stable version. Currently it’s in Alpha, you can track a progress of development here. I honestly don’t think it’s a good idea to use Alpha version in a real project, because it’s not stable yet.

Once stable version comes out, i will immediately start converting all layouts to a new version, but will also keep v. 3.6 and will be supporting it as well.

Thanks

hi, we use datatable from datatable_advanced.html. when we use in asp.net repeater filter not visible and table layout broke.

witout dynamic data no problem. after data filter and layout broke

Hi,

Unfortunately i am not familiar with asp.net, so i’m afraid i can’t help you much with this issue. However i found some discussions about repeater and datatable, this one is discussed on datatables.net forums and is a video on youtube. I’d also suggest to check out datatables.netforums, it does have a lot of solved issues with different integrations.

Thanks

Hey. Any ETA for the next update? Like to new feature before I go live with my application ;)

Cheers, Daniel

Hey Daniel,

Working hard on it, should be available by the end of Feb or early March, a couple of major things left and need to update documentation.

Thanks!

I’m getting invalid date on the following $dateString = date(“d/m/Y”,$timeToday);

<input type=”text” input name=”SendWhenDate” id=”SendWhenDate” class=”form-control daterange-single” value=”<? echo $dateString;?>”>

Thanks

Hm, that’s weird because format is correct. Try to set a year to full format: “D/M/YYYY” or try same date with “DD/MM/YYYY” just to check if it will work in a default format.

Thanks

No luck. this throws and error but 12/12/2016 is fine

$dateString = “13/12/2016”;

This is the DOM for the date picker <script> /* jQuery ready function. Specify a function to execute when the DOM is fully loaded. */ $(document).ready( }); </script>

<input type=”text” input name=”SendWhenDate” id=”SendWhenDate” class=”form-control daterange-single” value=”<? echo $dateString;?>”>

Can you email me a link to your project if it’s online, so i can quickly check your code? e.kopyov[at]gmail.com

Thanks

Where can i see Messages / Chat page ? is there separate color.css for quick customization ?

You can find messages on this page. Colors are located in a separate less/css file, you can easily change any color just by changing color variable in less.

Thanks

How do i change the date format to dd:mm:yyyy on form-control daterange-single

Thanks

Hi,

You can set the date format in “locale” option:

// Single picker
$('.daterange-single').daterangepicker({ 
    singleDatePicker: true,
    locale: {
        format: 'DD/MM/YYYY'
    }
});

Thanks

Hi,

Found the colors menu e.g. I was referring to earlier :D I was trying to do this menu in horizontal and task manager. IMHO – the colors are done very well. http://j.mp/1Ln1Bpc , if you want i can post the links in git hub after you move the code there.

Can you please let us know if you will add a ( Vega – http://j.mp/1RzPjA4 ) landing pages with the top right, Login/Logout Button/DropDown to connect to the web app

Will there be a hideable footer

Scroll to top

Dual Side bar, where the right foldable can support, widgets/graphs/profile/ stats

thanks

Hi,

Ahh, now i get it :) Definitely will consider this option, sometimes can be pretty useful. I think it can be achieved with default markup, the only thing i need to play is background color animation.

Unfortunately Envato doesn’t allow authors to include any items from other categories – email templates, landing pages etc. I will extend current landing page with new elements and include it to the package since it uses same design and same code as Limitless.

Hideable footer is already integrated here – go down and toggle switch from “Top” to “Bottom”.

Scroll to top – yes, will add in March.

Dual sidebar – all sidebars support same functionality: collapsible/draggable/closable/tabbable categories, a lot of components and background options. Full list of supported components you can find on this page

Thanks

Hi Team,

We are using some of the chart functions when we are showing small date range data it is showing in graph but when we try to display big amount of data then graph won’t show any data and even no progress but when we debug from VS.net we are getting error. i dont have option to attach screen here if you can share me option to upload screen i will show you… and one thing i want to know if their any limit in data display ?

Hello there,

Could you please let me know what library are you using? And what error do you get? As far as i know there is no any data limits in any charting library, so probably some minor issue in config or typo in data file. You can always contact me directly via email e.kopyov[at]gmail.com

Thanks

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey