Issue with web parts nested inside of Bootstrap elements

Sep 22, 2014 at 9:19 PM

Been lurking in the forums for a while, but need some help with this issue. We have made great progress with a Responsive SharePoint Intranet.

So, here is my issue, we have a site collection for all of our Customers and no this page we will house, documents, Calendar events, Key Contacts etc. The sites are Publishing sites to allow for easier branding etc.

Our master page and site layout page works great, with one small issue. We have setup our main container,row and 3 columns. The second column contains Bootstrap Tabs and on each tab we have setup some Accordion elements. Inside of each Accordion element is a BoostStrap Panel, Panel header and Panel Body. The Panel Body contains our WebPart Zones(created the Zone using the Snippet Gallery). A document library with a few test word documents have been added, looks great on screen until you click the ellipsis. The preview of the word document is cut off by the other elements on the screen and only a fraction of it shows. Ive tried messing with the Z-index, different CSS settings, even if I override the positioning to get is centered in the Panel Body the Top is cut off.

If I go to the doc library directly the preview work as intended, same with Search, they work as well.

Anyone seen something similar?

Many thanks in advance,

Sep 22, 2014 at 10:36 PM

When you say cutoff, do you mean that part of the panel appears to be hidden by a parent container's overflow set to hidden? If so, I have seen this before and the culprit was that a particular child container had set its position to relative. It is tricky to tell you the right fix without looking at all of the code, but my suggestion is to review what is set to position: relative and what has overflow: hidden.

Sep 22, 2014 at 11:16 PM

You are absolutely correct, I'll look closer at the objects positioning and overflow. I tried the overflow on the on a the main div that MS puts in to calculate the location...

Thanks for the quick reply, ill try when I get home..

Thanks again!

Sep 22, 2014 at 11:19 PM
Ok, that helps narrow this down.

I normally see this problem when trying to contain a wide SharePoint list view within a particular container to force the overflow to have inline scrollbars.

Find your container where overflow is set to hidden. Now drill through its decedents all of the way down to where the menu/modal/dialog is found in the DOM. Most likely one of those decedents has position relative, causing the menu to stay within the overflow container.

Sep 24, 2014 at 1:06 PM
ERIC! You sir are my HERO! Thank you so much, Ive been racking my brain on this one for a while and have seen in other parts of our design.

To hopefully help others out the culprit in our case was the Panel-Group Panel class in the default Bootstrap CSS file. By Default Overflow is set to "Hidden" a quick override in our custom CSS file fixed it.

AWESOME way to start the day!

Thanks again!

Nov 3, 2014 at 5:05 AM
Hi Eric,

The calendar web part inside the mainbody (with class col-md-9) has an inline scrollbar. If I have overflow:hidden, pointing to that specific web part ID. (E.g. WebPartWPQ2)
Other web part in other page with WebPartWPQ2 will hide the inline scrollbar when I actually need the scrollbar to be shown.
How should we fix this issue? The WebPartWPQ2 ID is auto generated when you add a new web part.
Any feedback will be appreciated. Thank you!
Nov 3, 2014 at 5:29 AM
Edited Nov 3, 2014 at 5:33 AM
I seem to work it out.
I changed the default overflow:auto to overflow:visible pointing to that specific web part ID. (E.g. WebPartWPQ2)
Other pages with same webpart ID is auto showing the horizontal scrollbar if necessary.
It seems to be working now.