通过 XPages 中的 CSS 更改 Dojo 过滤选择的大小答案

【问题标题】：Changing size of Dojo Filtering Select via CSS in XPages通过 XPages 中的 CSS 更改 Dojo 过滤选择的大小
【发布时间】：2016-02-18 12:36:24
【问题描述】：

我只想通过 CSS 更改 Dojo Filtering Select 设计元素的大小。我尝试了手册或 CSS 文件。它不起作用。

<xe:djFilteringSelect id="djselect1" value="#{document1.Language}" style="min-height: 8px;height:8.px;"></xe:djFilteringSelect> 任何建议都很重要
库姆胡尔阿塔

【问题讨论】：

我能想到的最好的建议是在 Chrome 开发工具中打开它。查看盒子模型和 CSS 并尝试将 CSS 从特定元素更改为容器。这可能会导致找到要更改的元素。弄清楚这一点后，就可以将其添加到 CSS 文件中。

标签： dojo xpages

【解决方案1】：

您只需要覆盖 dijitTextBox CSS 类。

您可能需要使用 CSS 特定性来确保选择 CSS（而不是使用 !important）。

这是一个简单的例子：

.dijitTextBox {
    width: 40px;
    height: 8px;
}

【讨论】：

【解决方案2】：

当您使用 Bootstrap 主题时，您也需要调整箭头按钮。

这对我有用：

.dbootstrap .dijitTextBox {
    height: 24px;
}
.dbootstrap .dijitComboBox .dijitButtonNode.dijitArrowButton {
    height: 22px;
}
.xsp.dbootstrap .dijitInputContainer {
    padding-top: 0px;
}
.dbootstrap .dijitComboBox input.dijitArrowButtonInner {
    margin-top: -3px;
    margin-left: -5px;
}
.dbootstrap .dijitMenuItem {
    padding: 0px 10px;
}

【讨论】：

我在 CSS 中找不到 Dojo 属性的名称以减少选择菜单中选项的大小。（我在第一个问题中添加了屏幕截图）
为.dbootstrap .dijitMenuItem 设置填充。我将其添加到我的答案中。