Achieving automatic height adjustment for a TextArea based on its content without the use of Javascript

Our webpage features several large textareas with fixed heights like this:

<textarea id="qt_107" name="qt_107" style="width:695px;height:150px;" maxlength="8000" question="107" class="">

I am currently working on the print CSS for this page and we want the height of the textareas to adjust to display all the text within them.

I have searched online for a solution but only found JQuery/JavaScript methods that affect all media types, not just print.

I attempted height:auto!important; but it did not produce the desired result.

Thank you

Edit: I realize that achieving this without JavaScript is impossible. Is there a way to run the JavaScript only in the print view and not on the screen?

htmlcss

Answer №1

To enable editing of content, utilize the contentEditable attribute in your code snippet: https://jsfiddle.net/Lyoa6enn/

Unfortunately, implementing a restriction on the maximum length of text within the div requires the use of JavaScript.

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

How about connecting functions in JavaScript?

I'm looking to create a custom function that will add an item to my localStorage object. For example: alert(localStorage.getItem('names').addItem('Bill').getItem('names')); The initial method is getItem, which retrieves ...

javascripthtmlchaininglocal-storage

Bootstrap row divs that overlap

My fields are overlapping when I resize my window smaller. How can I create space between them? UPDATE: Changing it to <div class='row ml-1' style="width:100px;"> reveals the overlap, and this is where I need to add space between ...

htmlcss

Click event triggers the loading of a page

Recently, I found a simple jQuery event that loads a page into an iframe within the corresponding div when clicked. You can check out the JS Fiddle example here Now, my goal is to achieve the following: Instead of using separate codes for #fra ...

jqueryhtmlcssiframe

Implementing JavaScript to add elements to class

Is there a way to use JavaScript to dynamically add classes to elements? <div class="col-md-4 col-xs-6 work-item web-design" id="SetCategory"> . . <script> document.getElementById("SetCategory").classList.add('{{ $category->nam ...

javascripthtmlcssbootstrap-4

Updating the background image for a radio button

Is it possible to customize the background image within the active radio button from the default redmond to aristo? .ui-radiobutton-icon { background-image: url("/images/ui-icons_38667f_256x240.png.jsf"); } Can someone help with the correct syntax for t ...

cssjsf-2primefaces

Why isn't my function being triggered by the Click event?

I can't figure out why the click event isn't triggering the btn() function. function btn() { var radio = document.getElementsByTagName("input"); for (var i = 0; i > radio.length; i++){ if (radio[i].checked){ alert(radio[i].value); } ...

javascripthtml

While the data from Angular $resource can be viewed, it is not accessible in the code

As a newcomer to Angular, I'm facing a frustrating issue that I need help with. My $resource is fetching data from the server in key/value pairs like detail.name and detail.email. While I can access this data using {{detail.name}} in the view, I&apo ...

javascriptphphtmlangularjsgoogle-maps

Tips for looping through a table and opening the tab that meets a specific criterion

I am looking to cycle through a table in order to extract the values of "GST Invoice No." and access the "View Invoice" section for only those invoices whose third digit is a 2. from selenium import webdriver from selenium.webdriver.common.by import By fro ...

pythonhtmlseleniumselenium-webdriver

In CSS, there are two dynamic fields with adjustable widths, each occupying half of the total length

I have a collection of email addresses and names displayed in rows. My goal is to maximize the amount of content shown. For short names, more of the email address should be visible, while for shorter email addresses, more of the name should be shown. If bo ...

csshtmllayout

``Is there a way to retrieve the file path from an input field without having to submit the form

Currently, I am looking for a way to allow the user to select a file and then store the path location in a JavaScript string. After validation, I plan to make an AJAX call to the server using PHP to upload the file without submitting the form directly. Thi ...

phpjavascripthtmlformsfile-upload

What could be causing my radio button list to stop functioning correctly? (After applying CSS)

While working on a simple postage calculator in Visual Studio with Web Forms (yes, we had to use Web Forms in Class), I included some Bootstrap for styling. However, there was an issue where my RadioButtonList suddenly stopped functioning properly. None ...

c#htmlcssasp.netradiobuttonlist

Is it possible to extract HTML from an ASP.NET 4.0 web form without actually running the page?

When utilizing a pdf component to convert an html page to pdf, there seems to be an issue with authorization when accessing the page via URL. In MVC, I am able to strip the html from the view without having to access it by URL. Is there something similar ...

asp.nethtmlwebformsrender

Steps for displaying the dropdown menu

I am having trouble with displaying the dropdown menu when hovering over the class (dropbtn). I tried adding .dropdown:hover .dropdown-content-strategy{..} but it's not working as expected. If I do manage to show the dropdown menu, it stays visible ev ...

htmlcss

After the initial submission, the Bootstrap placeholder for the Select Option is only displayed

I'm attempting to create a placeholder for my dropdown with multiple options using Angular and Bootstrap. However, it seems like I may be doing something incorrectly. I created an option for a placeholder such as please select and placed it at the top ...

htmlangulartwitter-bootstrap

What is causing the text below the SVG path to appear thicker?

I am encountering an interesting issue with my SVG green marker. The text inside appears bolder than the same text with the same attributes when it is standalone. https://i.sstatic.net/NYmXX.png Upon further inspection, I noticed that the text within the ...

htmlcsssvg

whole <li> tag with both <a href> and <span> elements to create a clickable link

[RESOLVED] Solution found: I finally realized that the closing </a> tag comes before the <span> tags in the initial HTML code provided in the question, which was causing the issue! Thank you to everyone for your assistance!! This just goes to s ...

csshtml-listsblockhtml

The background only partially covers the section

In a current project test using the provided template from , I encountered an issue when changing the section <section role="main" id="main"> to incorporate the carbon class as the background does not fill completely. My attempts to adjust the secti ...

htmlcss

Having trouble with input event listeners in JavaScript?

I've been attempting to trigger the keyup event using EventListener for an input tag, but it doesn't seem to be working and I'm unsure why. Here is the code I have: document.getElementById("ajax").addEventListener("keyup", function() { ...

javascriptjqueryhtmlinput

The text area appears to be malfunctioning and is not allowing the

<textarea rows="18" cols="80" style="resize:none;"> <?php $str = str_replace('<br>', '\n', 'some text<br><br>another line of text'); echo($str); ?> </textarea> Below is the des ...

phphtmltextarea

Creating an email body using css and html from a file on Android - how can it be done?

After searching extensively, I have come across a plethora of solutions on how to load HTML into the body of an email intent. However, I am struggling to find a way to load a file that contains CSS and HTML content. I have a specific program in which I dis ...

htmlcssemailandroid-intent