IE Compatibility issue

olaf · February 28, 2013, 3:49pm

Hi,

I want to use the scheduler in a section of our webpage. When I try to give the scheduler a position, ie won’t show the scheduler with compatibility view off.
I find out that even if you wrap the scheduler part in the html with an extra div you must turn on the compatibility view of ie.

here is a demo to show the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title></title>

	<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>

	<script src="../../codebase/ext/dhtmlxscheduler_dhx_terrace.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_dhx_terrace.css" type="text/css" media="screen" title="no title" charset="utf-8">
	
  <style type="text/css" media="screen">
    html, body{
      margin:0px;
      padding:0px;
      height:100%;
      overflow:hidden;
    }	
  </style>

  <script type="text/javascript" charset="utf-8">
    function init() {
      scheduler.config.multi_day = true;
      scheduler.config.fix_tab_position = true; 
      
      scheduler.config.xml_date="%Y-%m-%d %H:%i";
      scheduler.init('scheduler_here',new Date(2010,0,10),"week");
      scheduler.load("./data/events.xml");
    }
  </script>
</head>

<body onload="init();">

  <div> <!-- just some other 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>    
  
</body>
</html>

thanks.

Aliaksandr · February 28, 2013, 4:41pm

Hi,
parent div must have height set. If you specify it like following, everything should work:<div style="height:600px;width:800px"> <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>

olaf · March 1, 2013, 8:01am

Hi,

Thanks for your answer.
A fixed heigth is not what I am looking for. I want the scheduler to use the whole space in its container. I tried to set height:100%; width:100%, but then its is drwaing outside the container.

Do you have any other suggestions?

Her is my try to give the div a position:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
  
	<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_dhx_terrace.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_dhx_terrace.css" type="text/css" media="screen" title="no title" charset="utf-8">
	
  <style type="text/css" media="screen">
    html, body{
      margin:0px;
      padding:0px;
      height:100%;
      overflow:hidden;
    }	
    #right {
      position:fixed;
      top:60px; 
      left:180px; 
      bottom:40px; 
      right:16px; 
      height:100%;
      width:100%;
      border: 1px solid #CECECE;
    }
  </style>

  <script type="text/javascript" charset="utf-8">
    function init() {
      scheduler.config.multi_day = true;
      scheduler.config.fix_tab_position = true; 
      
      scheduler.config.xml_date="%Y-%m-%d %H:%i";
      scheduler.init('scheduler_here',new Date(2010,0,10),"week");
      scheduler.load("./data/events.xml");
    }
  </script>
</head>

<body onload="init();">

  <div id="right">
    <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>    
  
</body>
</html>

Aliaksandr · March 1, 2013, 8:31am

Hi,
scheduler takes whole size of it’s container,
#right has 100% widht and heigth, it takes full page. When you set left and top position container’s right and bottom parts are outside the page.

olaf · March 1, 2013, 11:44am

Yes, that is exactly the problem.
How can I give the scheduler the available space and give it a position?

ddelella · March 6, 2013, 2:56pm

I had a similar problem with IE in that the scheduler was appearing outside the length of the page. I had an outer div around my scheduler to enable horizontal scrolling. The outer div is set to a given height and width 100%. The scheduler container is set to 100% by 100%. This will only display with compatibility mode OFF. I know for my companies laptops I had to go in to the compatibility mode view settings and uncheck the “display intranet sets in compatibility mode” box or it would always be in compatibility mode.

olaf · March 7, 2013, 7:38am

I have ‘fixed’ my issue by adding a javascript method which recalculates the height

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
  
	<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_dhx_terrace.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_dhx_terrace.css" type="text/css" media="screen" title="no title" charset="utf-8">
	
  <style type="text/css" media="screen">
    html, body{
      margin:0px;
      padding:0px;
      height:100%;
      overflow:hidden;
    }	
    
    #header {
      padding: 8px;
      height:44px;
      font-size: 20pt;
      color:rgb(13, 98, 178);
    }    
    #nav {
      margin-left:12px;
      width:150px;  
      overflow:auto;
      border: 1px solid #CECECE;
      background-color: rgb(233,242,255);  
    }
    #right {
      position:absolute;
      top:60px; 
      left:180px; 
      bottom:40px; 
      right:16px; 
    	height: 100%; /* height:100% en auto is niet compatible met ie in compatibility view. Deze wordt door het script (resize()) herberekend*/
      width:auto;  
      display: block;
      border: 1px solid #CECECE;
    }
  </style>

  <script type="text/javascript" charset="utf-8">
    function init() {
      scheduler.config.multi_day = true;
      scheduler.config.fix_tab_position = true; 
      
      scheduler.config.xml_date="%Y-%m-%d %H:%i";
      scheduler.init('scheduler_here',new Date(2010,0,10),"week");
      scheduler.load("./data/events.xml");
    }
    
    function resize()
    {
      // Get elements and necessary element heights
      var contentDiv = document.getElementById("right");
      var headerDiv = document.getElementById("header");
      var headerHeight = headerDiv.offsetHeight + 50;

      // Get view height
      var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

      // Compute the content height - we want to fill the whole remaining area
      // in browser window
      contentDiv.style.height = viewportHeight - headerHeight + "px";
    } 
    window.onload = resize;
    window.onresize = resize;
  </script>
</head>

<body onload="init(); resize();">

  <div id="header">
    <div style="float:left">Title</div>
  </div>
      
  <div id="nav">
   dsgas
  </div>
  <div id="right">
  
    <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>    
  
</body>
</html>