locked
style issue with bootstrap for sharepoint RRS feed

  • Question

  • 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!!

    Thursday, June 18, 2015 1:26 PM

Answers

  • 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.

    Eric Overfield - PixelMill - ericoverfield.com - @EricOverfield

    • Marked as answer by IMGooch Tuesday, June 23, 2015 3:58 PM
    Friday, June 19, 2015 4:37 PM

All replies

  • 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.


    Eric Overfield - PixelMill - ericoverfield.com - @EricOverfield

    Friday, June 19, 2015 5:09 AM
  • 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.

    Friday, June 19, 2015 1:04 PM
  • 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.

    Eric Overfield - PixelMill - ericoverfield.com - @EricOverfield

    • Marked as answer by IMGooch Tuesday, June 23, 2015 3:58 PM
    Friday, June 19, 2015 4:37 PM
  • Thanks.

    I had already checked that but missed something.  There was a line-height set on the row headers.  Fixed and all is well!  

    Thanks!

    Tuesday, June 23, 2015 3:58 PM