如何防止手动调整 md-input-container 的大小

Posted 2023-03-06

【中文标题】如何防止手动调整 md-input-container 的大小

【英文标题】：How to prevent manual resizing of md-input-container

【发布时间】：2019-08-05 06:53:47

【问题描述】：

我有一个位于 md-input-container 内的文本区域（使用 angularjs 材料版本 1.1.12）。我想阻止用户调整它的大小，并在 AngularJS Material 文档中为此目的找到了 md-no-resize 属性。但这似乎不起作用。我还尝试将 style="resize:none" 添加到内部文本区域，但这也不起作用。如果有人可以提出一种方法，我将不胜感激。 谢谢！

<div layout="column" style="width: 400px;">
  <md-input-container md-no-resize="true" style="width: 380px; height: 200px; padding: 10px; overflow-y: auto;">
    <textarea ng-model="x"/>
  </md-input-container>
</div>

【问题讨论】：

“textarea”元素默认是可调整大小的。您必须在 CSS 中更改此行为： textarea resize: none;

如果没有工作示例很难判断，但您可以尝试设置最小和最大宽度和高度作为解决方法。或者使用 !important 调整大小：none，以确保它不会在其他时候被覆盖。

非常感谢大家！我无法用 css 做到这一点。请在答案中查看我的评论。

【参考方案1】：

你有没有尝试过这样的事情：

<md-input-container md-no-resize="true" style="width: 380px; height: 200px; padding: 10px; overflow-y: auto;">
    <textarea ng-model="x" md-no-resize/>
</md-input-container>

这是关于它的文档https://material.angularjs.org/latest/api/directive/mdInput

【讨论】：

感谢您的回答。它一直在用 md-resize-wrapper 包装 textarea。我在 angular-material.js 中找到了下面的代码。因此，将 md-no-resize 添加到 textarea 就可以了。请问您也可以这样编辑答案吗？

函数 attachResizeHandle() if (attr.hasOwnProperty('mdNoResize')) return;

嗨，你能编辑我的答案吗，因为我不确定我是否完全理解你的意思，如果没有，你能提供一个代码笔，我会粘贴它:)