Rails Trix编辑器布局异常：编辑器被工具栏对话框遮挡

1. 修复trix-editor渲染尺寸异常 #

Zurb Foundation的XY Grid会给表单元素添加默认样式限制，强制重置trix-editor的基础显示属性：

trix-editor {
  display: block !important;
  width: 100% !important;
  min-height: 150px; /* 按需调整高度 */
}

使用!important是为了覆盖Foundation更高优先级的样式规则，确保编辑器以块级元素占满可用宽度。

2. 解决URL输入框禁用与遮挡问题 #

Trix的链接对话框默认绝对定位，易被Foundation布局遮挡，同时输入框禁用大概率是样式冲突导致：

/* 提升链接对话框层级，避免被遮挡 */
.trix-dialog--link {
  z-index: 9999 !important;
}

/* 解除URL输入框的禁用状态 */
.trix-dialog--link input[name="href"] {
  pointer-events: auto !important;
  opacity: 1 !important;
}

3. 修正父容器布局冲突 #

检查Trix编辑器所在的父容器，移除可能导致截断的样式：

• 去掉overflow: hidden属性
• 避免不必要的position: relative设置（会影响对话框的绝对定位基准）

4. 调整CSS加载顺序 #

确保actiontext.css在Foundation CSS之后加载，自定义样式放在最后，保证样式覆盖顺序正确：
在CSS入口文件（如application.css）中按以下顺序引入：

@import "foundation";
@import "actiontext";
@import "custom/trix-styles"; /* 自定义Trix样式文件 */

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