Maybe someone can help me figure this out.  I've been struggling to find out where a seemingly random padding is appearing in the cells of the dialog box for a list item.  

I'm using the masterpage, CSS and JS from "bootstrap for sharepoint" and am customizing for my needs.  As seen in the screenshot below (Chrome inspector) the dialog box list item cells have a height that is too high.  The cells/rows are 50px and I'm guessing are about 20px too high for the content.  The inspector is showing the area with a green tint implying padding but the only padding-bottom, from class ms-formbody, is 4px.  There is no other padding anywhere to be found.  I tried setting it explicitly and it did nothing.  There is no reference to "SPFieldText" or "ms-formbody" in any of the CSS or JS files for bootstrap.

I searched high and low and can't find the source of this mysterious padding or space.  Any suggestions?

Thanks!!

Hi,

Based on what you are providing, the top padding is only 3px and the bottom padding is 4px. You can verify this in the bottom right of your screenshot, the green padding. I have to assume that the box-sizing property of ms-formbody must have been set to border-box, and some css is forcing this cell to have a height of 50px.

If could be the content found with the td is forcing a height of 42px, but that seems strange.

Scroll down on the computed css and you will likely find something is setting the height. Correct that property and you are likely set.

Thanks for the response.

There is no css shown setting the height at all, or any padding beyond what you mentioned....that is why I'm here looking for help finding the culprit.  There's simply nothing in the inspector showing me what it could be.  I had also already tried applying heights and paddings to override but it did nothing.

I did find this in the css

*, *:before, *:after {
  -moz-box-sizing: border-box;
}

but it is not being applied, presumably because it is targeting firefox (it appears the same way in FF, IE and Chrome).  There are no other border-box tags and I don't know what the purpose of that is anyway.

As far as I can tell, the content isn't forcing the height and this is happening in ALL rows in EVERY list view including the dialog boxes.

My next suggestion would be to check the css of the left row, the row headers. It looks like there is some padding happening there as well. I.e. Title, Location, Start Time, etc.