为什么我的 dojo DateTextBox 在单独的行上显示组件？

Question

我在我的网站上使用 dojo 1.13.0，大多数情况下都有效，但是当我尝试向我的表单添加 DateTextBox 时，我得到了这个：

一行与"Date Event Starts"、

一条带有向下三角形的线，

一行带 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>&nbsp;
  <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 站点上）。

看起来元素都有自己的道场结构。我得到一个 div 和 class dijitComboBox，其中包含一个 div 和 class dijitDownArrowButton包含 input 和 class dijitInputField。我得到了看起来像正确来源的东西。我得到一个 dojo 文件夹，其中包含一个 dijit 文件夹，其中包含一个 themes/claro 文件夹，里面有一个 claro.css 文件。

如果我单击向下箭头，月份小部件的内容将显示在页面底部，未格式化。因此，看起来操作有效，只是格式化无效。

有没有人对如何调试这个问题有任何建议？提前致谢！

Answer 1

这是因为您将 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>&nbsp;
  <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>&nbsp;
  <input id="eed-date-starts" name="eed-date-starts" data-dojo-observer="" type="text" data-dojo-type="dijit/form/DateTextBox">
</div>
</body>

为什么我的 dojo DateTextBox 在单独的行上显示组件？

Why does my dojo DateTextBox display with components on separate lines?

html

javascript

css

dojo

dijit.form