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

【问题标题】：Why does my dojo DateTextBox display with components on separate lines?为什么我的 dojo DateTextBox 在单独的行上显示组件？
【发布时间】：2018-08-27 11:39:06
【问题描述】：

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

一行有“日期事件开始”，

一条带向下三角形的线，

与 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 站点上）。

看起来元素都有自己的道场结构。我得到一个带有类 dijitComboBox 的 div，其中包含一个带有类 dijitDownArrowButton 的 div，该类包含一个带有类 dijitInputField 的 input。我得到了看起来合适的来源。我得到一个 dojo 文件夹，其中包含一个 dijit 文件夹，该文件夹包含一个主题/claro 文件夹，其中包含一个 claro.css 文件。

如果我单击向下箭头，月份小部件的内容将显示在页面底部，未格式化。因此，看起来这些操作正在起作用，而不是格式。

有人对如何调试此问题有任何建议吗？提前致谢！

【问题讨论】：

标签： javascript html css dojo dijit.form

【解决方案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>

【讨论】：

谢谢，嘘。这就是问题所在。好收获！