Scrollbar and Height When Using Site.Master and asp:Content

Scheduler ASP.NET MVC
#1

Having a problem getting the Scheduler to be the right height, and get height related functionality working correctly.

I used the Web PI to install VWD 2010 Express with MVC 3.0, and then created a MVC 3.0 web app using ASPX rather than razor (or I need to convert a lot of the code you write for the examples) and HTML 5.

To follow the “Event Calendar for ASP.NET MVC with dhtmlxScheduler” tutorial you posted, I added the contents of the script folder from the final demo, a controller, and a view without a layout or master page, and was able to get it all working fine.

I then added a new view that used the Site.Master page and MainContent placeholder. Getting the scripts in was a little more work, but I added

<asp:ContentPlaceHolder ID="AdditionalHeadContent" runat="server"></asp:ContentPlaceHolder>

To the block of the Site.Master page, and put

[code]<asp:Content ID=“Content3” ContentPlaceHolderID=“AdditionalHeadContent” runat=“server”>

[/code]

At the bottom of the Content page, with MainContent being the nested div’s from the tutorial.

Of course, the first time I ran it nothing appeared, but that was due to the height=100%; of the dhx_cal_container div. Setting the height to 500px gets it to show up. Now the scheduler is displayed but it always shows the scrollbar and the visible portion of the control is cutoff near the bottom, even though the day boxes on the monthly view seem to scale properly with changes to the scheduler div height.

The problem occurs on IE9 and Chrome 16. The attached screenshot below is for IE9.

While it works fine as a full height web page, it’s exceedingly unlikely that anyone writing a ASP.NET MVC application is not going to be using .Master pages and ContentPlaceholders, so it would really need to work well with them.

Timsheet Calendar Screenshot.png1200×799 61.9 KB

#2

The default Site.css that is added to MVC projects contains style settings that modify table, td and th - namely adding borders and setting padding.

DHTMLXScheduler will render with these styles, but it affects whether the scrollbar appears or not.

Commenting out the offending properties as below stops the scrollbar appearing:

[code]table {
/border: solid 1px #e8eef4;/
border-collapse: collapse;
}

table td {
/padding: 5px;
border: solid 1px #e8eef4;/
}

table th {
/padding: 6px 5px;/
text-align: left;
background-color: #e8eef4;
/border: solid 1px #e8eef4;/
}[/code]

But I’m assuming there is a way to modify the borders and padding of the scheduler while still having the inner control and scrollbar scale correctly.

#3

Hello, andrewh,
thank you for detailed post.

yep, scheduler’s monthview conflicts with table styles of the default master page.
simply add something like

<style>
        #scheduler_here table {
            border: none;
            border-collapse: collapse;
        }
        #scheduler_here table td {
            padding: 0;
            border: none;
        }
        #scheduler_here table th {
            padding: none;           
        }
        </style>

into content placeholder will fix it.
I’m not quite sure what do you mean by

by default scheduler will shrink(or expand) month cells to take 100% of the container height, and scrollbar wouldn’t appear.
if you want to set fixed cells height, you need to use scheduler.xy settings, add them before scheduler.init call

scheduler.xy.bar_height = 150;//bar_height - the height of day cells in the month view

btw, there is sample of application with dhtmlxScheduler on mvc3 with razor, if you interested in,
support.dhtmlx.com/x-files/sampl … arMVC3.zip

#4

What I had hoped is that even if the Master Page defines table styles, that the sceduler would adjust the sizing of the cells so that the scrollbar does not appear, but as you said scheduler’s monthview conflicts rather than adapts.

In any case, thanks for such a create control. I’m really starting to get into it now.

#5

What I cannot seem to do is get the scheduler to change height based on the height of the browser window.

I can set the height of the scheduler div directly in the content page:

[code]<asp:Content ID=“Content2” ContentPlaceHolderID=“MainContent” runat=“server”>

[/code]

But when I set the height of the MainContent placeholder directly in the Site.Master:

<section id="main" style="height:600px;"> <asp:ContentPlaceHolder ID="MainContent" runat="server" />

And then set the scheduler div height to 100%, it extends beyond the bottom of the MainContent div (see attached pic).

What I really want is for MainContent to extend to the bottom of the browser window, and for scheduler to fill that space. I’ve tried numerous “tricks” to get MainContent to size properly, but the scheduler inside it doesn’t. It is either too big, too small, or doesn’t appear at all.

Any thoughts on this?

Calendar Screenshot 2.png1164×170 4.6 KB

#6

1)i think that thing beyond maincontent is

<div id="footer"> </div>

from the master page, as you see scheduler scroll ends within maincontent, the white line below must be some other element, try to add

#footer{ display:none; }
to the scheduler page.

the calendar doesn’t appear if it’s container is collapsed, you may try something like

html, body, .page, #main
{
    height:100%;     
}

but in this case #main’s height will be bigger than window’s, since it has sibling div #header with fixed heigth. Maybe you’ll have to use js to set #main’s height before scheduler initialization