Adminlte: footer overlap - content-wrapper wrong min-height

Created on 16 Mar 2016 · 10Comments · Source: ColorlibHQ/AdminLTE

Hey there!
I have some problems with the min-height of the content-wrapper. I'm using a tablist as you can see down below (content is on german, sorry^^):

http://i.share.pho.to/e579f31c_o.png

As you can see, everything is fine. But when i switch the tab, the content overlaps the footer.

http://i.share.pho.to/38a4fa7a_o.png

I sniffed the code and I found the problem:
When I click on the tab, the content-wrapper min-height didn't get an update - how can I handle this?

/cheers and thanks for your work!

Source

me4tshield

Most helpful comment

Try adding <div class='row'> then your content and close the row </div>

If that doesn't work, add <div class='clearfix'></div> to the end of the document, right before the footer.

almasaeed2010 on 20 Mar 2016

👍11 🎉2

All 10 comments

How about try using the Tabs provided by the Theme and see if the error still occurs when navigating between Tabs. If not, maybe it is with your HTML tab elements.

Do share your HTML so we can give it a try and help if you'd like.

Hope this helps,

93ramadan on 16 Mar 2016

👍2

Ah, shame on me. Haven't seen that there are themed tabs. Gonna take a look later, when I've arrived at home. Thanks :)

me4tshield on 16 Mar 2016

Yeah - it was my fault. Thanks for your help, ramadan. Everything works fine, now :)

me4tshield on 16 Mar 2016

🎉1

I am Having same problem. But I am not using tabs or anything. I am using features provided by Adminlte...have a look at the problem

hansaliyad1 on 20 Mar 2016

I had the same. I realized I forgot to add a row to the boxes. So add this before your first box:

and add this at the end before the footer

jvieitez on 20 Mar 2016

@jvieitez Thank you so much for responding. I really appreciate that. But I really don't understand what do you mean by adding a row to boxes. Can you give me a simple example?

hansaliyad1 on 20 Mar 2016

Try adding <div class='row'> then your content and close the row </div>

If that doesn't work, add <div class='clearfix'></div> to the end of the document, right before the footer.

almasaeed2010 on 20 Mar 2016

👍11 🎉2

It solved the problem. Thank you @almasaeed2010

hansaliyad1 on 20 Mar 2016

🎉1

@almasaeed2010 you saved my day.

hassanrazase on 14 Nov 2018

Try adding <div class='row'> then your content and close the row </div>

If that doesn't work, add <div class='clearfix'></div> to the end of the document, right before the footer.

Solved my problem! Tyvm