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:
Image
Image

Any Ideas?

Thanks!
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.
http://responsivesharepoint.codeplex.com/discussions/437267#post1034871

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

Jesse Westlund
www.jessewestlund.com
Sep 24, 2013 at 8:07 AM
Hi,

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.

Eric
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
{
max-width:none;
}
/* Forward/Back Icons Fix */
.ms-commandLink img
{
max-width:none;
}
Also, I've noticed another issue, although I am not sure if it is related to this one or not.
Image

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
Image

After:
Image

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:
Image

This is what it looks like with Bootstrap:
Image

I was able to fix with the following css:
a.ms-imnlink img
{
max-width:none !important;
}
Oct 2, 2013 at 5:43 PM
I found the css for the rich text:
.ms-rtetoolbarmenu img
{
max-width:none;
}
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
Hi,

Thanks for sharing that with us, very good find.

Eric
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?

Image
Nov 12, 2013 at 1:22 AM
Hi,

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.

Eric
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.

Eric