Calendar list event cell height does not increase with content

Question

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 http://img215.imageshack.us/img215/2168/cellcutoff.png

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?

Answer 1

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');

Answer 2

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.