Outstanding Bootstrap conflicts with SP2013

Oct 20, 2014 at 7:58 AM
I have implemented the SP2013 WSP from this resource, with some tweaks of my own to fix known issues.

However I have the following still outstanding that was raised by a client and I'm looking for feedback as to how others have resolved.

Background printing
Bootstrap CSS seems to by default for media print disable background printing.
I have unsuccessfully tried to put it back, as we have a need for calendars to print backgrounds (colour coded). I can't seem to reset back to an OTB calendar experience for printing - is this actually bootstrap or Sharepoint causing the conflict. No overriding on the Printer properties changes the outcome.

Page Layouts
I have applied a 2 column layout that uses the left column for 3grid and right column of 9grid (small) - to give allowance for left menu (with webparts underneath) and the main body.
<div class="row" id="LeftColumn"> <div class="col-sm-12"> </div> </div> <div class="row"> <div class="col-md-9" id="MiddleColumn"> <div class="article-content"> </div> </div> <div class="col-md-3" id="RightColumn"> <div> </div> </div> </div> There is a small margin where the responsiveness doesn't quite work, so the columns overlap between 764px and 835px. But otherwise it works to single column stacking or just sufficient not to overlap.

The above takes into account the master page and I hide the left navigation in this view through CSS. Is there anything obvious as to why I get the overlap....I am assuming I need to tweak my media statements and where the stacking switch occurs to stop this 71px range overlapping?

List view changes
A major inconvenience since putting in the responsive master pages is all lists have suddenly had the heading columns disappear and the checkboxes you normally have aside each item. This stops the functionality for selecting all items, as well as sorting and filtering.

None of the views on any list was updated, this is directly related to implementation of the responsive server masterpage and bootstrap.

Has anyone come across this and restored the headings/checkboxes?

The quick edit mode also does not work properly.

Drag ‘n’ Drop functionality
The functionality with mode set to IE10 as suggested, is not working. Web parts can no longer be dragged to different zones.

I also have found the "drop zone" is misaligned and low on the screen.

Anyone experienced these issues and fixed them?

Nintex workflows
When creating a new workflow, there are some components not displaying. The main example we have found is that the three dot menu beside the field name is not displaying.
Again seems to be an CSS issue with bootstrap.
Coordinator
Oct 20, 2014 at 4:26 PM
Background printing
Bootstrap should not be overriding this. With a print stylesheet you should be able to override anything found in the framework css or your custom css. Normally though background images and colors are ignored by printers though.

Page Layouts
Sounds like the columns are too wide or have content that is too wide between your different breakpoints. I suggest styles within a media query to force widths so that content stays within its bounds

List view changes
Check out the box-sizing property of the html elements within the header row. LIkely Bootstrap overrode to border-box, you need to switch back to content-box.

drag 'n' Drop
the drop zone is misaligned because a parent div has a position of relative while SP is expecting to position relative to s4-workspace I believe. You might need to force the position of the drop zone. As for why you cannot move webparts, that one is a problem I have yet to find a good fix for.

Nintex
I know that many other 3rd party apps use content placeholders that are normally not used for additional functionality. You might need to add a few content placeholders that are normally hidden at the bottom back into your site. This might allow additional JS to load that your 3rd party apps require.

Eric
Oct 23, 2014 at 8:47 AM
Edited Oct 24, 2014 at 4:36 AM
Background printing
I haven't resolved the calendar backgrounds printing, works OTB but not with custom master page applied as system master.

List view changes
Turned out to be my own overriding CSS that was hiding heading labels and this fixed the issues once removed.

Drag n Drop
I ended up applying position: absolute and top/left 0. Followed this post to debug 99% resolution (couple of views sits a bit too high, but all other lists drop box is perfect).
https://responsivesharepoint.codeplex.com/discussions/466809

Nintex
Yet to work out the control to add ellipse back into Nintex, but I did see this behaviour on normal form views OTB as soon as responsive master was applied. Something to do with the width on Input fields being set to 100%. Should have answer tomorrow on fixing that.
Oct 24, 2014 at 4:43 AM
Eric, do you have any input on this, as I've noticed the same problem using your custom master on a OTB website and opening a form page.

The Nintex issue is that the ellipse button (ms-ButtonHeightWidth) is not visible.

Here is the code snippet from the dialog:
        <tr style="vertical-align:middle; padding:2px;">
            <td style="width:50px;"><span>Field</span></td>
            <td style="width:5px;">&nbsp</td>
            <td><select name="ctl00$PlaceHolderMain$uiDataLookupControl$uiDrpFieldsInLkp" id="ctl00_PlaceHolderMain_uiDataLookupControl_uiDrpFieldsInLkp" class="ms-inputuserfield" onchange="LookupsFieldOnchange(this,&#39;uiDataLookupControl&#39;,&#39;&#39;);">
    </select></td>
            <td style="width:5px;">&nbsp</td>
            <td><input title='Specify the format for this value.'  type="button" id="returnTypeBtnDrpLookupsuiDataLookupControl" class="ms-ButtonHeightWidth" style="width:25px; height:18px; padding:0px; vertical-align:middle;" onclick="ShowReturnTypeDialog('ctl00_PlaceHolderMain_uiDataLookupControl_uiDrpFieldsInLkp',false);" value="..." /></td>
        </tr>
I get to see the Field: [Created By]
but the ellipse button normally visible to the right of it, is missing

The above source code shows it is in html markup and I can't find any properties like display or width or positioning affecting it.

Only a bug when bootstrap in place on any forms with the ellipse. I found it disappeared on forms reducing to mobile resolution in normal sharepoint forms. This instance is a nintex create dialog.
Coordinator
Oct 24, 2014 at 4:56 AM
Best guess then is the box-sizing css issue.

Can you try:
.msButtonHeightWidht {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
That is assuming that your class reference to the image in question is correct. I unfortunately do not have access to Nintex on the dev env I use to fully test but it sounds as though the image is just not showing.

Eric
Oct 24, 2014 at 5:03 AM
I have confirmed already that it was using content-box for all containers and I tried above. No change unfortunately.

Is there a way to upload screenshots here without having them already on the web?
Oct 29, 2014 at 3:44 AM
Hi Eric,

I have found a good test which I recalled seeing such behaviour on SP forms and can reproduce the steps. I have submitted as a bug and here is the link:

https://responsivesharepoint.codeplex.com/workitem/1700

This is for the Nintex issue.


Anita
Coordinator
Nov 1, 2014 at 10:15 PM
Unfortunately no, you will have to upload your images somewhere and then link to this in a reply. Could you use onedrive or dropbox?
Feb 6, 2015 at 4:15 PM
Edited Feb 6, 2015 at 4:32 PM
Did anyone get to the bottom of this? This is my one outstanding bug that i need to fix...pretty much all my icons are not displaying... (ellipses, crosses etc).

I done some more digging and if we remove the following line it will fix things...
  • [class^="col-"] img {
    max-width: 100%; /for images inside span grid/
    }
but i dont know what knock on effect this will have!
Coordinator
Feb 19, 2015 at 5:53 PM
Hi,

By removing the max-width:100% for all images within columns, you are removing the 2nd pillar of responsive design, that being flexible media. This could be added back on an image by image basis though.

My suggestion is you add the following to your css (Add back the css in the above post first)
.ms-listviewtable IMG {
  max-width: 100%; }
  .ms-listviewtable IMG.ms-spimn-img {
    max-width: initial; }
  .ms-listviewtable IMG.ms-ellipsis-icon {
    max-width: initial; }
  .ms-listviewtable IMG.js-ellipsis25-icon {
    max-width: initial; }
  .ms-listviewtable IMG.js-callout-closeButtonImage {
    max-width: initial; }
  .ms-listviewtable IMG.ms-selectitem-icon, .ms-listviewtable IMG.ms-selectall-icon {
    max-width: initial; }
Eric