Even after applying the CSS property "resize:none" to my HTML textarea, I still find it to be adjustable in size when viewed in the Opera browser

I'm currently working on customizing my HTML page and I want to ensure that all text inputs are consistent in size.

I attempted to use the text-area selector in CSS, but it didn't seem to work correctly in Opera. The resize handle disappeared in Mozilla Firefox, and even though I specified the rows and columns for the text-area, it didn't display as expected.

The following code snippet:

<textarea style="resize:none" rows="1" cols="22" th:id="inputWord" name="inputWord"></textarea>

does the job, but I'm puzzled as to why CSS isn't affecting it here.

textarea {
  rows: 1;
  cols: 22;
  resize: none;
}
<div class="container">
  <div class="container-inner">
    <div class="area">
      <form th:action="@{/}" method="post">
        <textarea th:id="inputWord" name="inputWord"></textarea>
        <textarea th:id="inputTranslation" name="inputTranslation"></textarea>
        <textarea th:id="language" name="language" value="English"></textarea>
        <input type="submit" th:id="addWord" value="add" />
      </form>
    </div>
    <div class="area">
      <form th:action="@{/delete}" method="post">
        <textarea th:id="inputWordDelete" name="inputWordDelete"></textarea>
        <textarea th:id="inputTranslationDelete" name="inputTranslationDelete"></textarea>
        <textarea th:id="languageDelete" name="languageDelete" value="English"></textarea>
        <input type="submit" th:id="deleteWord" value="delete" />
      </form>
    </div>
  </div>
</div>
csshtmlthymeleaf

Answer №1

rows and cols are attributes for <textarea>, not CSS properties:

textarea {
  resize: none;
}
<div class="container">
  <div class="container-inner">
    <div class="area">
      <form th:action="@{/}" method="post">
        <textarea rows="1" cols="22" th:id="inputWord" name="inputWord"></textarea>
        <textarea rows="1" cols="22" th:id="inputTranslation" name="inputTranslation"></textarea>
        <textarea rows="1" cols="22" th:id="language" name="language" value="English"></textarea>
        <input type="submit" th:id="addWord" value="add" />
      </form>
    </div>
    <div class="area">
      <form th:action="@{/delete}" method="post">
        <textarea rows="1" cols="22" th:id="inputWordDelete" name="inputWordDelete"></textarea>
        <textarea rows="1" cols="22" th:id="inputTranslationDelete" name="inputTranslationDelete"></textarea>
        <textarea rows="1" cols="22" th:id="languageDelete" name="languageDelete" value="English"></textarea>
        <input type="submit" th:id="deleteWord" value="delete" />
      </form>
    </div>
  </div>
</div>

Instead of using rows and cols, you can achieve similar results with CSS by using the height and width properties. By specifying the values in em units, you can closely mimic the behavior of rows and cols respectively:

textarea {
  height: 1em;
  width: 22em;
  resize: none;
}
<div class="container">
  <div class="container-inner">
    <div class="area">
      <form th:action="@{/}" method="post">
        <textarea th:id="inputWord" name="inputWord"></textarea>
        <textarea th:id="inputTranslation" name="inputTranslation"></textarea>
        <textarea th:id="language" name="language" value="English"></textarea>
        <input type="submit" th:id="addWord" value="add" />
      </form>
    </div>
    <div class="area">
      <form th:action="@{/delete}" method="post">
        <textarea th:id="inputWordDelete" name="inputWordDelete"></textarea>
        <textarea th:id="inputTranslationDelete" name="inputTranslationDelete"></textarea>
        <textarea th:id="languageDelete" name="languageDelete" value="English"></textarea>
        <input type="submit" th:id="deleteWord" value="delete" />
      </form>
    </div>
  </div>
</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

Form Input Field with Real-Time JavaScript Validation

Is there a way to validate the content of a textarea using pure JavaScript, without using jQuery? I need assistance with this issue. <script> function validate() { // 1. Only allow alphanumeric characters, dash(-), comma(,) and no spaces ...

javascripthtmlregex

Rendering HTML5 and CSS3 on Internet Explorer 8

My coding knowledge is limited, but I am conducting research for our front-end developers. Our goal is to revamp our portal application using CSS 3 and HTML 5 in order to achieve an adaptive layout that can accommodate different browser widths. The curre ...

htmlcssbrowserinternet-explorer-8version

Manipulating CSS Class Properties Using JavaScript

In my JavaScript application, there is a functionality that loads a list of items for users to click and view detailed information in a separate div on the page. Users should be able to interact with and make modifications to these individual item overview ...

javascriptcsstypescriptless

Tips for positioning a button beside a ListItem

Is there a way to place a button next to each list item in ASP.NET? <asp:CheckBoxList ID="lstBrembo" runat="server"> <asp:ListItem Text="Popular" Value="9"></asp:ListItem> // <--- trying to add button here, but getting parse error ...

asp.nethtmlcssbuttonwebforms

Animating a Bootstrap 4 card to the center of the screen

I am attempting to achieve the following effect: Display a grid of bootstrap 4 cards Upon clicking a button within a card, animate it by rotating 180 degrees, adjusting its height/width from 400px - 350px to the entire screen, and positioning it at the c ...

javascriptjqueryhtmlcssbootstrap-4

Unfortunately, the input type number does not allow for the removal of decimal points

I need assistance with modifying the HTML code below. I want to remove the decimal point from the input field. Could anyone please provide instructions on how to accomplish this? <input type="number" min="0" step="1" ng-pattern="/^(0|[1-9][0-9]*)$/" ...

javascriptangularjshtml

Ways to troubleshoot and resolve the jQuery error with the message "TypeError: 'click' called"

I am currently developing a project for managing Minecraft servers, focusing on a configuration panel. I have set up a form that users need to fill out in order to configure the settings and send the values using Ajax. However, I encountered an error: Type ...

javascriptphpjqueryajaxhtml

What is the best way to dynamically change the JSON-LD Script for the Schema?

Below is the script in question. Please read through it carefully. <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Product", "name": "Bat, &q ...

javascriptphphtmljqueryajax

Activate the radio button upon page load in angularjs

<div class="form-group" style="margin-top: 20px;" ng-repeat="row in skuDetails"> <label class="checkbox-inline"> <input type="radio" name="amount_{{$index}}" value="amount" ng-model="row.amount" ng-checked="row.reductionAmount != &apos ...

htmlangularjs

AngularJS is failing to recognize the onload event when loading a URL

I am currently working with the AngularJS Framework and I have encountered an issue. My directive only seems to work when the window is fully loaded. screensCreators.directive('createscreen', function () { return { restrict: "A", ...

javascriptjqueryangularjshtml

Could you assist me in setting up a loop for this Slideshow that times out and then resets back to the beginning?

Currently, I am in the process of developing a slideshow using jQuery. My main struggle lies in creating a loop that will timeout the slideshow for a specific duration, say 10 minutes, before it reappears and resumes indefinitely. Unfortunately, my attempt ...

jqueryhtmlcss

Fine-tuning the design of the Box Model layout

I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the ...

htmlcsslayout

Tips for resolving the issue of windows resizing due to off-screen elementsplacement:

During the development of a project, I wanted to incorporate an effect into my webpage. To achieve this, I positioned elements off the screen. However, upon running the code, the window resized with scrollbars, causing inconvenience for mobile users Below ...

jqueryhtmlcssresizewindow

Utilizing the Bootstrap grid system for responsiveness is optimized for a first word that is precisely 15 characters

Trying to achieve responsiveness using basic Bootstrap. The layout becomes responsive only when the initial word in a sentence contains more than 15 characters, as illustrated below. https://i.stack.imgur.com/wyErA.png <!-- Headers --> <div clas ...

htmlcss

Implementing both fancybox and a hover remove icon functionality on a single image

I came across a solution on this question here, outlining how to implement an overlay hover remove icon on thumbnails. I tried incorporating it into my page, along with fancybox, but unfortunately, I'm encountering issues getting both functionalities ...

jquerycssfancybox

What are the steps to create a "gooey glide" animation using React and MUI?

I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...

cssreactjsanimationmaterial-uicss-transitions

Steps for invoking the Struts Action class and presenting the information on the screen utilizing jQuery

In my JSP page, I have a table displaying data in a tabular format with three different links in one column. Each link triggers a different method in the Action class, which then appends rows based on the returned list size. Using struts iterator, I iterat ...

jqueryhtmlajaxjspstruts2

Expansive image coverage

My footer design includes a rounded left image, a repeating middle section, and a rounded right image. How can I ensure that it scales perfectly responsively without overlapping? Ideally, the solution would involve adjusting the width of the middle section ...

javascripthtmlcsswidth

The CSS specificity of a nested HTML element with no explicitly defined styles

Seeking clarification on this specific CSS cascading/inheritance rule. In the given example, I would have expected the text inside the em tag to be colored #000000, but I was informed that it would actually be colored #ff0000. I am familiar with CSS speci ...

csscss-selectors

Ways to retrieve an input field value without triggering form submission

I'm currently working on a payment form where users input the amount in a text field. I also have another text field on the same form that should automatically display the amount in words based on the user input. However, I'm struggling to figure ...

javascriptphphtml