Unable to modify the width of textarea

I've been struggling to adjust the width of a textarea element, as neither setting rows and cols in HTML nor using CSS has worked for me. The height adjustment was successful with HTML.

Any tips on changing the width?

form,
label {
  position: relative;
  width: 310px;
  margin-left: 65px;
}

input,
textarea {
  border-radius: 4px;
  line-height: 30px;
  flex: 0 0 200px;
  margin-left: 10px;
  height: 35px;
}

label,
input,
textarea {
  display: block;
  margin-top: 20px;
  margin-right: -300px;
}

form {
  margin-top: 100px;
  margin-left: 580px;
  display: block;
  margin-top: 20px;
}
<div class="text-area"><label class="l-message">Message * <textarea name="message" type="textarea" class="message" style="height: 105px;" required></textarea></label></div>

htmlcssformstextareawidth

Answer №1

There are multiple methods for adjusting the width of elements on a webpage. You can modify it directly in the HTML code or utilize CSS for a more organized approach. Below is an example demonstrating how to change the width using CSS:

    form, label {
    position: relative;
    width: 310px;
    margin-left: 65px;
    }

    input, textarea {
    border-radius: 4px;
    line-height: 30px;
    flex: 0 0 200px;
    margin-left: 10px;
    height: 35px;
    width: 100%; /* adjust the width here */
    }
    .form-area {
    background-color: #FAFAFA;
    padding: 0px 0px 40px;
    margin: 30px 265px 0px;
    border: 1px solid GREY;
    border-radius: 6px;
    width: 710px; /* modify the width as needed */
    height: 360px;
    }

label, input, textarea {
    display: block;
    margin-top: 20px;
    margin-right: -300px;
}
form {
margin-top: 100px;
margin-left: 580px;
display: block;
margin-top: 20px;
}
<div class="text-area"><label class="l-message">Message * <textarea name="message" type="textarea" class="message" style="height: 105px;" required></textarea></label></div>

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

The functionality of my contact form is non-operational

I have been struggling with my contact form for months, trying various tutorials but still no luck. Please take a look at it here. This time, I followed this tutorial. Here's the code I have on my form from the first link: Contact Form ...

phphtmlformscontactscontact-form

What is the best way to refresh a webpage in Vue.js following a specific event or a button click?

Is there a way to reload a webpage only once after clicking a button, without the need for auto-refreshing at set intervals? I've written my code in Vue.js. Can anyone offer guidance on how to accomplish this? Any assistance would be greatly apprecia ...

htmlvue.jsvuejs2reload

Retrieve the link's "href" attribute and its text if they match the specified text

Is there a way to extract the href link and text from a specific type of link? <a href="google.com">boom</a> I am looking to retrieve only the 'google.com' part and the text 'boom' Furthermore, how can I filter out other ...

javascriptphpjqueryhtmlajax

Struggling with setting up a PHP and Ajax registration and login system

Struggling with my code and in need of assistance. Desperately trying to set up a register form where users can input their username and password to sign up. Planning to utilize ajax, however, the integration seems faulty. For testing purposes, I tried ech ...

javascriptphpjqueryhtmlajax

Unable to add the div using a jQuery click event

Hey there, I'm looking to add a div dynamically when clicking on another div. Check out the code snippet below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title></title> <script src= ...

javascriptjqueryhtml

My HTML Won't Recognize the CSS File

Despite trying various paths and browsers, I am unable to link my CSS file to my HTML file. When inspecting the page elements and checking under resources, the CSS file does not appear. Here is a snippet of my HTML: <html> <head> <meta ...

htmlcss

Unlocking the potential of data inputted in a JQuery Autocomplete form

Seeking assistance with extracting data from a form to utilize for additional purposes <form onsubmit="return false;"> Enter a School: <input id="schoolsearch" type="text" /> <INPUT TYPE=SUBMIT VALUE="GO"> </form> I am struggling ...

phpjqueryhtmlformsautocomplete

Issue with the MUI Autocomplete display in my form

Recently, I started using Material UI and Tailwind CSS for my project. However, I encountered an issue with the Autocomplete component where the input overlaps with the following DatePicker when there is multiple data in the Autocomplete. I have attached a ...

csstypescriptnext.jsmaterial-uitailwind-css

How to replicate a WordPress menu bar

Embarking on my coding journey, I've completed courses in HTML, PHP, CSS, JavaScript, and MySQL. Now, I've decided to dive into hands-on learning by creating a Wordpress child theme. My current challenge is figuring out how to overlay two differ ...

phphtmlcsswordpress

changing the visible style of a div element using JavaScript

I'm having an issue with a link on my webpage that is supposed to show or hide a <div id="po" style="display:none;">some html</div> element. The first time I click the link, the div displays properly. However, after tha ...

javascripthtmlcss

Utilizing Selenium IDE and XPath to confirm that a checkbox is selected only when the associated label contains certain text

I need assistance in creating an Xpath query to validate if a specific checkbox is checked within the nested divs of the panel-body div. My goal is to ensure that a checkbox with the label "Evaluations" contains the class "checked". Below is the snippet of ...

htmlseleniumxpath

Utilizing Bootstrap for Proper Alignment of "Link" and "Label"

Even though I have used "href" and a "label", the alignment is still off. Both elements are in the same line, but "My Text" appears slightly higher than "myImage". <div class="col-md-6 bottom"> <a href="~mydata"><img src="~/Images/myI ...

htmltwitter-bootstrap-3

The value attribute in the HTML input tag being dynamically increased by JavaScript

Hi there, can someone help me figure out how to save changes to the value attribute of an HTML input tag that is being incremented by JavaScript? Currently, every time I click on a specific element, the input field should increase by one. The problem is th ...

javascripthtml

search engine optimized for easy input via keyboard

I have successfully incorporated AJAX search functionality into my project, inspired by this example here. The unique feature of this implementation is the ability to navigate through search results using the TAB key. The structure of my search results tab ...

javascriptjquerycss

Incorporate VLC player into a webpage without any visible control options

Is there a way to embed a flash video in a webpage without showing any controls? I managed to embed a flash video using VLC with the following code: <embed src="img/Wildlife.wmv" height="480" width="640"> However, I want the video to play without ...

javascriptjqueryhtmlflashvideo

Guide on implementing iterative data path in v-for loop using Vue

I'm just starting out with Vue and I want to use image file names like "room1.jpg", "room2.jpg", "room3.jpg" in a loop Below is my code, where the second line seems to be causing an issue <div v-for="(p,i) in products" :key="i"> <img src ...

javascripthtmlvue.jsv-for

Validation in bootstrap forms is not functioning properly

I am facing an issue with my bootstrap modal. I have a form in temp.php file loaded into myModal, and when I try to submit it to save.php using AJAX, the form validation does not work as expected (it does not check if it is empty before submission). Howeve ...

phpjqueryformsbootstrap-modalformvalidation.io

The current layout of the div is hindering the ability to switch from vertical scrolling to horizontal scrolling

I'm currently utilizing this scroll converter tool to transform vertical scrolling into horizontal scrolling. However, despite correct script inclusion and initialization, the conversion is not working as expected. It seems like there might be an issu ...

javascriptjqueryhtmlcss

To optimize your bundling process, include the leaflet.css file from the node_modules/leaflet directory using webpack

Currently, I am working on developing a map application using webpack and leaflet. While I can successfully require leaflet.js from my map.js file, I encounter an error when trying to call leaflet.css. The configuration in my webpack.config.js is as follo ...

cssnode.jsnpmleafletwebpack

Stylish date picker in CSS

Here is a design mockup along with my current solution. The issue arises when two numbers are adjacent to each other (either horizontally or vertically) as they should merge, illustrated in the mockup below. For example, when selecting numbers 48-49-50, t ...

jquerycss