自定义AEM对话框——增大所有字段尺寸

以下是两种实用的实现方式，可根据需求选择：

方法一：自定义CSS注入（全局或组件专属） #

这是最常用且无侵入性的方案，通过客户端库（Client Library）加载自定义样式：

1. 创建客户端库结构
   在你的轮播组件目录下新建clientlibs文件夹，结构如下：

your-carousel-component/
  clientlibs/
    css.txt
    custom-dialog-styles.css
    .content.xml

2. 配置客户端库
   编辑.content.xml，指定样式仅在编辑器对话框中生效：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[cq.authoring.dialog]"
    dependencies="[cq.authoring.dialog.main]"/>

3. 引入样式文件
   在css.txt中添加样式文件路径：

#base=css
custom-dialog-styles.css

4. 编写自定义样式
   在custom-dialog-styles.css中添加尺寸调整规则：

/* 仅针对轮播组件对话框（替换为你的组件路径） */
[data-path="/apps/your-project/components/content/carousel/cq:dialog"] .coral-Form-field {
    font-size: 16px;
    padding: 10px 12px;
    min-height: 44px;
}

/* 同步增大标签和辅助文本尺寸 */
[data-path="/apps/your-project/components/content/carousel/cq:dialog"] .coral-Form-fieldlabel,
[data-path="/apps/your-project/components/content/carousel/cq:dialog"] .coral-Form-fieldinfo {
    font-size: 14px;
}

/* 如需全局生效，移除[data-path]选择器即可 */

方法二：单个字段属性配置（精准控制） #

若只需调整特定字段，可直接在cq:dialog的字段节点中添加配置：

1. 添加自定义类
   给目标字段添加granite:class属性，再通过CSS定位：

<textfield
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="轮播标题"
    name="./carouselTitle"
    granite:class="large-input-field"/>

对应CSS规则：

.large-input-field {
    font-size: 16px;
    padding: 10px 12px;
    min-height: 44px;
}

2. 原生属性调整
   部分Granite组件支持直接设置size属性（如文本输入框）：

<textfield
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="轮播描述"
    name="./carouselDesc"
    size="60"/> <!-- 定义输入框宽度对应的字符数 -->

注意事项 #

• 样式生效前需刷新AEM编辑器页面，或清除浏览器缓存
• 优先使用组件专属样式（data-path选择器），避免影响其他对话框
• 测试时需兼顾不同屏幕尺寸的响应式效果

内容的提问来源于stack exchange，提问作者nick