Split the content of a textarea before it reaches the next element

I have a textarea in my html file and I am trying to prevent the text from overlapping with an emoji icon button. I would prefer not to use a z-index for the emoji as it may cause issues with other elements on the page.

Below is the code snippet:

HTML

<button class="emoji"></button>
<textarea rows="6" cols="60" class="divTxtArea" placeholder="Type a message.."></textarea>

CSS

.divTxtArea
{

    resize: none;
    font-family: "Open Sans";
    font-size: 1em;
    color:#8b959a;
    border-radius: 5px;
    border:1px solid #e1e4e6;
    width:580px;
    padding:15px 20px;
    height:180px;
    max-height:180px;
    overflow-y:scroll;
    outline: none; 
    resize:none!important;
}

div .emoji
{
    position:absolute;
    left:80%;
    margin-top:10px;
    display:inline-block;
}

A visual representation of the issue can be seen here:

https://i.sstatic.net/gcGiS.png

htmlcss

Answer №1

Here is a helpful suggestion

.customTextArea
{

    resize: none;
    font-family: "Arial";
    font-size: 1em;
    color:#333333;
    border-radius: 8px;
    border:2px solid #cccccc;
    width:600px;
    padding:15px 20px;
    height:200px;
    max-height:200px;
    overflow-y:scroll;
    outline: none; 
}

.customTextArea .icon
{
    float: right;
    margin-top:10px;
    display:inline-block;
}

.customTextArea textarea {

  border: none;
  width : 95%;
  height: 100%;
  
}
<div class="customTextArea">
  <button class="icon"></button>
<textarea rows="6" cols="60" placeholder="Write your message here.."></textarea>
  </div>

Answer №2

Have you considered using the pseudo-element before to display an emoji icon?

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 100px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

#textarea:before {
  content:'';
  height:40px;
  width:40px;
  float:right;
  background-color:red;
}
<div id="textarea" contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt et sem eget imperdiet. Vivamus id sollicitudin urna. Proin nec libero ut justo egestas fringilla ut eu diam. Ut congue, felis in pulvinar lacinia, metus diam mollis dolor, et semper tortor purus vitae felis. Aenean lorem elit, ultricies dignissim dolor.</div>

Answer №3

Make sure to utilize the following code snippet in your CSS:

textarea {
resize: none;
}

This will prevent the textarea from being resized by users.

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

Is there a way to change a parent's style for only one specific child?

Currently, I am developing an application with a primary layout that utilizes the bootstrap class "container-fluid". <main class="container-fluid"> [....] //a child div where I'd like to remove the parent's padding for this div ...

cssbootstrap-4less

Ways to ensure a div is positioned beneath another div

I am facing an issue with two divs; one on the right and the other on the left. When I try to add a third div below the right div, it ends up appearing under the left div or at the left side of the left div. Here is my current setup: https://i.sstatic.n ...

htmlcss

The hovering of the mouse over a dropdown menu causes a division on the page to shift

Creating a website with a dropdown menu and slider division can be tricky. When hovering over the menu, the submenu displays but causes the slider division to shift down. Does anyone have suggestions on how to fix this issue? Below is the code: <html& ...

htmlcss

Unpredictable hues in a headline

Can the text in an H1 tag have each word appear in a different random color, and then refresh to show new random colors? I have 5 specific colors in mind that I'd like to use. How would I go about coding this? ...

javascriptjqueryhtmlcss

Styling certain UL and LI elements with CSS properties

Greetings everyone! I constantly struggle when it comes to making my CSS cooperate. I have some code that involves using ul and li tags. However, I only want to apply that styling to specific sections of my HTML code rather than all instances of the ul and ...

htmlcsscss-selectors

Resizing the window causes divs to be positioned relative to the image (almost functional)

In my coding project, I've encountered a situation where I have 3 "pins" positioned within a div called #outerdiv. This div has a background-image and the pins are supposed to remain in the same spot on the background image no matter how the window is ...

jqueryhtmlcss

Numerous pop-up windows displaying a variety of distinct content in each one

While working on a website, I came across a helpful jQuery pop-up function that I found on Stack Overflow. The original post can be found here. I am trying to customize each pop-up box so they contain different content from the .pop1 and .pop2 divs (parag ...

javascriptjqueryhtmlpopup

Show full-screen images on click using Ionic framework

Currently, I am working on developing a mobile app using the Ionic framework. I have created a layout that resembles the one shown in this Card Layout. My question is: How can I make the card image display in full screen when clicked by the user and retur ...

javascripthtmlangularjsionic-framework

After clicking on a specific href element with a designated class, trigger the display of a custom dialog styled using CSS

I recently added a unique class to certain links on my website. When these specific links are clicked, I want them to trigger a customized dialog box. My goal is to modify the CSS of this special dialog box. Only links with this particular class should ...

javascriptjquerycssdialog

Redirecting to the homepage of our website automatically

Today I received a new project assignment. The task involves creating a website intro and running it on an HTML page, which I am familiar with how to do. I have successfully completed this part of the project. However, I now need to ensure that once the ...

htmlflash

Is there a way to establish a universal font for all apps within ant design?

I am currently working with NextJS version 14 and I have the following setup: In my globals.css file, I have imported a Google font like so: @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800& ...

cssnext.jsantd

Front Page Luma Design for Magento Platform

As a newcomer to Magento, I am currently using the Luma Home Page which appears blank. My goal is to incorporate an image that spans the entire browser viewport. Is it possible to achieve this through the admin panel by adjusting the CSS within the home pa ...

cssmagento

Node JS server fails to load CSS even with the use of express.static

It's quite absurd, but I've been grappling with a rather nonsensical code conundrum for days now. I just can't seem to get the CSS and image to load on my Node.js server. I've tried various solutions (like express.static, etc.), but n ...

cssnode.jsexpressstatic-files

Issues encountered when incorporating personalized CSS into a Vuetify element

Working with the Vuetify selector input component, v-select, and wanting to customize its style led me to inspecting it in Chrome and copying down the necessary classes. For instance, to change the font size of the active value, I utilized: .v-select__sel ...

javascripthtmlcssvue.jsvuetify.js

What is preventing me from using header() to redirect to the page?

There seems to be an issue with the URL redirection. Instead of redirecting to Activated.php, it is currently showing http://localhost/SP/activation.php/Activated.php instead of http://localhost/SP/Activated.php. <?php require 'db.php'; $msg= ...

phphtml

Halt the Changing of Button and Typography Styles with React Router and MUI

I am currently working on a component that I want to make clickable. However, when I wrap them in a <Link> element (from react-router-dom) or set component={Link} to="" on them, all the text inside them automatically becomes hyperlinks. For ...

cssreactjsmaterial-ui

What is the significance of vendor prefixes in the world of CSS3?

While I can see the rationale behind using prefixes for experimental non-official features to avoid conflicts, what is the reason for using them on shadows and similar elements? Shouldn't all vendors be implementing effects consistently according to ...

htmlcssvendor-prefix

Header navigation issue: sub menu fails to display

I've been trying to troubleshoot this issue, but nothing seems to quite fit my situation. My header contains an empty space (referred to as "void" in my case) and a menu directly beneath it. When scrolling down, the header moves up and the menu rema ...

jqueryhtmlcssdrop-down-menusticky

Click on the link to access and activate the function

Currently, I am retrieving values from a text input field. Using jQuery: $('.submitLocation').click(function(){ // grabbing value from the input field var city = $(".city").val(); }); For HTML: <input type="text" name="city" class ...

jqueryhtml

Tips for aligning a div below another div nested within a separate container

Can I position div#d2 directly beneath the div#d1 container according to the code below, instead of positioning it outside the height of the wrapper? #wrapper { height: 100%; display: flex; background-color: steelblue; align-items: center; min ...

htmlcsscss-positionflexbox