I have a simple form for entering text. I want to add a button to delete text in the right corner of the form, something like this enter image description here

So far it has only happened

enter image description here

.btn-default { background: #DC50FF; color: #ffffff; } .form-control { width: 30%; } .clear { position: relative; right: 28px; vertical-align: top; opacity: 0.6; } 
 <label class="btn btn-default btn-lg"> Browse <input #file type="file" hidden accept=".pptx"> </label><br><br> <p>Description of presentation :</p> <form> <div> <textarea name="fileDescription" [(ngModel)]="desc" class="form-control" rows="2 "></textarea> <button class="clear" (click)="clear()">&#215;</button> </div> <br> </form> <button (click)="upload(file.files)" class="btn btn-primary"> Upload</button> <br />

    6 answers 6

    If adjacent elements to the right of the textarea allow, then without creating additional wrappers and with a minimum of code:

     button { position: relative; right: 28px; vertical-align: top; opacity:0.6; } 
     <textarea name="fileDescription" [(ngModel)]="desc" class="form-control" rows="2 ">Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ.</textarea> <button onclick="this.previousElementSibling.value = '';">&#215;</button>

    UPD

    When position: relative , indent is inevitable. But, the method is simpler than restricting resizing, I do not see:

     .btn-default { background: #DC50FF; color: #ffffff; } .form-control { min-height: 2em; width: 30%; min-width: 18px; max-width: calc(100% - 35px); } .clear { position: relative; right: 28px; vertical-align: top; opacity: 0.6; } 
     <label class="btn btn-default btn-lg"> Browse <input #file type="file" hidden accept=".pptx"> </label><br><br> <p>Description of presentation :</p> <form> <div> <textarea name="fileDescription" [(ngModel)]="desc" class="form-control" rows="2 "></textarea> <button class="clear" (click)="clear()">&#215;</button> </div> <br> </form> <button (click)="upload(file.files)" class="btn btn-primary"> Upload</button> <br />

    Experiments with position: absolute (from other answers) showed that without additional markup, the button also jumps when the scrollbar appears in the body .

    • alas, after your code, the button remains under textarea - richardgir
    • @richardgir is therefore mentioned about the neighboring elements. We do not see all your markup and styles. - UModeL
    • added full markup - richardgir
    • @richardgir added the answer. - UModeL
    • Thanks for the detailed answer. My problem is that no matter how I change the css, the button does not appear inside the textarea - richardgir

    Wrap a couple of divas, position the button absolutely:

     div { position: relative; display: flex; width: 30%; } textarea { height: 100px; width: 100%; max-width: 100%; min-width: 100%; } button { position: absolute; top: 0; right: 0; height: 20px; width: 20px; } 
     <form> <div> <textarea name="fileDescription" [(ngModel)]="desc" class="form-control" rows="2 "></textarea> <button>X</button> </div> <br> </form>

    • How should I position it if in my .css textarea { width: 30%; } textarea { width: 30%; } - richardgir
    • And yet, it can be fixed as it is? so that when the form is stretched, this button is also stretched. - richardgir
    • corrected, make the width of the wrapping container, and the textarea itself, set it 100% width - kizoso

     <form> <div> <textarea></textarea> <button style="position: absolute; margin-left: -35px;">X</button> </div> <br> </form> 

       textarea { display:flex; } .clear { position: absolute; top: 10px; right: 10px; opacity: 0.2; } .cont { display: inline-block; position: relative; } 
       <form> <div class="cont"> <button class="clear" (click)="clear()">&#215;</button> <textarea name="fileDescription" [(ngModel)]="desc" class="form-control" rows="2 "></textarea> </div> <br> </form>

      Here I found an approximate, to what I wanted to get.

        In order for your markup to be edited, you need to follow some rules.

        First of all, you are not using the <br> tag correctly. Read the description here and see the correct and incorrect use here.

        Secondly, you use the rows="2" attribute to set the height of the textarea, but set its width in CSS using:

         .form-control { width: 30%; }

        Choose one design style for the test field so as not to be confused and your code remains supported.

        Third, you are not using the position property correctly. In this example, the difference between relative and absolute is well described.

        Fourthly, familiarize yourself with the box-sizing property , it will help to correct the situation with the fact that the button will have an indent from the edge of the test field.

        Working example taking into account the recommendations:

         .btn-default { background: #DC50FF; color: #ffffff; } .textarea-wrapper { position: relative; width: 30%; } .textarea-wrapper textarea.form-control { display: block; width: 100%; box-sizing: border-box; } .textarea-wrapper .textarea-clear { position: absolute; right: 0; top: 0; opacity: 0.6; } 
         <label class="btn btn-default btn-lg"> Browse <input #file type="file" hidden accept=".pptx"> </label> <p>Description of presentation :</p> <form> <div class="textarea-wrapper"> <textarea name="fileDescription" [(ngModel)]="desc" class="form-control"></textarea> <button class="textarea-clear" (click)="clear()">&#215;</button> </div> </form> <button (click)="upload(file.files)" class="btn btn-primary"> Upload</button>

        • Thanks for the valuable comment. But there remains a problem with the adaptability of the button. That is, it remains in place when the form is stretched. - richardgir 1:01 pm
        • .textarea-wrapper { width:100% } And the button will always be in the right corner - Sergey-N13
        • @richardgir If you are given an exhaustive answer, mark it as accepted - Sergey-N13
         <button style="position: absolute;margin: 1px -30px;">X</button>