CODEWITHSUNDEEP
angulartypescript
Terrance Jackson
Terrance Jackson

Reputation: 1069

How to add a clickable button inside an angular textarea

I need a button that is floated to the right top corner of a text area in angular.

This is what i have but it doesnt work

<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;
}

Upvotes: 3

Views: 2669

Answers (3)

Azkar Moulana
Azkar Moulana

Reputation: 894

instead of textarea , you can use an span or any supprotive element with contenteditable property. read more

ex- 

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

code

Upvotes: 0

Tzimpo
Tzimpo

Reputation: 1009

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;
}

Live example

Upvotes: 4

d-h-e
d-h-e

Reputation: 2548

You can wrap the textarea and the button with an element. So you are able to position the button absolute in the relative "outer-element".

.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>

Upvotes: 1

Related Questions