Flatfull supports this item


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

229 comments found.

You really created a wonderful template.

Unfortunately, the header walks up and down the screen while scrolling, using the Android ICS stock browser (no issues with firefox on Android.

I made a screenshot, it would be fine if you could fix it…

Hi, Tested on Android 4.0.3 stock browser, works fine. Thanks

4.3 is not working properly as you can see. The screenshot posted above was taken from your preview-page, not from the downloaded files…

I will check the 4.3, Thanks!

Hey – great theme. I want to do some javascript prior to a modal opening up on a click. But when i do that, none of the modal buttons (i.e. close) seem to be working.

Currently it is like this. Any suggestions?
<a href="#" onclick="customOpenModal()">text</a>

<div class="modal fade" id="modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Idrawfast 02/2013</h4>
        <div class="modal-body">
          <p>This is a table in a modal, click the trash icon to remove the item</p>          
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-info" data-loading-text="Updating...">Save changes</button>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->

<script type="text/javascript">
            function openModal() {     
                //do stuff         

make sure there is only one ”#modal” on the page, also you can call the .hide() function to close it. thanks!

Hi Flatfull – thanks for the response. There is only one #modal on the page. i’m using master.html as my starting point. on a row click instead of using:

<a href="#modal" data-toggle="modal"><i class="fa fa-search-plus" /></a>

i would like to use javascript to activate the modal. how do i do that?

doing this, makes it so the buttons do not work and the background fade out doesnt show, so i’m guessing this isn’t the proper way of doing it.
<a href="#" data-toggle="modal" onclick="openModal()"><i class="fa fa-search-plus" /></a>
<script type="text/javascript">
            function openModal() {     
                //do stuff         

not the $(’#modal’).show(); use $(’#modal’).modal(‘toggle’) or $(’#modal’).modal(‘show’), check http://getbootstrap.com/javascript/

Hi, I like this theme and just want to say congratulation for the work you put in.I have the following issue which I don’t know if you have an idea if there is a fix for it. When viewing a table (with many rows), when I reduce the width of the browser up to a certain point, part of the table is cut off.I was hoping to see a horizontal scroll or so which one could scroll to see the rest of the table.The horizontal scroll works if its reduces to mobile device size obviously.

you can use .hidden-xs or .hidden-sm class to hidden some column on different device sizes.

Hi!! Great theme! I love!! Please can you help me with something? I need a div with a max-height value and a overflow-y: auto. But in smaller screen, I see that the cool scrollbar show as a normal one. How can I force that the stylish scrollbar appears for that div? Thanks in advance!

Smaller screen(phone/tablet) will use the default scroll. if you want the custom webkit scroll style. you can check the “less/app.layout.less, move” style out of the @media (min-width: 768px) {}, Thanks

I would like to buy it. But there is some problem on Windows Phone. The responsive layout doesn’t work. And on other mobile device? You will solve it? Thanks.

Tested on Nexus 5 and iPhone. the responsive layout works. Thanks

In Windows Phone (Windows 8) doesn’t work, just to let you know ;-) ...great theme, but I have also Nokia Lumia as target. Let me know if you will fix it. Thanks in advance.

i will check the windows phone. Thanks


There is a version Hbox Boxed layout or Boxed layout without any javascript is available in the package?

Great template, thank’s

There is a js code to set the min-height for the nav in the app.js.


In component.html vertical wizard is not working.

will fix in next update. Thanks

Hi!! It would be awesomeness if you add this kind of modals :)


Could you? Thanks!

Actually you can use the animate.css to make the animation.
<div class="modal animated fadeInUp" id="modal-form">

you can download the full animate.css here http://daneden.github.io/animate.css/


Hi, How we can put an image in a modal in a different section of the gallery?


Do you mean on the gallery.html? Thanks

No, for example, in a list put a link and that link open a modal with an imagen. Thanks

you can use the bootstrap modal http://getbootstrap.com/javascript/#modals , to show and hide a modal. and change the image url in that modal when a link clicked.

Hi, in the form wizard I can’t seem to go to the 3rd step when I have no validation needed (eg a dropdown list) on de 2nd step. I don’t see why it doesn’t work. Can you help? Here is my code. Thanks!

<div class="step-pane active" id="step2">
                <label class="control-label">League format</label>
                <select id="League" class="form-control m-b" name="data[league-selected]">
                    <option value="public" selected="selected">Join a public league</option>
                    <option value="friend">Join a friendly league</option>
                    <option value="create">Create your own </option>

change the “js/app.plugin.js” line 126, “var validated = false;” => “var validated = true;”



I’m using the jQuery Datatables included in the template. I want to make it selectable, could you advise how can I do this?

I have tried to make a CSS class tr.row_selected, but only even rows have effect but not odd rows.

Here are the screen dumps: http://i61.tinypic.com/27y768o.png (even row selected) http://i58.tinypic.com/2v95f2b.png (odd row selected)


use the important.
tr.row_selected td{
 background-color:#ffcf8b !important;

Sorry, please ignore my question. It was my fault to have wrong CSS defined.

The following class works for me: .row_selected td { background-color: #EAEAEA !important; }

Thanks, Flatfull. You’re fast!

The form wizard button finish is shown again when going back after clicking on the tabs instead of the prev button. http://flatfull.com/themes/note/form-wizard.html

Will be fixed in next update. Thanks


I love your work have a project i would like to get started on! are you available for hire?

Please email me at slickgfx@gmail.com

Regards, Alex

Sent you a email. Thanks


how to change conten bg color?...

see this..

Just need add .bg-light class

<section id="content">
   <section class="wrapper bg-light">


wow great, thanks for fast response. :D

Hi there,

This might have already been answered, but all I see is “next release”. Do you provide the PSD files? Would like to alter the layout and would really benefit from having those files. Also, how many files are provided? (Even just the widgets would work for what I need).


Only one psd file included. layout+components+widgets, Next update coming soon.



reload method can’t work on datadrid? http://flatfull.com/themes/note/table-datagrid.html

i add some code like this <input class=”btn” id=”datagrid-reload” value=”reload” type=”button”>

or iam going wrong? What should I fill in the id

sorry bout noob question,


need call the reload function.

$('#datagrid-reload').on('click', function () {

Excellent template. Thanks!


Cool template, good work!.


Hi i already purchase, how to get the front-end template sample?

check the landing.html, Thanks

The theme is really great, and Ive already put it to good use. During my work with this theme, there is one (incredibly minor) suggestion I would make.

The shift javascript plugin is quite cool. But I suggest editing the mobile breakpoint to be when the window is <= 768 instead of <768. Since iPads portrait width is 768, it makes sense to capture that as the breakpoint. Shifting is most useful at this breakpoint since you switch from a landscape web design to a portrait web design at this point, and so thats when the most significant shifting of elements takes place. From there we can use media queries to make adjustments from the portrait tablet all the way down to cell phone no problem, but i believe the usefullness of moving the html elements happens when you move from landscape to portrait and this most commonly occurs at 768width on down.

I already made the changes for myself and its working beautifully so I am not in need of any assistance, but I am simply making the suggestion for a future release, as I think lots of other people would find it useful for the breakpoint to be just one pixel larger. This makes most of the designs more practical in my testing.


The 768 size is the medium screen(md) from small screen(sm). so the shift moves the md/lg screen element to sm, Thanks