Autoresize doesn't work as expected

Scheduler
#1

I am using the DHTMLX Scheduler with the Terrace theme and the Auto-resize plugin with it. The Month view renders fine but the Day and Week view are messed up.They don’t adjust according to the space and also don’t show a scroll bar.

I have tried setting scheduler.config.readonly = true; when Month view is clicked and scheduler.config.readonly = false; when Day or Week view is clicked but haven’t had any luck so far.

Attached is the image.

DHTMLX_NoScroll_Issue
DHTMLX_NoScroll_Issue1188×2124 57.9 KB

My HTML code looks something like this:

<body>
    <div class="frcContainer">
        <label class="frcLabel">FRC!: </label>
        <select id="frcs" onchange="GetFRCs(this);">
            <option value="0">Please Select</option>
        </select>
    </div>
        <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
            <div class="dhx_cal_navline">
                <div class="dhx_cal_prev_button">&nbsp;</div>
                <div class="dhx_cal_next_button">&nbsp;</div>
                <div class="dhx_cal_today_button"></div>
                <div class="dhx_cal_date"></div>
                <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
                <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
                <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
            </div>
            <div class="dhx_cal_header">
            </div>
            <div class="dhx_cal_data">
            </div>
        </div>
    <script>
        StartRender();
    </script>
</body>
#2

Hi,

Please check in sample how autoresizing works
https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html

Unfortunately, attached screenshots don’t help to understand what happened. If the sample doesn’t help you - please send the demo where I can reproduce the issue. You can use snippet tool http://snippet.dhtmlx.com/564df0552 . Update code to reproduce, then click on Share button and send me the link.

#3

I was able to fix it. This is for folks who have run into the same issue. I DID NOT USE the Auto Resize Plugin.

I just used a div with a fixed height (600px) to wrap all my contents inside body and that did the trick.

<body>
<div heightt="600px">
    <div class="frcContainer">
        <label class="frcLabel">FRC!: </label>
        <select id="frcs" onchange="GetFRCs(this);">
            <option value="0">Please Select</option>
        </select>
    </div>
        <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
            <div class="dhx_cal_navline">
                <div class="dhx_cal_prev_button">&nbsp;</div>
                <div class="dhx_cal_next_button">&nbsp;</div>
                <div class="dhx_cal_today_button"></div>
                <div class="dhx_cal_date"></div>
                <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
                <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
                <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
            </div>
            <div class="dhx_cal_header">
            </div>
            <div class="dhx_cal_data">
            </div>
        </div>
	</div>
    <script>
        StartRender();
    </script>
</body>
#4

Thank you for sharing the solution.