应设textarea的rows="12"并配合line-height:1.4、font-size:14px、white-space:pre-wrap、tab-size:4,启用CodeMirror后需修改对应theme-*.css中的.cm-line行高,移动端须用scrollIntoView({behavior:'smooth',block:'nearest'})延时滚动。
SQL编辑器默认行高太小,写几行就滚动
phpmyadmin 的 sql 编辑器默认用的是 textarea,不是 codemirror 编辑器——除非你明确启用了它。而原生 textarea 没有行高控制逻辑,只靠 rows 和 css line-height 联动生效。浏览器默认 line-height 常为 1.2,配合小字号,视觉上行距紧、缩进难辨、括号对齐易错判。
- 别改
height固定值:会导致字体缩放或高 DPI 屏幕下文字被裁剪 - 优先设
rows="12"(写在 HTML 的textarea标签里),这是初始可见行数,比 CSS 更可靠 - 加 CSS:
line-height: 1.4;+font-size: 14px;,两者必须同时调,否则空行高度失真 - 若已启用 CodeMirror(通过
$cfg['CodemirrorEnable'] = true;),则行高由其主题 CSS 控制,需改./themes/original/css/codemirror/theme-*.css中的.cm-line或.CodeMirror-line
启用了 CodeMirror 后行高不生效?检查主题加载路径
CodeMirror 行高不是全局生效的,它依赖当前激活的主题文件是否真正被加载。常见现象是:改了 theme-dracula.css 里的 line-height,但编辑器看起来没变化——大概率是主题没加载成功。
- 确认
$cfg['CodemirrorTheme']值与文件名前缀一致,比如设为'dracula',对应文件必须是theme-dracula.css - 文件必须放在
./themes/original/css/codemirror/下,不能放在custom.css里——后者不参与 CodeMirror 主题注入流程 - 清除 PHP OPcache 和浏览器缓存,CodeMirror 的 CSS 是动态拼接并内联注入的,旧缓存会跳过新样式
- 检查浏览器开发者工具 Elements 面板,搜索
.CodeMirror,看实际生效的line-height来自哪个 CSS 文件,避免被其他规则覆盖
移动端输入时行高塌陷,光标被键盘遮住
在 iOS Safari 或 Chrome Android 上,textarea 获取焦点后虚拟键盘弹出,常导致编辑区域可视高度骤减,且光标位置计算失效——这不是行高本身的问题,而是滚动锚点丢失。
- 监听
focus事件后延时触发scrollIntoView(),不能立即调,因为键盘动画未完成 - 必须用
scrollIntoView({ behavior: 'smooth', block: 'nearest' }),block: 'nearest'防止页面猛跳 - 若编辑器在 Modal 或 flex 容器中,确保父容器有
overflow: visible,否则scrollIntoView会被截断 - 不要依赖
scrollTop手动计算,不同设备键盘高度差异大,scrollIntoView是唯一跨平台可靠的方案
white-space: pre-wrap、tab-size: 4 是联动生效的。单独调大行高,但没设 white-space,粘贴带缩进的 CTE 查询时,所有换行和空格仍被压缩,行高再大也看不出结构。



















