Was wondering if someone knows how to make it so that the cell for the calendar event does not cut off the contents. Instead I want it to dynamically resize depending on the contents. I did some digging with firebug and determined that the outer div show below is being set with a height of 16 px. I do not know where/why this is being set and can't find any CSS in Calendarv4.css/Calendar.css that would be setting it

<div class="ms-acal-item ms-acal-selected" "="" _index="0,0"  style="position: absolute; left: 271px; top: 77px; width: 244px; height: 16px; border-width: 1px 2px; z-index: 1;">
<div class="ms-acal-mdiv">
    <a href="/Lists/PpmCalendar/DispForm.aspx?ID=1" onclick="EditLink2(this,'WPQ1');return false;">
        <span style="position:relative;display:inline-block;width:100%;height:100%;">
            <span style="width:100%;height:100%;display:inline-block;text-align:center;border:1px solid Red;position:absolute;color:Black;">
                <img src="/_layouts/images/FamilyCarePRL/Misc/AttachmentIndicator.png" style="float:left;">
            <span style="display:inline-block;width:100%;height:100%;background-color:Red;text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;">A</span>

cell cutoff http://img215.imageshack.us/img215/2168/cellcutoff.png

Using the CSS class

    height:50px !important;

I am able to override the height. I know using !important is bad but I can't figure out where the height is being set. Any CSS gurus out there able to lend a hand?

2 Answers 2


The style is inline in this case, set by style attribute of the div element. Inline styles have highest priority, that is not a secret. That's why you cannot override the css.

Apparently the style attribute for the div tag is generated by ListViewWebPart internally (server-side), and since unfortunately XsltListViewWebPart cannot be used for displaying calendar lists, I can't propose any better workaround here, then to stoop for using some dirty js/jquery hack :(

Sample jquery code:

$('.ms-acal-item').css('height', '50px');

have you tried height:auto!important; and width:auto!important;??? I know this question has been answered, but I'm wondering if that will work instead of a js/jquery hack.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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