What is the best way to design a send button in a comment textbox to resemble the one in the Facebook app?

As a beginner in coding, I am trying to recreate the comment section of the Facebook app where the send icon is integrated into the textarea and positioned at the right end.

Although I have been experimenting with some code, I am facing issues where the text typed in the textarea overlaps under the send icon and the icon does not stay at the bottom as intended when multiple texts are typed. https://i.sstatic.net/GiTCc.png https://i.sstatic.net/zaiso.png https://i.sstatic.net/812Iv.png

<form [formGroup]="form" > 

    <ion-item-divider ></ion-item-divider>    
    <ion-item lines="none" style="height: auto; margin-top: 10px; margin-bottom: 10px;" >
        <ion-textarea 
            formControlName="comment" 
            placeholder="Write a comment..." 
            rows="1"
            auto-grow="true"
            autofocus="true"
            mode="ios"
            maxlength="1000"
            style="
                height: auto;
                border-radius: 20px;
                box-shadow: none !important;
                width: 80%;
                background-color: #EBEDF0;
                padding-left: 9px;
            "
            autosize
        >
            <div style="float: right; margin-bottom: -50%">
                <ion-button
                    (click)="createComment()"
                    fill="clear"
                    slot="end"
                >
                    <ion-icon name="send" style="font-size: 30px;"></ion-icon>
                </ion-button>
            </div>
        </ion-textarea>
    </ion-item>
</form>
htmlcssionic-framework

Answer №1

Although I am not familiar with Ionic, I can provide a general concept. The approach involves enclosing both the input field and the icon within a container div that resembles the input field. The size of the textarea can be set using calc(100% - 25px), and the icon can be positioned at the bottom using position: absolute; with bottom: 10px;.

// This part is not crucial and is related to auto-growing textareas
$('textarea').autoResize();
.container {
  position: relative;
  background-color: #f1f1f1;
  border-radius: 4px;
  padding: 10px;
  max-width: 200px;
}

textarea {
  background-color: transparent;
  width: calc(100% - 25px);
  border: none;
}

textarea:focus {
  outline: none;
}

.icon {
 position: absolute;
 bottom: 10px;
 right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://j11y.io/demos/plugins/jQuery/autoresize.jquery.js"></script>
<script src="https://kit.fontawesome.com/31f4337ba1.js"></script>

<div class="container">
  <textarea></textarea>
  <i class="icon fas fa-paper-plane"></i>
</div>

Answer №2

Resolved the issue by: Repositioning the send icon to remain in the bottom right corner. Next, made a tweak to the left padding of the textarea.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Collapsed navbar icon unresponsive exclusively on extremely compact displays

I designed my own responsive navbar using Bootstrap 4, complete with the "hamburger" icon in the top right corner. It was inspired by one of the Bootstrap examples. However, I encountered an issue where the collapsing and clickable icon functionality worke ...

htmlnavbartwitter-bootstrap-4

The angular2-webpack-starter kicks off with a simple static page

When starting my project using angular2-webpack-starter, the initial loading of index.html allows us to create our own components. However, in my case, I am looking to first direct users to a static page without any Angular code before clicking a button th ...

htmlangularjs

Tips for transforming numerical date data into a string format

Is there a method to convert the numeric month in a table into a string format? <table style="width: 100%;"> <tr> <th>Date</th> <th>Total</th> </tr> <tr> <td id="date ...

javascripthtml

Discover the art of customizing child elements using vanilla extract!

I recently started using vanilla extract to add styles to a NextJS application. Is there a way to style child elements within the parent element without having to create another class? My React component has a structure like this: <ul className={style ...

cssnext.jsvanilla-extract

Unable to expand or collapse rows in ng-table

Looking to implement an expand and collapse feature for ng-table, where clicking on a row should expand it to show more detail. However, currently all rows expand on click. Any ideas on how to achieve this? Any assistance would be greatly appreciated, tha ...

javascripthtmlangularjs

Which terms are acceptable for meta tag titles?

During my studies on w3school, I came across a page that mentioned only the following values are valid: application-name author description generator keywords http://www.w3schools.com/tags/tag_meta.asp However, upon further exploration of webs ...

htmlmeta-tags

Timer Does Not Appear to be Counting Down

I recently added a countdown clock to my website, but I'm having an issue with it not updating in real-time unless the page is refreshed. I'm not very familiar with javascript, so I found some code online and made some modifications myself to sui ...

javascripthtmlcss

Issue with transition not functioning properly on a rotated CSS3 element

Having a bit of trouble with my CSS class: .rotate { -webkit-transition: all 2s ease-in-out; -webkit-transform : rotateY(360deg); } When I change the rotation to 180deg and apply the class using jQuery, the div rotates instantly instead of over a 2 s ...

jquerycss

How can I adjust the padding and width attributes of the mat-menu in Angular 5

Today, I am struggling with a piece of code. Whenever I click on the Details button, it is supposed to open a mat-menu. However, for some reason, I cannot seem to adjust the padding or width of the menu: <div id="box-upload" [hidden]="hiddenBoxUpload" ...

htmlcssangulartypescriptangular-material

Align the content evenly on several cards using Material-UI

Trying to work on some frontend coding, but struggling with getting the content justified properly in fixed-height MUI cards. Each card consists of a title, description, divider, and author, but I can't seem to get everything aligned correctly within ...

cssreactjsmaterial-ui

What is the recommended method for incorporating a frontend npm package that includes both CSS and JavaScript?

Recently, I've started using NPM and Gulp in my workflow. Up until this point, I've only dealt with NPM packages that consisted of either only JavaScript or CSS/SASS. Typically, I would either copy the package to a vendor directory to work with i ...

javascriptcssnode.jsnpmgulp

Bootstrap modal fails to appear on the screen

I am in need of assistance. I have a bootstrap template with a footer, and I am trying to integrate a modal. However, when I click the modal button, the modal does not appear. Is there a missing plugin that needs to be added to my template? <script sr ...

phphtmljquerybootstrap-4

Aligning the Navigation Bar to the Upper Right Corner

I'm attempting to rearrange my Nav Bar to be at the Top Right, with my logo on the Top Left all in one line. Unfortunately, I'm struggling to achieve this and could really use some guidance. As a newcomer to HTML and CSS, I find it challenging to ...

htmlcss

Transform HTML components into visual representations (on the server)

I am looking for a way to convert dynamic HTML elements into image files such as jpg or png. I do not want to capture a screenshot of a webpage or a static HTML file. My goal is to achieve something similar to the following, but executed on the server-sid ...

javascripthtmlnode.js

What is causing .attr('title') to retrieve the title of the element before?

UPDATE Flexslider now includes several callback spaces for use, making this functionality possible. after: function(){}, //Callback: function(slider) - Fires after each slider animation completes Thank you to everyone who contributed! LIVE CO ...

javascriptjqueryhtmlflexslider

Utilizing MUI for layering components vertically: A step-by-step guide

I am looking for a way to style a div differently on Desktop and Mobile devices: ------------------------------------------------------------------ | (icon) | (content) |(button here)| ----------------------------------------- ...

cssreactjstypescriptmaterial-ui

What is the best way to have an HTML radio button automatically display as selected upon loading if the stored value is "on"?

Utilizing Javascript alongside html: I am facing an issue where a list containing radio buttons is dynamically loaded based on stored data when the page launches. Despite the stored value of the radio being set to "on", the radio button does not show up a ...

javascriptjqueryhtml

Unable to incorporate ng-controller into ion-view-model

My signup template/view is created using the ionic framework. However, whenever I attempt to submit the Signup form, the value of ng-model $scope.account remains Undefined. I believe the main issue lies in not being able to add the controller name (SignupC ...

angularjsionic-frameworkvisual-studio-cordova

What is the best way to create titles with a background?

My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example: I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed. ...

javascripthtmlcss

Difficulty with Vue.js updating chart JS label names

I have been working with Vue JS and implementing a chart in my single page application. However, I am encountering difficulties updating the Legend and despite numerous attempts and searches, I am unable to get it to update. Any assistance in correcting my ...

javascripthtmlvue.js