Search and Top Navigation
#7980 closed bug (notabug)
Opened January 04, 2012 03:29AM UTC
Closed October 11, 2012 06:35PM UTC
Viewport is incorrect in Firefox
| Reported by: | Jason.Callas@L-3Com.com | Owned by: | Jason.Callas@L-3Com.com |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.11.0 |
| Component: | ui.datepicker | Version: | 1.8.16 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
The
_checkOffsetfunction uses
clientWidthand
clientHeightof
document.documentElementto get the dimensions of the viewable window. The proper method to use in Firefox is
innerWidthand
innerHeightof window.
For example, on a sample page I made the following was returned
console.log(document.documentElement.clientHeight); // returned 295 console.log(window.innerHeight); // returned 617
This actually caused the dialog to pop up above the input box even though there was plenty of vertical space available.
Attachments (0)
Change History (10)
Changed January 06, 2012 08:23PM UTC by comment:1
Changed January 06, 2012 10:50PM UTC by comment:2
| _comment0: | The problem seems to appear when the calendar would extend below the last element on the page even if there is empty space to the bottom edge of the window. Looks like Firefox calculates clientHeight to the last element whereas IE calculates it to the edge of the window. \ \ I apologize because I do not see a way to upload the attachment so I copy/pasted very stripped down code that duplicate the issue. \ \ \ \ {{{ \ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> \ <HTML> \ <HEAD> \ <title>Search</title> \ <link href="logo.ico" rel="SHORTCUT ICON" /> \ \ <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> \ \ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> \ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> \ \ <script type="text/javascript"> \ function initPage() { \ $('input.date').datepicker({ \ showOn: 'button', \ buttonImage: 'calendar.jpg', \ buttonImageOnly: true \ }); \ \ console.log(document.documentElement.clientHeight); \ console.log(window.innerHeight); \ } \ \ $(document).ready(initPage); \ </script> \ </HEAD> \ <body> \ <form name="Form1" method="post" action="Repo.aspx" id="Form1"> \ <div> \ <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> \ <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> \ <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTU4MDYyMTA4MGRkN/clWX7OZ1ijTbc/shL+d2QRmKcjTX2nBdYrQaITg48=" /> \ </div> \ \ <script type="text/javascript"> \ //<![CDATA[ \ var theForm = document.forms['Form1']; \ if (!theForm) { \ theForm = document.Form1; \ } \ function __doPostBack(eventTarget, eventArgument) { \ if (!theForm.onsubmit || (theForm.onsubmit() != false)) { \ theForm.__EVENTTARGET.value = eventTarget; \ theForm.__EVENTARGUMENT.value = eventArgument; \ theForm.submit(); \ } \ } \ //]]> \ </script> \ \ \ <div> \ \ <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKK4NCqDQKBtO2wDALDpdyYBwL+jdTpAQKu7d62CAL3l+DCAwKdmfm1CmFU4TM+h6XV4eMJ3ZX7njb9lepIT5MDnej6hi4x/081" /> \ </div> \ <br /> \ <br /> \ <br /> \ <br /> \ <br /> \ <br /> \ <br /> \ <br /> \ <br /> \ <div align="center"> \ <table id="tblSearchOptions" align="center" border="1" bordercolor="#5588bb" cols="2" frame="box" width="85%"> \ <tr> \ <th align="center" bgcolor="#003366" style="width: 13px"> \ <font color="#ffffff"> \ <a id="btnSearchType" href="javascript:__doPostBack('btnSearchType','')" style="display:inline-block;color:White;width:100%;">Search Type</a> \ </font> \ </th> \ </tr> \ <tr> \ <td align="center"> \ <ul class="menu horizontal"> \ <li><a id="btnMaintenanceSearch" href="javascript:__doPostBack('btnMaintenanceSearch','')">Maintenance Search</a></li> \ </ul> \ </td> \ </tr> \ <tr style="font-size: 12pt"> \ <td align="center"> \ <div id="MaintenanceSearchOptions"> \ \ <div> \ <label for="KeywordFilterTextBox" id="KeywordFilterLabel">Keyword Filter:</label> \ <input name="KeywordFilterTextBox" type="text" id="KeywordFilterTextBox" /> \ <label for="StartDateTextBox" id="StartDateLabel">Start Date:</label> \ <input name="StartDateTextBox" type="text" id="StartDateTextBox" class="date" /> \ <label for="EndDateTextBox" id="EndDateLabel">End Date:</label> \ <input name="EndDateTextBox" type="text" id="EndDateTextBox" class="date" /> \ </div> \ <div class="toolbar"> \ <input type="submit" name="MaintenanceSearchButton" value="Search" id="MaintenanceSearchButton" class="button" /> \ </div> \ \ </div> \ </td> \ </tr> \ <tr style="font-size: 12pt"> \ </tr> \ <tr style="font-size: 12pt"> \ </tr> \ </table> \ \ </ContentTemplate> \ </asp:UpdatePanel> \ </div> \ <DIV align="center"> \ </DIV> \ <DIV align="center"> \ </DIV> \ <DIV align="center"> \ </DIV> \ <DIV align="center"> \ </DIV> \ <DIV align="center"> \ </DIV> \ \ \ \ </form> \ </body> \ </HTML> \ \ }}} \ → 1325903350630277 |
|---|
The problem seems to appear when the calendar would extend below the last element on the page even if there is empty space to the bottom edge of the window. Looks like Firefox calculates clientHeight to the last element whereas IE calculates it to the edge of the window.
I apologize because I do not see a way to upload the attachment so I copy/pasted very stripped down code that duplicate the issue.
EDIT: large block of code removed.
Changed January 07, 2012 02:05AM UTC by comment:3
Please use jsFiddle or jsbin, as mentioned in the big red box. It's also not helpful to have ASP-specific code in your example.
Changed January 07, 2012 02:23AM UTC by comment:4
Posted in jsFiddle as requested (http://jsfiddle.net/JCallas/dph9k/) but because of the way the jsFiddle page is rendered it does not reproduce the problem.
As I stated in previous posting, the *last element* on the page needs to be away from bottom edge of the Firefox window. If you take the previously posted HTML and drop it into a plain old html file and display it in FF you will see the problem.
Thank you.
Changed January 07, 2012 02:28AM UTC by comment:5
| owner: | → Jason.Callas@L-3Com.com |
|---|---|
| status: | new → pending |
Works for me: http://jsfiddle.net/dph9k/1/show/
Changed January 07, 2012 03:18AM UTC by comment:6
| status: | pending → new |
|---|
I think I have discovered what is going on. Unfortunately I am not sure how to duplicate this exactly using jsFiddle.
It turns out the problem is a Quirks mode vs Standards compliance mode. My test page (and original page) has a document type of
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
However, the proper format should be
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Using Information --> View Page Information from Web Developer I can see that the shortened document type puts the page in Quirks mode. It is in this mode that the clientHeight and innerHeight return different values. Using the full document type the two properties return the same value and the calendar renders below the input.
The easiest way to confirm this would be to view http://jsfiddle.net/JCallas/dph9k/5/show/, view the source, copy it to an editor, shorten the doc type to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, and then view the modified source in the browser.
Changed January 07, 2012 03:22AM UTC by comment:7
| status: | new → open |
|---|
jQuery and jQuery UI do not support quirks mode.
Changed January 07, 2012 05:07PM UTC by comment:8
Understood. At least it was identified. Thank you for your assistance.
Changed October 11, 2012 02:43PM UTC by comment:9
| milestone: | 1.9.0 → 1.11.0 |
|---|
Changed October 11, 2012 06:35PM UTC by comment:10
| resolution: | → invalid |
|---|---|
| status: | open → closed |
Not sure why I didn't close this before.
Could you please attach the source of the sample page that you're using to create this situation. I can't come up with a way to make the values of document.documentElement.clientHeight & window.innerHeight to differ in Firefox 9.
Thanks.