Menu icon Foundation
Empty column

Hi everyone.
I have a part of system, where the content of column could be empty, because it's filled by PHP and sometimes, there is just nothing to fill in.
But foundation behaves quite strange. When the column is empty, it collapses and the grid is get broken.
Workaround to me is to set min-height to 1px, but I think, the Foundation should handle it.

Thanks for any answer, if I'm missing something.

column

Hi everyone.
I have a part of system, where the content of column could be empty, because it's filled by PHP and sometimes, there is just nothing to fill in.
But foundation behaves quite strange. When the column is empty, it collapses and the grid is get broken.
Workaround to me is to set min-height to 1px, but I think, the Foundation should handle it.

Thanks for any answer, if I'm missing something.

Rafi Benkual about 4 years ago

A column is just a div. If it has no content, it will have no height because the default height is auto. This is expected behavior. Can you explain what you mean by "grid is broken"? Have an example we can see to help you more?

Jeremy Englert about 4 years ago

You'll probably need to write some code so that IF the DIV is empty, it sets the grid to offset the empty DIV.

Ondřej Vašíček about 4 years ago

My view of things is following - when I'm building a grid with Foundation, I would expect, that when I say "there are going to by columns - 3,4,5", they will be there with their width, no matter what the content is. I don’t wanna have any gap there. When I'm building grid, I don't always know, what the content will be like, because sometimes users fill some content and not everything is required.

As Jeremy said, do some logic in PHP is one solution, but it's seems extremely messy to me - spaghetti code. That's why I just suggested (and did actually) add rule "min-height: 1px" to every column. That means, that even column with no content will still have his place in grid (how the creator meant to).

But the reason why I wrote this ticket was, that I think it definitely should be a part of the foundation. Mayby not the "1px solution" (it's always strange to solve problems with 1p), but anything what will solve the problem of disappearing columns of zero content.

Hope everything will by readable with my English.
Thanks for your time and effort people.

skube 3 months ago

A column is just a div. If it has no content, it will have no height because the default height is auto.

 

If that is true,  why does there appear to be heights with these in your guides

Non-zero height on empty columns

skube 3 months ago

A column is just a div. If it has no content, it will have no height because the default height is auto.

 

If that is true,  why does there appear to be heights with these in your guides