This project is read-only.

Wanted to pass along a bug

Mar 20, 2013 at 2:37 AM
When using a page layout that holds an image, sharepoint will allow you to resize the image on the page layout via the ribbon. However, the bootstrap master page does not respect this and it goes full size, even if you tried to constrain it.

Great project, btw.. thanks.
Mar 25, 2013 at 6:34 AM
Hi David,

Interesting issue. That makes sense that the framework will override a width/height set by SharePoint in the Ribbon as ideally we want the image to be flexible. I am not sure if there is a good "general" workaround for this. Bootstrap automatically attempts to reset images to max-width: 100% (which you would want, allowing even your fixed width images to still be flexible) as well as set width to auto. Overriding will likely break other images you thought might have been flexible to begin with.

If you want to set the dimensions on a particular image you will probably have to hack a bit at bootstrap and possibly our bootstrap-custom.css to see why your image dimensions are being tweeked, then create a special case for your particular page layout.

If you end up with a fix you think would work for everyone, please drop us a note so that we can include this in the project.

Thanks for pointing out this issue to everyone.

Eric
Apr 16, 2013 at 9:49 PM
Has anyone found an hack for the above mentioned. Ribbon icons need to hold original size to keep visible, while the rest of the images ( img { max-width:100% ) is applied. Would really love some css to fix this please. SP10.

Jesse
Apr 16, 2013 at 10:02 PM
This seems to be a pretty big hack, but it also seems to work to a certain level.

/ Top Bar Fix /
.ms-cui-topBar2 img
{
max-width:none;
}

/ Edit Bar Fix /
.ms-cui-tabContainer img
{
max-width:none;
}

It's not pretty --- but works.
Apr 17, 2013 at 3:48 AM
Hi Jesse,

Is this in regards to SharePoint 2010 or SharePoint 2013? Both versions use similar structures for the ribbon and I have been unable to duplicate the issue with the images in the ribbon of either version.

As your fix has shown, the primary issue is that Bootstrap sets the max-width of images to 100% but with SP, this is a major issue. Both Bootstrap for 2010 and 2013 provide a few styles early on in bootstrap-custom.css that resets the max-image to none, and then turns around and resets this back to Bootstrap friendly max-width: 100% just for images found within the Bootstrap grid, i.e. span1, span2, etc. With these styles in place you should not need the two additional styles you provided, but if they work, keep it.

If you do not include these two additional styles, are there specific icons in the ribbon that do not display or do all of them get messed up? Your code is quite clean and I would like in to the project for others but I would like to first see if I can duplicate the problem.

I really appreciate you offering your experience with the project as well as your feedback.

Thanks.

Eric
Apr 17, 2013 at 6:21 PM
Eric,

This is in regards to SharePoint 2010.

You are correct in saying
If you do not include these two additional styles, are there specific icons in the ribbon that do not display or do all of them get messed up?

Problem

Most icons are 100% removed (Or scaled out of view), but a few have specks of remaining artifacts show.
Note the fleck of pixels to the right of the Site Actions text. (No, it isn't a smudge on your display.)

Image

These issues are happening:
 1. Ribbon Top (Missing / Broken (scaled) Icons)
Image
 2. Edit Bar on Ribbon (Missing / Broken (scaled) Icons)
Image
 3. Supporting Add icons within web parts. (Missing / Broken (scaled) Icons)
Image
       *May be others but my current project has only flagged those.

So let's get to the fix ( Very hack like, but works )

If I set the appropriate holders img tag to max-width: none I get desired results. (See below)

Code ( CSS )

/* Top Bar Fix */
.ms-cui-topBar2 img
{
max-width:none;
}

/* Edit Bar Fix */
.ms-cui-tabContainer img
{
max-width:none;
} 

/* Add Item Fix */
.ms-addnew img 
{
max-width:none;
}

What the fixes do.

.ms-cui-topBar2 img
{
max-width:none;
}

Fixes this (Above Code)
Image

.ms-cui-tabContainer img
{
max-width:none;
}

Fixes this (Above Code)
Image

.ms-addnew img
{
max-width:none;
}

Fixes this (Above Code)
Image

Hope this helps a few people from pounding down the Tylenol to alleviate the headache this problem may have caused. (=

Thanks.

Jesse
Apr 24, 2013 at 2:05 AM
Jesse,

Thank you very much for the detailed explanation.

Your CSS makes sense although I have been unable to duplicate the problem. No idea why.

There must be a class naming issue with "span" in it that is causing your issues, although I am not sure why I do not see it. Anyhow, the following is in the bootstrap-custom.css stylesheet.
img {
    max-width: none;
    width: auto;
}
/*must expand to all span# in case span# is not listed first*/
* [class^='span'] img, .span1 img, .span2 img, .span3 img, .span4 img, .span5 img, .span6 img,
.span7 img, .span8 img, .span9 img, .span10 img, .span11 img, .span12 img {
    max-width: 100%; /*for images inside span grid*/
}
The first style for img is supposed to reset the responsive max-width image issue with every framework and SharePoint that I have seen. The next block then resets for all classes that start with span or have span#. It's the first * [class^='span'] img that is probably causing the issue.

I went ahead and updated the css of the SharePoint 2010 Bootstrap project to reflect your updates.

Thanks again.

Eric