This project is read-only.

Issues with Bootstrap for SharePoint 2013 - Beta 1.1.12 - Missing Icons

Sep 20, 2013 at 5:36 PM
See images below:

Any Ideas?

Sep 23, 2013 at 9:07 PM
I had a version if this same issue a while back.

I came up with this solution a bit back, take a look and see if it could be any help. It just might regarding the lack of images shown.

Thanks, let me know if you have any questions and good luck.

Jesse Westlund
Sep 24, 2013 at 8:07 AM

Thank you Jesse for finding that thread, I knew the issue was found before. In general the issue is that the images in the editor panel are taking on "responsive" properties by having a max-width: 100%. This causes errors, so the CSS that Jesse found should do the trick.

Sep 24, 2013 at 4:06 PM
Edited Sep 24, 2013 at 4:10 PM
Thanks all. I've found the css to fix the Paste Options and the Forward & Back icons, but I can't seem to find the css for the rich text field icons. Any clue?
/* Paste Icons Fix */
.ms-cui-ctl img
/* Forward/Back Icons Fix */
.ms-commandLink img
Also, I've noticed another issue, although I am not sure if it is related to this one or not.

Just noticed that if I resize my browser, the Add text comes into view, but if it is maximized it is way off to the side.
Sep 25, 2013 at 6:52 PM
Sorry, but I've found another issue. I was able to make the image smaller, but it doesn't look right:

Before removing img width: auto


But you can also see that the after removed the user's title.

This is the lync presence indicator in the contact details web part.
Sep 26, 2013 at 5:20 PM
Another issue, but I found the fix for this one:

People Search Results. This is what it should look like:

This is what it looks like with Bootstrap:

I was able to fix with the following css: img
max-width:none !important;
Oct 2, 2013 at 5:43 PM
I found the css for the rich text:
.ms-rtetoolbarmenu img
Nov 5, 2013 at 11:26 AM
Edited Nov 5, 2013 at 11:28 AM
I have recently started working on Share Point project and one of my responsibilities was to make it responsive. This is a great project and solved my most of the issues. Coming back to the above image issue, here is what I have done which works for most of the cases.
* [class^="span"] span > img:first-child {
    max-width: none;
    width: auto;
By looking at what Share Point does it always adds SPAN around IMG tag. I am just making the precedence higher here. Seems to be working fine for me.
Nov 5, 2013 at 5:09 PM

Thanks for sharing that with us, very good find.

Nov 8, 2013 at 11:17 PM
In 1.1.12 I notice the icons on a discussion app aren't display correctly. Is that the same issue as discussed above?

Nov 12, 2013 at 1:22 AM

The quick answer is that yes, the max-width for the image in question has been set to auto, but needs to be set to none for this particular icon image. I do not know a good class to use to target this though. How are you adding icons to this list? I am not that familiar with the ins and outs of the OOTB discussion app.

If you find the css necessary to fix this please let us know and I will see that it is added to the project.

Jun 24, 2014 at 4:49 PM
Edited Jun 24, 2014 at 4:50 PM
I think this css change will work for fixing the icon problems on the Discussion Board, we were having the same problem with our SP2013 on Bootstrap 2.3.2 install.
/* fix discussion post icons sheet*/

.ms-comm-postImageIcon-span {
display: inline-block;
width: 16px !important; /*hack*/
height: 16px !important; /*hack*/
min-height: 16px !important; /*hack*/
overflow: hidden;
position: relative;
margin: 2px 8px 4px 0px;
Jun 24, 2014 at 6:46 PM
Thanks for providing that fix.

The class name looks specific enough, so it should not harm other parts of your SP site.