Flatfull supports this item


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

457 comments found.

Hello, I have tested it in my own server, it take 1~2 seconds to let the elements become responsive in IE when I visit a page, but I can see there is so fast in your demo, how can I fix it?

Remove the font.css and try again. Thanks!

i have buy it,and i have a question like this.http://myglowjuice.host.bluemark.cn/bug.jpg.please tellme how to reset it.my email kongdy@bluemark.cn.And i from china thanks.

change to:
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-white" />
<i class="fa fa-bold fa-stack-1x text-info" />


<div id="app"> <div> <div id="content"> <div> <!--Template Default Div generate by SPA template--> <section class="vbox"> <header> <p>Header</p> </header> <section><!--Problem : Height 100% not working--> <p>Content</p> </section> <footer><!--Problem : footer move on top--> <p>Footer</p> </footer> </section> <!--Template Default Div generate by SPA template--> </div> </div> </div> </div>

please help how to fix it?, thank you

you need make the html,body{min-height:100%}

unfortunately not working, is this template not support 100% height on mobile view out the box?

it does not support 100% height on mobile view. Thanks

Dose todo support right to left?

Currently does not support RTL, Thanks


I’d like to use the notes app inside my app with the API and would like to know which are the only files notes requires to run with your interface so I can keep it lightweight? I can then just edit the interface accordingly.



Take a look at the notes.html, js file
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <script src="js/libs/underscore-min.js"></script>
  <script src="js/libs/backbone-min.js"></script>
  <script src="js/libs/backbone.localStorage-min.js"></script>  
  <script src="js/libs/moment.min.js"></script>
  <!-- Notes -->
  <script src="js/apps/notes.js" cache="false"></script>

and if you want the RESTful api, it’s in the “api/” folder.


i am having issues with the switch. I have the animation of the wht/green working but im not getting the slider to move left/right can you tell me which files i need.

It’s css3 driven, no js file. which browser you used, the left/right works on chrome, firefox and ie9-11, but not works on ie8.


which css file?

It’s in app.css, less file “less/app.switch.less”

Mouse over in footer button broken layout in IE11. Demo here: http://jsfiddle.net/sCYjR/4/embedded/result/

Works on IE11 on windows7. Thanks

¬¬ ok, modernizr was outdated. Now works, thanks!

Hi there,

Great job on updating your script. A quick question, I need to implement something called a ‘repeater field’. I guess its a bit like your sortable list (http://flatfull.com/themes/todo/list.html) but with the ability to add and delete fields. To better explain, I found this through google images http://d7j863fr5jhrr.cloudfront.net/wp-content/uploads/2013/03/repeating-fields-edit.png I need a compatible script that allows me to add fields one after the other and with the ability to rearrange and delete them. The data would be retrieved and saved/updated to a mysql database through php.

Any advice would be appreciated. Thanks.

check this page source file. http://www.rhyzz.com/repeatable-fields/index.html the js is in the header tag.

Thanks but your JS script collection appears at the bottom. Flatfull, I just want it to be fully compatible with your template, therefore zero conflicts now and in the future. I will be using the repeater field in a variety of places, even on your dashboard page inside the third tab.

Not sure If you have the time, but could you please add the script in one of your files to demonstrate that it full works?

Thanks you.

you can put the repeatable-fields.js at the page bottom after the jquery.js and jquery.ui, no conflicts.

Is there a tab panel with tabs down the left side rather than along the top? Like the form wizard2 but without the prev/next buttons.

Currently there is no vertical tab. i will add one. Thanks

i’m sorry if i sound ignorant but how does this work i bought it thinking it was plug and play style i really needed a TODO app for my company so that we can all be in sync with what we have to do but i cant get this to work if anyone could help me i’d really appreciate it

This file has a backbone/localstorage task page. you can use the code to build your “TODO” with database.


im sorry im not very good at web desinging i just know the basic things what exatcly does backbone/localstorage mean and how would i go about personalising the template more making log in work etc?

thank you in advance

You do not need know the web design things. but you need know the html/js. this template is all about html/css/js. you need integrate this template into your cms or app.


it’s me again,

Can you help me how to integrating this template js and all dependencies with require js.

    paths: {
        'jquery': '/scripts/jquery-2.1.0',
  'template': "/scripts/template/js/app",
       'template-plugin': "/scripts/template/js/app.plugin",
'slimscroll': "/scripts/template/js/jquery.slimscroll.min",
    shim: {
        'kendo': ['jquery'],
        'toastr': ['jquery'],
       // 'datetime':['jquery']

    priority: ['text', 'router', 'app', 'app-its'],
   // jquery: '2.1.0',
    waitSeconds: 30

but it’s not working “slimscroll not working”

thank you.

I am try it before but still not working, ... slim scroll its not depend on app.js isn’t?

the app.js include the Modernizr, it will give a ”.no-touch” class on html tag. and slimscroll need this class. $(’.no-touch .slim-scroll’).each(function(){});

use the chrome dev tools to debug it.

Its working now, thanks

Hey quick question about the lockme model. On your website it seems to be working flawlessly but in the source that is downloaded I just get a grey screen when I press the lock button – do you know why that might be?

The lockme modal is a ajax modal. you need put the file on a server.


How to change border color with todo class?, thank you

Change border color on which component?

ok i got it

The table is taking too long to load. It seems you are loading all the records for later display on the screen. As has over 2600 records that are seeking the seat, takes a long time. What can I do to improve it … The table code I’m using is as follows:

<section class=”panel”> <thead></thead> <script type=”text/javascript”> jQuery(document).ready(function(){ $(‘[data-ride=”datatables”]’).each(function() { var oTable = $(this).dataTable( { “bSort”: true, “bProcessing”: true, “bAutoWidth”: false, “sDom”: ”<’row’<’col-sm-6’l><’col-sm-6’f>r>t<’row’<’col-sm-6’i><’col-sm-6’p>>”, “sPaginationType”: “full_numbers”, “aoColumns”: [ { “mData”: “dados01” }, { “mData”: “dados02” }, { “mData”: “dados03” }, { “mData”: “dados04” }, { “mData”: “dados05” }, { “mData”: “dados06” }, { “mData”: “dados07” } ], “aaData”: [ ...
Cadastro Local Tipo Nome Oportunidades Status Ações

I could not understand. Could review the code below and would like to send me?

<? $sql_lista = mysql_query("SELECT * FROM XXX ORDER BY id ASC"); $sql_lista_qtd = mysql_num_rows($sql_lista); if($sql_lista_qtd > 0){ ?> <section class=”panel”> <thead></thead> <script type=”text/javascript”> jQuery(document).ready(function(){ $(‘[data-ride=”datatables”]’).each(function() { var oTable = $(this).dataTable( { “bSort”: true, “bProcessing”: true, “bAutoWidth”: false, “sDom”: ”<’row’<’col-sm-6’l><’col-sm-6’f>r>t<’row’<’col-sm-6’i><’col-sm-6’p>>”, “sPaginationType”: “full_numbers”, “aoColumns”: [ { “mData”: “dados01” }, { “mData”: “dados02” }, { “mData”: “dados03” }, { “mData”: “dados04” }, { “mData”: “dados05” }, { “mData”: “dados06” }, { “mData”: “dados07” } ], “aaData”: [ <? $contaInseridos = 0; while($dadosGrid=mysql_fetch_array($sql_lista)) { $contaInseridos += 1; ?> { “dados01”: “XXXXXX”, “dados02”: “XXXXXX”, “dados03”: “XXXXXX”, “dados04”: “XXXXXX”, “dados05”: “XXXXXX”, “dados06”: “XXXXXX”, “dados07”: “XXXXXX” } <? if ($sql_lista_qtd > $contaInseridos){ echo ”, ”; } } ?> ] }).$(“i[title]”).tooltip( { “delay”: 0, “track”: true, “fade”: 250 }); }); }); </script>
Cadastro Local Tipo Nome Oportunidades Status Ações
</section> <? } ?>

You did not use the ajax source. follow this demo. http://datatables.net/release-datatables/examples/data_sources/server_side.html

Put your sql code and out put the json data in the “server_processing.php” file. and use the ajax source.

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "../server_side/scripts/server_processing.php" 
    } );
} );

the code is there. “Server side (PHP) code”, follow the demo step by step.


How do I get the bank records are not loaded all at once for later show, because I believe that this is the problem he is taking too long to load the page?

1. <aside class="b-l aside-lg bg-light hidden-sm">
2. <i class="fa fa-calendar fa-2x v-middle" /> <span class="hidden-sm hidden-xs">My Calendar</span>

Problem : hidden-sm not working when inside aside element (1) , working on span element for hide text (2). (vertical mode screen size : 768 x 1024)

how to fix it</pre>

use this style

@media (min-width: 768px) and (max-width: 991px) {
  .hbox > aside.hidden-sm {
    display: none !important;

Hey. I am using your theme for a PhoneGap app. I just noticed the app is not at all scrolling (default scrolling) on Samsung Duos mobile device. Could you assist me on this? Plus, are there any custom scrolling being used for mobile devices?

It’s scrolling on Chrome mobile? i did not test on Samsung Duos, i think PhoneGap app load the Samsung Duos default browser. not the Chrome.

There is no scrolling plugin for mobile. only custom the ::-webkit-scrollbar, ::-webkit-scrollbar-thumb. you can remove these style and see if it’s a bug.

I found the issue. I’ll put it here, you can change it in your code for others. :)
for @media (max-width: 767px) {
you have:
  body {
    min-height: 100%;
    height: 100%;
That needs to change as follows:
  body {
    min-height: 100%;
    /*remove height property from here*/
    /*add height property here*/
    height: 100%;

Cheers. Great theme, love your work. Thank you :)

Thanks! :)

I have a question about the IE compatibility.

When using asides the content is still disappearing (for example on the profile page). Any pointers on where I’m going wrong?

I kinda suspect the ajax loading we apply inside the asides that makes the height go all places and eventually disappears, the ajax does not change any markup.

I updated from before the fix to the latest version so maybe it’s a markup or class change that I missed. If I need to provide more info or an example of the code please let me know!

Thanks in advance!

I need more details, you can send me a message via my profile page.


Hi, Great theme, absolutely love it! I have a couple of questions about the landing page:

1. In the desktop mode the “navbar-brand” link isn’t clickable. I tried removing the z-index from the #nav, but with no effect. Is there a way to fix this?

2. There is a glitch with the scroll bars. Scrolling at the bottom of the page, an horizontal scroll bar appears. On some browsers it disappears immediatly and then everything works fine, on other browsers the page is horizontally scrollable. ( http://i.imgur.com/O4u7QUm.png ) I tried with Chrome and Firefox on Ubuntu, with Chrome, Firefox and Safari on Mac OS X and with Chrome on Android. It’s somehow related to the scrolling animations. Removing animate.css or the jquery.appear plugin everything works great, but i liked the animations :( How can I fix this?


change the “css/landing.css”

.landing .navbar-brand{
    font-size: 24px;
    position: relative;
    z-index: 1020;
html, body {
    height: auto;
    overflow-x: hidden;

Yeah, works like a charm! Thanks a lot!

You are welcome.

I don’t know what to do :(

There should be some documentation, at least!

check the docs.html. Thanks