Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#10553 closed defect (fixed)

DateTextBox: Incorrect positioning of a calendar drop down with datagrid on IE7

Reported by: Eric Pasquier Owned by: bill
Priority: high Milestone: 1.5
Component: Dijit - Form Version: 1.4.0
Keywords: datagrid date picker IE7 Cc:
Blocked By: Blocking:


This problem is new with 1.4.0 and is not present in 1.3.2.

In a datagrid, if you have the 2 conditions :

  • in the css, set default table width to 100%
  • in a datagrid, preset a "dojox.grid.cells.DateTextBox?" column with a default "text" column

then, only with IE7, you have incorrect positioning of the date picker :

<style type="text/css">
table {width: 100%;}

  <table style="height: 300px" xxautoHeight="true" id="tableactions" jsId="gridActions" dojoType="dojox.grid.DataGrid" query="{'type':'action'}" store="storeAll" >
        <th width="30px" field="id" >Id</th>
<!-- The following line must be present -->
        <th styles="text-align:left;" width="50%" field="libelle" editable="true" >Actions</th>
<!-- -->
        <th width="250px" field="startdate" editable="true" formatter="formatDate" 
            styles="text-align: center;"
            constraint='{formatLength:"long", selector:"date"}'
        >Start Date</th>

I have attached a complete example.

I hope you appreciate the minimalism example as it took me a few hours to reduce it from my application... Eric.

Attachments (1)

testdate.htm (2.9 KB) - added by Eric Pasquier 9 years ago.

Download all attachments as: .zip

Change History (5)

Changed 9 years ago by Eric Pasquier

Attachment: testdate.htm added

comment:1 in reply to:  description Changed 9 years ago by Eric Pasquier

Example with the complete application :

comment:2 Changed 9 years ago by bill

Component: DojoX GridDijit
Milestone: tbd1.5
Owner: changed from Nathan Toone to bill
Status: newassigned
Summary: Incorrect positioning of a date picker with datagrid on IE7DateTextBox: Incorrect positioning of a calendar drop down with datagrid on IE7

Thanks for the test case, that helps a lot.

As you mentioned, this only happens with

table {
  width: 100%;

and the reason is that the Calendar itself is a table, and it gets set to 100% of the browser's width, throwing off the layout routines that are trying to position it. (It later gets reduced in width to match the DateTextBox width but that's after it gets positioned, maybe that's another issue.)

Anyway, the problem can be solved in your app by doing a:

.dijitCalendarContainer {
	width: auto;

I'll add that rule into dijit.css for the 1.5 release.

comment:3 Changed 9 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [21088]) Don't let a TABLE { width: 100% } rule in the app affect how Calendar displays. Fixes #10553.

comment:4 Changed 8 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.