Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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;">
                A
            </span>
            <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>
        </span>
    </a>
</div>

cell cutoff

Using the CSS class

.ms-acal-item
{ 
    height:50px !important;
    background:none;
    border:0;
} 

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?

share|improve this question

2 Answers 2

up vote 2 down vote accepted

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');
share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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