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

Posted 2023-02-16

【中文标题】通过 XPages 中的 CSS 更改 Dojo 过滤选择的大小

【英文标题】：Changing size of Dojo Filtering Select via CSS in XPages

【发布时间】：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 文件中。

【参考方案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 设置填充。我将其添加到我的答案中。