434 comments found

Hi,

I am trying to make some elements have the same height and also flow left to right over several rows.

Right now it looks like this: http://screencast.com/t/7YHh2ZUQGTJE and they are defined like this:
<div class="row m-l-xs">
   <div class="col-sm-3">
     <section class="panel">
      <div class="panel-body">profile content ... </div>
     </section>
   </div>
   <div class="col-sm-3">
     <section class="panel">
      <div class="panel-body">profile content ... </div>
     </section>
   </div>
   <div class="col-sm-3">
     <section class="panel">
      <div class="panel-body">profile content ... </div>
     </section>
   </div>
...
</div>

As you can see they have different heights and they don’t flow from left to right in the right way.

How do I correct this?

thanks Thomas

Flatfull

you can put a <div class=”clearfix”> after every four items. and set a min-height for each of the item.

Thanks

Default-user

thanks

I have created a header with a profile name on the left side and a list of buttons on the right side like this: http://screencast.com/t/ZzCChprfh390 This works on the larger breakpoints, until the last button disappears: http://screencast.com/t/fN5Sbh0X

The html is like this

<header class="header b-b bg-white clearfix">
   <div class="m-t-xs m-b-xs pull-left"> Hi John Doe stuff here </div>
   <div class="m-t-xs m-b-xs pull-right">
      <ul class="list-inline pull-left">
         <li>
            <button class="btn btn-sm btn-primary">Button</button>
         </li>
         .......
      </ul>
   </div>
</header>

How do I make the header expand, so it can contain the disappearing button ?

thanks Thomas

Default-user

Turned out it was because of an encompassing vbox higher in the hierarchy

jac1092 Purchased

hey there this might have been answered but I am unclear. is this landing page included in the template? http://flatfull.com/themes/todo/landing.html#price

Flatfull

Yes, included.

Hi, since an update on google chrome, I’ve been having trouble with icons. They don’t show up until I hover them. How can I fix this?

Flatfull

Put the app.js app.plugin.js and app.data.js at the bottom after other js.

Me again,

I want to define all TODO plugin.js (others.js, app.js, app.plugin.js) with require.js, how to do that ?, I am still struggle with it.

thank you

Default-user

Fix it, //requirejs 2.0 integrates that kind of dependency tree specification directly in requirejs ‘slimscroll’: { deps: [‘jquery’, ‘app’] , exports: ‘slimscroll’ },

Hello,

I need small help please. I want to use one chart from analysis.html as stand alone on one page. It is flot-live Real-time chart.

How can I use only that one without any other, what do I need to include.

I have try to place this code in body: <script src=”js/jquery.min.js”></script> <!- Bootstrap -> <script src=”js/bootstrap.js”></script>

<!- Flot ->
<script src="js/charts/flot/jquery.flot.min.js" cache="false"></script>
<script src="js/charts/flot/jquery.flot.tooltip.min.js" cache="false"></script>
<script src="js/charts/flot/jquery.flot.resize.js" cache="false"></script>
<script src="js/charts/flot/jquery.flot.orderBars.js" cache="false"></script>
<script src="js/charts/flot/jquery.flot.pie.min.js" cache="false"></script>  
<script src="js/charts/flot/demo.js" cache="false"></script>

But it doesn’t work.

What I’m missing here????

This is code:

<div id="flot-live" style="height:240px" /> <script src="js/jquery.min.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.js"></script> <!-- Flot --> <script src="js/charts/flot/jquery.flot.min.js" cache="false"></script> <script src="js/charts/flot/jquery.flot.tooltip.min.js" cache="false"></script> <script src="js/charts/flot/jquery.flot.resize.js" cache="false"></script> <script src="js/charts/flot/jquery.flot.orderBars.js" cache="false"></script> <script src="js/charts/flot/jquery.flot.pie.min.js" cache="false"></script> <script src="js/charts/flot/demo.js" cache="false"></script>
Flatfull

also need remove the <div class=”easypiechart”> and <div class=”sparkline”> tags.

Default-user

It is not included. Please look in code I posted above. What you told me to remove is not present at all. Please help me with this.

Flatfull

Send me a msg via my profile page. so i can send the page. Thanks

I am trying to make the header sticky, so it is only the content which scrolls.

My html is like this:
<header class="header b-b bg-white clearfix">
    HEADER STUFF
</header>
<section class="scrollable">
  <section class="panel">
    <section class="panel-body m-r">BODY STUFF</section>
  </section>
</section>

Any ideas ?

thanks Thomas

Flatfull
Put the code in a .vbox container.
<body>
<section class="vbox">
  <header class="header b-b bg-white clearfix">
      HEADER STUFF
  </header>
  <section class="scrollable">
    <section class="panel">
      <section class="panel-body m-r">BODY STUFF</section>
    </section>
  </section>
</section>
</body>
Default-user

thanks

What javascript files are needed for the custom checkbox/radio button images? They seem to use fontawesome, but the markup alone isn’t enough.

Flatfull

This file: js/fuelux/fuelux.js.

Thanks

In the demo the menus don’t work and other js.

Do you have a syntax error somewhere!

Once you get that fixed is there anyway you could include a drop down menu on the demo landing page which is responsive too. That would be awesome otherwise I’ll have to code one my self. Or is there an easier way?

kungfu-themes

Perhaps I wasn’t clear. Nothing works on your demo pages! Click on the themeforest demo and nothing works.

kungfu-themes

In regards to the menu issue could you put together an example for the next update that has more than one level on the landing page and is also responsive too.

Flatfull

I tested on Chrome and FF, the landing page links work. and i will add an example for second level in next update. Thanks

nghi Purchased

Hi, thanks for this great framework!

We have a problem with parsley validation INSIDE an ajaxModal. It does not check form anymore, pop-over does not work.

Still work if I use normal modal.

Can you please suggest help?

Thanks.

Flatfull

ajaxModal load the modal, but the js does not parse the dom in it. you need trigger the validate or pop-over function again. you can put the js in the modal.

Thanks

nghi
nghi Purchased

Got it. Great!

First of all, great work – love the cleanliness of this!

Now, on to my problem – I have inserted an img into the nav-brand element (an icon – 80px high), which looks great on desktop browsers. However, when it’s shown with the horizontal header (bar along the top with logo in the middle), it’s too high and ‘chops off’ the first part of the content.

I have updated the media queries to display:none on the nav-bar element when viewed at mobile resolutions, which works fine – except on some devices (i.e Galaxy Tab 3 – 7”, one of my test devices). On iPhone, it doesn’t show and all is good.

I’ve struggled to figure out why this problem is occuring on Android (same issue doesn’t occur on Chrome desktop when I resize the browser). Therefore, I’m looking at other possibilities. For example, is it possible for me to display one image (i.e the current 80px high icon) in the vertical menu, and another (wide) image when the horizontal menu is in view?

Thanks in advance!

Flatfull

Check the dashboard-2.html page, it use a img logo.

you can always use the ”.visible-lg” or ”.visible-xs” to show on large or small screen.

Thanks

Default-user

Many Thanks :-)

Hi thanks for great work i just need to include 2

modal

in one page , don;t know how to make this i try it to create one with
<button href="#modal" data-toggle="modal" class="btn btn-sm btn-white">+</button> 
and call
<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>

and second 
<pre>
href="#modal2" data-toggle="modal" 
</pre>
call
<pre>
  <div class="modal fade" id="modal2">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal2" aria-hidden="true">×</button>

but it;s not working and help please thx</div></div></div></div></pre></div></div></div></div>
Flatfull

check the form.html, there is a “Form in a modal” button. click and you will see a embeded modal, Thanks

Hi, what do you mean by “2 runnable applications”. I am interested in the style portion of this only. Will i need to remove tons of Javascript and plugins to customize?

Flatfull

The “notes” and “tasks” are backbone apps. you can remove the plugins and components as you want. they are in separate folders and files.

Thanks

khaledo Purchased

The documentation sucks. You got 2k sales but didn’t bother to clarify how to structure our layouts with the components. That sucks a ton!!

What is this used for: off screen push left use data-toggle=”class:nav-off-screen” data-target=”#nav” to trigger the off screen nav

Flatfull

check the docs.html, there is a toggle class plugin. data-toggle=”class:nav-off-screen” data-target=”#nav” means add/remove ’.nav-off-screen’ class on ’#nav’, the .nav-off-screen only affects on mobile. thanks.

tekbird Purchased

How do i work on the grids as given in /todo/src/table.html I would like to implement the grid sort and similar functions. Please guide.

Flatfull

The datagrid use fuelux js. check the document here http://exacttarget.github.io/fuelux/

Hi Flatfull!!

Awesome theme! Congratulations!!

I´m trying to freeze the landing page “intro” for different resolutions (1920×900 and 1200×600), but it just works with horinzontally (width), not works vertically (height)... There is a way to do that?

I having problem with background images on Landing Page… I´m using this code, that works fine on Firefox, but doesn´t work on Chrome:

body { 
  background: url("../images/hand_classroom_1170_400.png") no-repeat center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.panel-default {
opacity: 0.95;
margin-top:45px;
}
.form-group.last { margin-bottom:0px; }

#escola { 
  background: url("../images/school2.jpg") no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}

Do you have any idea what I could do in this case?

Thank´s!!

Flatfull

you need set the height for different size

@media (min-width: 1200px) { 
  #escola{height: 600px}
}

@media (min-width: 1920px) { 
  #escola{height: 900px}
 }

I’ve got a big problem with IE9 and vertical scroll bars. It keeps showing a gap between the scroll bar and right-hand side. This is with your demo site so no code has been changed.

Please help!

See screenshot.

http://i.imgur.com/LN2MItr.jpg
Flatfull

Tested on IE9 on Windows 7, no gap. Thanks

kungfu-themes

Thanks so much, I guess it just be me!

tranksm Purchased

Hi, I think app.js is conflict with highcharts. If i remove app.js, highcharts works fine. But, your apps not working. Plz help me..

Flatfull

You can use the firebug to check which line goes error. Thanks

Hi, I have left menu that height more than the screen height.. It give problem in whole page..how to make left menu have scrollable without move it to aside. because I need to make it offset too..

Default-user

I’ve made it..thank you for great template

Flatfull

Thank you.

by
by
by
by
by
by