Why does panel-body have hardcoded 15px padding instead of using @grid-gutter-width?

[honi]

See here

[cvrebert]

Because a panel body isn't a grid gutter.

[honi]

Maybe it's not the intended use case, but I'm putting a row inside a panel. In that case, if the padding of the panel-body is equal to @grid-gutter-width / 2, everything looks nicely aligned.

Since the default @grid-gutter-width is 30px (15px applied to each side), this works out nicely with the default variables.

But I modified @grid-gutter-width, so in that case the hardcoded padding in panel-body doesn't work for me.

In the end, what I want is to have a grid inside a panel, or panel-like container. Maybe I'm going the wrong way about this. Would it be better to apply a background and border directly to some other element and not use a panel?

[zlatanvasovic]

Add @panel-body-padding variable, nothing special.

I'll send a pull request.

[mdo]

Nothing should be an immediate child of a .row save for a column—too many wildcards for us. It's totally doable in a lot of cases, but we have no intention of supporting that right now. Just too much overhead for us I think.

That said, we should have a variable for this. We should also have some default padding variables like @component-padding-horizontal or something. Same for margin and any other common properties.

[honi]

I agree that only columns should be immediate child of rows.

My actual setup is like this:
.panel > .panel-body > .row > .col-sm-*

With default settings, everything is fine. But because I changed to @grid-gutter-width: 20px, the actual content of the panel ends up with more horizontal padding than vertical, instead of having equal padding on both axis - unless I also change the .panel-body's padding to match @grid-gutter-width / 2

But, yeah, having @panel-body-padding or something will come in handy for this kind of situations.

[zlatanvasovic]

I will gladly improve padding customization of components, just say what
you'd need.

2013/12/14 Joni Bekenstein notifications@github.com

I agree that only columns should be immediate child of rows.

My actual setup is like this:
.panel > .panel-body > .row > .col-sm-*

With default settings, everything is fine. But because I changed to @grid-gutter-width:
20px, the actual content of the panel ends up with more horizontal
padding than vertical, instead of having equal padding on both axis -
unless I also change the .panel-body's padding to match @grid-gutter-width
/ 2

But, yeah, having @panel-body-padding or something will come in handy for
this kind of situations.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11867#issuecomment-30555968
.

Zlatan Vasović - ZDroid

[mdo]

Ended up adding the variable, but not tying it to the grid system. I don't think the relationship between the two components is strong enough to warrant it.

[zlatanvasovic]

Yup.

[honi]

Works for me!