md-maxlength导致textarea表单不对齐如何下移对应元素

你可以通过以下两种方式实现需求： #

方法1：纯CSS属性选择器实现（无需修改模板逻辑） #

直接通过CSS属性选择器匹配带有非空md-maxlength属性的textarea元素，单独添加下移样式即可：

/* 匹配存在有效md-maxlength配置的textarea */
textarea[md-maxlength]:not([md-maxlength=""]):not([md-maxlength="null"]) {
  /* 调整数值适配你项目中一行的高度，也可以用transform: translateY(1em) 避免影响相邻元素布局流 */
  margin-top: 1em;
}

方法2：动态绑定类名实现（可控性更高） #

先修改textarea模板，通过ng-class在column.maxlength有有效值时绑定专属类名：

<textarea ng-switch-when="text"
    ng-model="$ctrl.assetData[rowNumber][column.modelPropertyText]"
    ng-required="::column.required"
    ng-disabled="column.disabled"
    rows="1"
    maxlength="{{column.maxlength}}"
    md-maxlength="column.maxlength"
    ng-class="{'textarea-with-maxlength': column.maxlength != null && column.maxlength !== ''}"
>
</textarea>

再给专属类名下移样式：

.textarea-with-maxlength {
  margin-top: 1em;
}

补充说明 #

如果调整后发现字符计数提示位置异常，可额外对md-char-count类添加位置修正样式即可，不会影响其他无md-maxlength配置的元素样式。

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