我在我的网站上使用的是 dojo 1.13.0，大多数情况下都能正常工作，但是当我尝试将 DateTextBox 添加到我的表单时，我得到了这个:
一行带有“Date Event Starts”，
一 strip 有向下三 Angular 形的线，
一行有X，
和一行空白输入框，如下图所示:
页面的页眉如下:
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/dojo/dijit/themes/claro/claro.css" media="print" />
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script src="<?php echo TEMPLATE_DIR; ?>/dojo/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dojo/parser", "dojox/form/Manager", "dijit/form/DateTextBox", "dojo/domReady!"], function(parser) {
parser.parse();
});
</script>
在正文中:
<body class="claro myCssClass">
...
<div>
<label for="eed-date-starts">Date Event Starts</label>
<input id="eed-date-starts" name="eed-date-starts" data-dojo-observer="" type="text" data-dojo-type="dijit/form/DateTextBox">
</div>
...
</body>
我在开发人员工具控制台中没有看到任何错误(混合内容除外，因为我正在从“http://themes.googleusercontent.com/ ...”中提取字体，并且我在 https 站点上)。
看起来元素都有自己的道场结构。我得到一个带有 dijitComboBox 类的 div，它包含一个带有 dijitDownArrowButton 类的 div，它包含一个带有 dijitInputField 类的 input。我得到了看起来像正确来源的东西。我得到一个 dojo 文件夹，其中包含一个 dijit 文件夹，其中包含一个 themes/claro 文件夹，里面有一个 claro.css 文件。
如果我单击向下箭头，月份小部件的内容将显示在页面底部，未格式化。因此，看起来操作有效，只是格式化无效。
有没有人对如何调试这个问题有任何建议？提前致谢!
最佳答案
这是因为您将 claro.css 主题在 media="print"
由于这个原因，小部件无法正确呈现，因为主题仅用于打印设备(开始打印时)而不用于屏幕设备(参见 article):
更改<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/dojo/dijit/themes/claro/claro.css" media="print" />媒体属性为 screen (或删除它)它会正常工作:
请参阅以下两种情况的代码段:
无媒体属性(所有设备):
require(["dojo/parser", "dojox/form/Manager", "dijit/form/DateTextBox", "dojo/domReady!"], function(parser) {
parser.parse();
});<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<body class="claro">
<div>
<label for="eed-date-starts">Date Event Starts</label>
<input id="eed-date-starts" name="eed-date-starts" data-dojo-observer="" type="text" data-dojo-type="dijit/form/DateTextBox">
</div>
</body>使用媒体 = 打印:
require(["dojo/parser", "dojox/form/Manager", "dijit/form/DateTextBox", "dojo/domReady!"], function(parser) {
parser.parse();
});<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" media="print" />
<body class="claro">
<div>
<label for="eed-date-starts">Date Event Starts</label>
<input id="eed-date-starts" name="eed-date-starts" data-dojo-observer="" type="text" data-dojo-type="dijit/form/DateTextBox">
</div>
</body>关于javascript - 为什么我的 dojo DateTextBox 在单独的行上显示组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49354027/