enter image description hereenter image description here

The first image named calendarSample1 is a screenshot of the sharepoint calendar in IE10. The second image named calendarSample2 is from Google Chrome.

I am trying to make the text within the calendar wrap. The code I used is this:

.ms-acal-item{ word-wrap:break-word!important; height:inherit!important; font-size:9px!important;}

I shrunk the text to help fit it in the date-block.

Am I missing something to make it work in other browsers (such as firefox and google chrome)? Why does it only work on IE?

I'm using Sharepoint Foundation 2013

  • hi! can you post your full CSS including the part that shrinks the cells as well. I want to reproduce your problem first. Jan 10 '14 at 17:40
  • @DenisMolodtsov ya sure: <code> .ms-acal-month-top{font-size:9px!important} body{ width:1200px!important; margin:0 auto 0 auto; font-family:"Calibri", serif!important; font-size:8pt!important; } /* min-height is needed to show the content WITHIN the pop-up dialog */ #s4-workspace{ width:inherit!important; min-height:315px!important; font-size:8pt!important; } #sideNavBox{font-size:8pt!important;} <code> Jan 10 '14 at 19:09
  • that's weird. I've got the same behavior in both IE 10 and Chrome. I've got the same situation as you have on the second screenshot. But my cells are much wider than yours even when my browser window is very narrow. So, I guess, you have more styles affecting your cells then you gave us :( Jan 10 '14 at 19:56
  • <pre>div.ms-promlink-body{height: 80px;} div.ms-tileview-tile-root{height: 85px !important; width:85px !important;} div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox, div.ms-tileview-tile-content> a> div> span { height:80px !important; width:80px !important;} div.ms-tileview-tile-content > a > div > img{ max-width:100%; width:80px !important;} /* this height is to display the desciption. Make it match the height of the img */ ul.ms-tileview-tile-detailsListMedium{ height:80px; padding:0;} li.ms-tileview-tile-descriptionMedium{ font-size:8pt; line-height:16px;} </pre> Jan 10 '14 at 20:13
  • div.ms-tileview-tile-titleTextMediumExpanded, div.ms-tileview-tile-titleTextLargeCollapsed, div.ms-tileview-tile-titleTextLargeExpanded{padding:3px;} div.ms-tileview-tile-titleTextMediumCollapsed{ background:none repeat scroll 0 0 #002E4F;font-size:8pt;line-height:16px;min-height:36px;min-width:97px;padding-left:3px;position:absolute;top:-36px;margin-left:-2px!important;} li.ms-tileview-tile-descriptionMedium{ font-size:8pt; line-height:14px; padding:3px;} /* this adjusts the image being used */ .ms-tileview-tile-content img{width:80px!important; height:80px!important;} Jan 10 '14 at 20:15

So far I could only think of this way:

.ms-acal-title>a, .ms-acal-title
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 

I think, there might still be a problem with the height. The contents of the calendar cell might go beyond the cell itself. So, I think there is a good reason there is no word-wrap in the standard SharePoint style. If you are satisfied with your first screenshot - try adding several items in one cell to test it.

  • It didn't work. Thank you for trying though. I'll just cut my loses. Jan 10 '14 at 20:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.