Max Width on Images

Feb 5, 2013 at 4:42 AM
Looks like the max-width property for img tags (in bootstrap-custom) is conflicting with many of the system icons used throughout SharePoint by default. If I disable this property, all of the images correctly show. On the other hand, I am still learning about the this framework and don't know what is lost by disabling that property. Examples of these images are the pagination arrow (such as on the add an app page) or the "plus" symbol next to "add a document" on a standard library view.
Coordinator
Feb 5, 2013 at 5:45 PM
Hi Thamera,

Thank you for your continued feedback, we appreciate it. Every responsive framework I have seen resets all images (img) to width: 100%, max-width: 100%, allowing all images to fill up and resize within a given container. That kills SharePoint icons, so our strategy has been to reset images to width: auto, max-width: none, then anything within a tag that has a class that starts with "span" will have the responsive img styles reapplied. That can still cause problems with SP images found within a responsive column, thus the need for continued refinement as additional SP image icons are found that needs to be yet again overwritten.

I believe that we have found and updated most of the system icons so that they work (as of beta V 1.1.9). If you find more icons out of place, please continue to provide us feedback.

Thanks.
Feb 15, 2013 at 8:16 PM
Found some more issues in admin pages. So far, I have set the following overrides in my style sheet. Let me know if there is a "better way". I will continue to post any others I may find:

"this is the important one to clear the max-width property on any image with the standard src"
  • [src*="/_layouts/15/images/spcommon.png"] {
    max-width:none !important;
    }
.row-fluid [class*="ms-selectitem-span"]{
width:10px;
display: inline-block;
float: none;
height: 10px;
min-height: 0;
}
.row-fluid [class*="ms-updatelink-span"]{
width:16px;
display: inline-block;
float: none;
height: 16px;
min-height: 0;
}
Coordinator
Feb 19, 2013 at 11:48 PM
Hi Thamera,

I will add this to the next release. If you would like to join the project we can get you access to the SVN account so that you help update the project. Otherwise I am more than happy to have your fixes included in our next updates.

Thank you very much for your continued support.
Feb 21, 2013 at 2:00 AM

I appreciate the offer and am happy to participate/assist. My concern is that I am not what you might consider a “professional” developer. I’m actually a project manager who is self-taught and assists internal developers both from a project manager perspective as well as my own experience. I prefer that anything I submit be reviewed/vetted by someone with much greater experience as my solutions may solve an immediate issue but not be best for the bigger picture. Just let me know what the best format for this kind of participation might be.

Respectfully,

Travis Hamera, AIA
Project Manager - Program/Project Controls

cid:image001.gif@01CC4846.D72AF8D0

Solutions for Success

From: eoverfield [email removed]
Sent: Tuesday, February 19, 2013 4:49 PM
To: Hamera, Travis
Subject: Re: Max Width on Images [responsivesharepoint:431976]

From: eoverfield

Hi Thamera,

I will add this to the next release. If you would like to join the project we can get you access to the SVN account so that you help update the project. Otherwise I am more than happy to have your fixes included in our next updates.

Thank you very much for your continued support.