Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#8289 closed bug (notabug)

Horizontal Scroll doesn't appear in FF12 when datepicker used in table

Reported by: acarheden Owned by: acarheden
Priority: minor Milestone: 1.9.0
Component: ui.datepicker Version: 1.8.19
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Scott González)

This is probably a FF12 bug as it works fine in FF11, IE and chrome, but see title for what happens when you view this: 

deleted

Change History (10)

comment:1 Changed 11 years ago by acarheden

Forgot to note that the problem is the horizontal scroll bar doesn't appear until one of the datepicker is activated.

comment:2 Changed 11 years ago by Scott González

Component: ui.core → ui.datepicker
Owner: set to acarheden
Status: new → pending

Please provide a reduced test case using jsbin or jsFiddle. In the future, please pay attention to the red box telling you not to paste large blocks of code in to tickets.

comment:3 Changed 11 years ago by iop

No horizontal scrollbar with Firefox 12.0

<html> <head>

<link media="all" type="text/css" href="​http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" rel="stylesheet"/> <script type="text/javascript" src="​http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="​http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script> <script type='text/javascript'>

jQuery(document).ready(function() {

jQuery('#myinput').datepicker();

});

</script>

</head> <body>

<input type="text" id="myinput" style="width:2000px;" />

</body>

Version 0, edited 11 years ago by iop (next)

comment:4 Changed 11 years ago by iop

With firebug, when I disable the CSS rule of the div id="ui-datepicker-div" : 

.ui-helper-hidden-accessible {
    left: -1e+8px;
    position: absolute;
}

the horizontal scrollbar appears.

Last edited 11 years ago by iop (previous) (diff)

comment:5 Changed 11 years ago by iop

With this, the scrollbar works 

.ui-helper-hidden-accessible {
   left: -9999999px;
   position: absolute;
}

comment:6 Changed 11 years ago by Scott González

Again, please provide a reduced test case using jsbin or jsFiddle. Also, please make sure your test case is not using a version of jQuery UI from 17 releases ago.

comment:7 Changed 11 years ago by iop

Checked with the stable version of jQuery ui 1.8.20 => OK, it works fine.

The CSS rule in fault is not present. ;)

comment:8 Changed 11 years ago by iop

For those how doesn't have the possibility to update jQuery ui, the fix is to declare this CSS rule : 

.ui-helper-hidden-accessible {left: -9999999px!important;}

comment:9 Changed 11 years ago by Scott González

Description: modified (diff)
Resolution: → invalid
Status: pending → closed

comment:10 Changed 11 years ago by Thomas W

I've just experienced this as well. Presence of Datepicker on page, prevents Firefox from displaying horizontal scrollbar -- needed in this app's UI for viewing/editing a very wide table.

Thanks 'iop' for your CSS patch.

Note: See TracTickets for help on using tickets.