CSS 覆盖在第一页加载时奇怪可见的 jQuery UI Datepicker div。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4580727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Override jQuery UI Datepicker div visible strangely on first page load.
提问by Adam
Something strange afoot, here:
一些奇怪的事情正在发生，在这里：
An instance of Datepicker is showing up in a weird place as a single bar in the upper left hand corner of thispage.
日期选择器的一个实例显示了一个奇怪的地方作为的左上角单杆此页面。
I'm using both jQuery UI's Datepicker and Accordion on a page. In the CSS for the UI, the display:nonefor Datepicker seems to be overridden by the display:blockfor the Accordion, at least according to Firebug (see img below).
我在页面上同时使用 jQuery UI 的 Datepicker 和 Accordion。在 UI 的 CSS 中，display:none日期选择器的for 似乎被display:block手风琴的for覆盖，至少根据 Firebug 的说法（请参见下面的 img）。
Then, once the Datepicker trigger is clicked in the 'catering/event room' tab (click one of the buttons to show div with Datepicker,) the display:noneseems to then work.
然后，一旦在“餐饮/活动室”选项卡中单击 Datepicker 触发器（单击其中一个按钮以使用 Datepicker 显示 div），display:none似乎就可以工作了。
Here's what the bad div looks like:
这是坏 div 的样子：
and here's the Firebug panel:
这是 Firebug 面板：
回答by alxbrd
I had the same problem and while some of the above solutions work, the easiest fix of all is to add this to your css:
我遇到了同样的问题，虽然上述一些解决方案有效，但最简单的解决方法是将其添加到您的 css 中：
#ui-datepicker-div {display: none;}
This basically hides the realigned datepicker element when it cannot be binded to an existing invisible element. You hide it, but it will be initialized again when you click on an element that needs to display the datepicker. Upon re-initialization, the datepicker element with id #ui-datepicker-divwill have the correct position.
当它无法绑定到现有的不可见元素时，这基本上隐藏了重新对齐的日期选择器元素。您隐藏它，但是当您单击需要显示日期选择器的元素时，它将再次初始化。重新初始化后，带有 id 的 datepicker 元素 #ui-datepicker-div将具有正确的位置。
回答by mu is too short
The problem could be that you're binding the datepicker to something that is not visible, that would explain the odd positioning (trying to offset from something that doesn't exist will degenerate to offsetting from (0,0)). The datepicker <div>should have at least a table inside it so maybe the datepicker is getting confused and throwing an exception before it finishes initializing itself. When you click on one of the bound inputs, it is probably initializing itself again (or at least properly finishing the initialization) and everything works fine after that.
问题可能是您将日期选择器绑定到不可见的东西，这可以解释奇怪的定位（试图从不存在的东西偏移将退化为从（0,0）偏移）。日期选择器<div>里面至少应该有一个表，所以日期选择器可能会在完成初始化之前感到困惑并抛出异常。当您单击绑定输入之一时，它可能会再次初始化（或至少正确完成初始化），然后一切正常。
Try binding the datepicker when the date input becomes visible:
当日期输入变得可见时，尝试绑定日期选择器：
- Remove the
$(".date_picker").datepicker({ disabled: false }); - Add an
id="cater"to<input type="text" name="cater"/> - Call
$('#cater').datepicker();when the "reserve event room" button is pressed.
- 去除那个
$(".date_picker").datepicker({ disabled: false }); - 添加
id="cater"到<input type="text" name="cater"/> $('#cater').datepicker();按下“预订活动房间”按钮时调用。
If that works then you'd have to add similar hacks for other datepickers. If it doesn't work then I'm probably wrong. If my guess turns out to be right then you might want to report a bug to the jQuery-UI people.
如果可行，那么您必须为其他日期选择器添加类似的技巧。如果它不起作用，那么我可能错了。如果我的猜测是正确的，那么您可能想要向 jQuery-UI 人员报告一个错误。
BTW, in Safari I can only see the first two tabs, I had to switch to Firefox to see the "catering" tab. Oddly enough it works just fine in Chrome. This is probably unrelated but I thought I'd let you know anyway.
顺便说一句，在 Safari 中我只能看到前两个选项卡，我不得不切换到 Firefox 才能看到“餐饮”选项卡。奇怪的是，它在 Chrome 中运行良好。这可能是无关的，但我想无论如何我都会让你知道。
回答by Matt Ramsay
The problem is down to the element the datepicker is being binded to not yet being available.
问题归结为日期选择器绑定到的元素尚不可用。
The solution I found was to initalize the datepicker when the actual element has been clicked and then showing it straight after initalization. This ensures the element is available before the datepicker has been binded to it and initalized.
我找到的解决方案是在单击实际元素时初始化日期选择器，然后在初始化后直接显示它。这可确保在日期选择器绑定到元素并初始化之前该元素可用。
$(function() {
$(".date_input").click(function() {
$(this).datepicker();
$(this).datepicker("show");
});
});
....
....
<input type="text" class='date_input' />
回答by Alexandre Ribeiro
In my case, I use the session "$(document).ready(function(){" of JQuery in my favor.
就我而言，我使用 JQuery 的会话“$(document).ready(function(){”）。
As I have a JavaScript file that is loaded in all pages of my system, I just added the following line on it.
由于我在系统的所有页面中都加载了一个 JavaScript 文件，因此我只是在其上添加了以下行。
$('#ui-datepicker-div').css('display', 'none');
For me, it appears a clear and elegant solution because I did not have to change its library.
对我来说，它似乎是一个清晰而优雅的解决方案，因为我不必更改它的库。
Best of all, it is working fine on all browsers. :)
最重要的是，它在所有浏览器上都能正常工作。:)
回答by Jan Cintala
I had a similar problem in Chrome and I solved it editing jquery-ui1.7.2.custom.css
我在 Chrome 中遇到了类似的问题，我通过编辑解决了它 jquery-ui1.7.2.custom.css
from:
从：
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
to:
到：
.ui-helper-hidden-accessible { position: absolute; left: -9999999px; }
There's probably too many nines for Chrome.
Chrome 的 9 可能太多了。
回答by hgolov
Sometimes it has to do with the z-index of another item on the page being higher. Setting the z-index to a very high number solved my issue.
有时它与页面上另一个项目的 z-index 更高有关。将 z-index 设置为非常高的数字解决了我的问题。
#ui-datepicker-div {z-index:11111;}
回答by chprpipr
Try moving the last block to the bottom of the page (right before you close the body tag). You can read more about why you want to do this here:
尝试将最后一个块移动到页面底部（就在关闭 body 标签之前）。您可以在此处阅读有关为什么要执行此操作的更多信息：
http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html
http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html
BTW: Cool idea for a menu. I like it.
顺便说一句：菜单的好主意。我喜欢。
