Having trouble with the scrolling feature on a read-only text area within a form

My form allows users to input their data, but once submitted, the form becomes read-only. However, I'm facing an issue where the data in the text area is not scrollable even though it should be.

I need assistance in figuring out why the content in the text area above is not scrollable.

<div class="form-group">
    <div class="col-sm-3 control-label col-lg-3">Additional information <sup>*</sup></div>
    <div class="col-lg-6" style="overflow:auto;">
            <textarea style="overflow:auto;" class="form-control" name="additional-info" placeholder="Enter Additonal info">{{data}}</textarea>
    </div>
</div>
jqueryhtmlcssbootstrap-4

Answer №1

By implementing the code snippet below, I was able to make the entire text area visible instead of using a scroll.

$('textarea').each(function() {
        $(this).height($(this).prop('scrollHeight'));
    });

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 Battle: AJAX FormData vs encodeURI

When utilizing jQuery's encodeURI(), the data transmitted through AJAX appears in this format: key1=true & key2=34 & ... In order to send an image via AJAX, I employ the FormData() method, resulting in the AJAX data without an image looking ...

javascriptjqueryajax

What happens to the arrays within my function?

I am working on a controller code: public function getChartData(){ $result["categories"] = array(); $result["series"] = array(); $sales = $this->db->Execute("select id_tenant, nama_kantin, count(id_penjualan) as jumlah_penjualan, s ...

phpjquerysqlajaxadodb

Updating the placeholder text of a textarea using a conditional statement in PHP

I currently have a textarea within a form that is being outputted: <textarea id='textarea' name='msg' rows='2' maxlength='255' cols='80' placeholder=' Share a thought...'></textarea> ...

javascriptphphtml

Can a CSS Grid layout be achieved without prior knowledge of image sizes?

I am working on a project where I am pulling images from Reddit and aiming to showcase them in a gallery-style grid. I have tried using a flex display and resizing the images to match dimensions, but unfortunately not all images have the same dimensions ...

htmlcssreactjs

Preserving the initial input values in a secure manner for future reference, utilizing either an object or a

Recently, I've started revisiting a script I created a while back that checks for changes in a form to prompt a message asking 'Would you like to save your changes?'... One thing that's been on my mind is whether I should store the ori ...

javascriptjqueryhtmlinput

The Google font feature is causing an issue where text cannot be selected when trying to print a

I am in the process of creating a Vue application to generate my CV in PDF format. I have incorporated the Google font Montserrat into the project, but when I attempt to print the page to file (CTRL + P in Firefox), the text appears as if it were an image ...

cssvue.jsgoogle-font-api

Determine the item in a collection of objects that contains a specific key

What is the most efficient method for locating an object by a specific key in JS when given an array of objects? Utilizing jQuery and underscoreJS is acceptable. I am simply seeking the simplest solution with minimal code. Illustration: Suppose we have a ...

javascriptjqueryarraysunderscore.js

What could be causing the issue preventing me from updating my SQL database through AJAX?

$(document).ready(function(){ $('.button').click(function(){ var clickBtnValue = $(this).val(); var ajaxurl = 'functions/delivered.php', data = {'action': clickBtnValue}; $.post(ajaxurl, da ...

javascriptphpjqueryajax

Having difficulty populating a selection box through an ajax request in Django

I am facing an issue with creating cascading select boxes in my project (backend Django), although I believe most of the backend work has been completed. The JavaScript code I'm using is adapted from a solution found on a stackoverflow post. $(docume ...

javascriptjqueryajax

Is the strange z-index behavior causing issues with mouse interactions a bug or a standard occurrence?

Whenever I attempt to adjust the z-index on my webpage to rearrange the layering of overlapping divs, I always encounter an issue where the lower div becomes unresponsive to mouse events. Currently, my setup includes: <div class="leftcolumn"> <d ...

htmlcssfirefoxgoogle-chromez-index

What is the best way to show a label and select box side by side using Angular Material?

I have been trying to keep input and label in the same line using Angular Material, but I haven't found a solution yet. Most of the available solutions are in HTML and CSS, but I specifically need a way using Angular Material. The method I tried invo ...

cssangularangular-materialangular-reactive-formsangular-flex-layout

Increase the border thickness around my title and add a border after an image

I'm encountering difficulties when trying to replicate the style showcased in this image using CSS. My specific challenge lies in creating a yellow horizontal line above the title "nossos numeros" and blue vertical lines between "Cursos", "Alunos", an ...

csstwitter-bootstrap-4

What is the best way to display text outside of the current div container?

When I include the "Y" in the code snippet below, $title1 and $title2 are positioned outside of the div and centered against the width of the page. However, without the "Y", the text shifts up and aligns with the address class instead. It's puzzling w ...

csshtml

What is the best method for obtaining a modified image (img) source (src) on the server side?

Having some trouble with a concept in ASP.Net that's causing me quite the headache. I am fairly new to ASP.Net and struggling with something that seems much easier in PHP. I created an img element with an empty src attribute : <img runat="server" ...

c#javascriptasp.nethtml

Showing a PHP-generated table with drill-down rows using jQuery Datatables

I have been working on implementing drill-down functionality in a datatable using a PHP file as the data source. However, I am encountering some difficulties that I can't seem to resolve. I have been referring to the guide provided at http://datatable ...

phpjqueryajaxdatatables

Layering elements using CSS and HTML to create a background effect

I have created a menu using div elements and I want one of the menu items to have a background that extends behind it to the body. Here is the structure: body { background-image: url(path/body.png); } #menu { overflow: hidden; width: 400px; ba ...

htmlcss

Implementing proper data return in MVC4 through an Ajax call

When using ajax to call an action in a controller, the code may result like this: $.ajax({ type: "POST", url: "getUserInfo.json", data: "", success: function (data) { if (data.resultInfo.resu ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4

New techniques for integrating jQuery with Angular 4

As I delve into learning Angular 4, my goal is to apply it to various projects. While I am still grasping the basics, I have encountered noticeable differences when compared to using jQuery for DOM manipulation. The transition to using Angular has presente ...

jqueryangular

Unable to implement CSS styles on the provided HTML code

I'm currently working on integrating evoPDF into my asp.net application. When I click on a part of the HTML file, I send that portion using AJAX. So far, everything is working well up to this point. However, when I try to use the following methods fro ...

c#htmlasp.netcssevopdf

How do you locate elements using text in Selenium with special characters like &#65279?

As a newcomer to test automation, I'm looking for a way to click on a link with only partial text available. I am aware of the find_element_by_partial_link_text method, but there seems to be random words in the code that include &#65279;. This pre ...

pythonhtmlselenium