Question

我需要一个按钮，该按钮以角度浮动到文本区域的右上角。

这是我所拥有的，但不起作用

<textarea matInput  matInput rows="15" cols="40" >
 <div (click)="formatXml()" class="xmlIcon">
     <span matTooltip="'Format Xml'" class="fas fa-search-plus ml-1" ></span>
   </div>           
 </textarea>

.xmlIcon{
    padding-right: 20px;  
    background-position: top right;
    background-repeat: no-repeat;
}

Answer 1

HTML

<div class="textarea-container">
 <textarea name="foo">Some content here...</textarea>
 <button>Menu</button>
</div>

css

.textarea-container {
  position: relative;
 }
.textarea-container textarea {
 width: 100%;
 height: 100%;
 box-sizing: border-box;
}
.textarea-container button {
 position: absolute;
 top: 0;
 right: 0;
}

实时example

Answer 2

您可以用一个元素包装文本区域和按钮。因此，您可以将按钮绝对位置在相对的“外部元素”中。

.outer {
  position: relative;
  display: inline-block;
}

.xmlIcon {
  background-position: top right;
  background-repeat: no-repeat;
  background-color: red;
  position: absolute;
  top: 20px;
  right: 20px;
}

<div class="outer">
  <textarea matInput matInput rows="15" cols="40"></textarea>

  <div (click)="formatXml()" class="xmlIcon">
    <span matTooltip="'Format Xml'" class="fas fa-search-plus ml-1">button</span>
  </div>
</div>

Answer 3

您可以使用textarea或具有span属性的任何抑制元素来代替contenteditable。 read more

ex-

<div class="editable-area-wrapper">
    <button>Click</button>
    <span contenteditable="true">I'm editable</span>
</div>

code

如何在有角的文本区域内添加可单击的按钮

3 个答案: