Opened 7 years ago

Closed 7 years ago

Last modified 7 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 7 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 7 years ago by Scott González

Component: ui.coreui.datepicker
Owner: set to acarheden
Status: newpending

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 7 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>

But after a focus on the input, the horizontal scrollbar appears.

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

comment:4 Changed 7 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 7 years ago by iop (previous) (diff)

comment:5 Changed 7 years ago by iop

With this, the scrollbar works

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

comment:6 Changed 7 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 7 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 7 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 7 years ago by Scott González

Description: modified (diff)
Resolution: invalid
Status: pendingclosed

comment:10 Changed 7 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.