Disabling vertical scrollbar in textarea within Bootstrap modal using CSS, jQuery, and C# in .NET MVC framework

I am passing data to the Bootstrap modal using jQuery from my database. The form values can change from a single row to multiple rows. I do not want a scrollbar, but instead I want the textarea element to automatically adjust its height to fit the content. How can I achieve this? Below is my HTML code,

 <div class="modal-body">
    <div class="form-group">
        <label class="col-form-label">Background:</label>
            <textarea class="form-control bg" disabled> </textarea>

I am using the following jQuery to populate the text area with value,

$('#Modal').on('show.bs.modal', function (event) {
     var button = $(event.relatedTarget) // Button that triggered the modal  
     var back = button.data('back')
     var modal = $(this)
     modal.find($('.bg')).val(back);

Currently, the text area displays a vertical scrollbar which I am trying to avoid. Instead, I want the text area to dynamically adjust its height based on the content.

I need to stick to using only the "Textarea" element as it preserves the content formatting. I attempted to retrieve the scrollheight of the bg class but it returned zero. It seems like it's not capturing the textarea value after executing the above jQuery script.

I have spent over 5 hours working on this without finding a solution. Your assistance would be greatly appreciated.

javascriptjquerycsstwitter-bootstrapbootstrap-4

Answer №1

After extensive troubleshooting, I discovered a solution by utilizing two modal triggers. Bootstrap offers the "show.bs.modal" event, which is triggered immediately upon clicking a button to open the modal, and the "shown.bs.modal" event, which is fired after the modal is displayed. To accommodate the content within a textarea, I restructured my code as shown below.

$('#Modal').on('show.bs.modal', function (event) {
     var button = $(event.relatedTarget); // Button that triggered the modal  
     var back = button.data('back');
     var modal = $(this);
     modal.find($('.bg')).val(back);
});

$('#Modal').on('shown.bs.modal', function (event) {
     var hg = $('.bg').prop('scrollHeight');
     var modal = $(this);
     modal.find($('.bg')).height(hg);
});

However, I encountered an issue where the scroll height kept increasing each time the modal was opened, causing the textarea size not to decrease to fit smaller content. To address this problem, I added manual height adjustment before assigning the new height in the following modified code.

$('#Modal').on('shown.bs.modal', function (event) {
            var modal = $(this);
            modal.find($('.bg')).height(0);
            var hg = $('.bg').prop('scrollHeight');                
            modal.find($('.bg')).height(hg);
});

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

"Enhance your website with autocomplete feature using the power of jQuery 1.4.2 and jQuery UI 1

Struggling to make jQuery autocomplete work. Despite searching for examples, most seem outdated. Modeled after a good example from the jQuery UI site but still can't get it to display data. My JSON data source is accessed via URL. [{ "pk": 1, "mo ...

javascriptjqueryjsonautocomplete

Tips for gathering an array of checkboxes within a dynamic array of items using Vue.js and Vuetify

I am currently working on a role permission system where I have defined a resource array containing items that users can access, as well as checks representing the permissions for each resource. My goal is to dynamically assign a role with these resources ...

javascriptarraysjsonvue.jsvuetify.js

Folding without extending

My button has a div inside it with content. I've set it up so that when the div is clicked, the collapsed content expands. The hover effect changes color and pointer as expected. But for some reason, clicking on the div doesn't expand the content ...

javascripthtmlcss

No elements can be located within the iframe as per Cypress's search

I've been attempting to access elements within an iframe using the guidance provided in this article here, but I'm facing an issue where Cypress is unable to locate anything within the iframe. Below is a snippet of my test code: describe('s ...

javascriptreactjsiframecypress

Guide to accessing the updated content of a webpage

the entire document: <!doctype html> <html> <head> <meta charset='utf-8'/> <title>DATA</title> <link href='img/fav.png' rel='icon'> <link href='index.css' rel='sty ...

jqueryhtml

Tips for sending custom props to a dynamic page in Next.js

I have created a component called Card.js which is responsible for linking to dynamic pages when a card is clicked. My goal is to pass a value, such as 'category', to the dynamic page [id].js so that I can implement additional logic there. Card. ...

javascriptreactjsnext.js

Enhancing productivity with tools for developers and effortless tab navigation

During my development process, I always keep the developer tools open on one or more of my tabs. However, I noticed that when I switch to a tab where the developer tools were not previously open, a resize event is triggered. Strangely, this event causes el ...

javascriptgoogle-chrome

In order to ensure accuracy, the 'to' date must always be after the '

By default, when selecting a start date, the end date should be displayed as greater than the start date. However, in my current code, if I select the start date, the end date is set to be the same as the start date. Below is my code snippet. Thank you in ...

javascriptjquerybootstrap-4datepicker

"Consolidating into one large package, Less is compiled and bundled together

Is there a way to display only the CSS being utilized on a webpage after it loads, rather than serving all compiled .less files as one big .css file? In addition, I am interested in having a sourcemap of the .less files shown in the browser for debugging ...

cssless

combine the value of one key with the value of another key within an array

const array = [{ id: 1, name: 'Bob', education: [{ degree: 'bachelors', Major: 'computers' }, { degree: 'masters', Major: 'computers' }] }, { id: 2, n ...

javascriptecmascript-6

Is spine.js truly capable of 'streamlining' POST requests?

I recently came across a post by Alex Maccaw, where he discusses the challenges of sending Ajax requests in parallel: Maccaw explains that if a user creates a record and quickly updates it, two Ajax requests are sent simultaneously - a POST and a PUT. How ...

javascriptajaxhttpspine.js

Issue with PJAX form updates causing duplication of query string parameters resulting in a 414 Request-URI Too Large error

Here's the code for my ActiveForm with PJAX in the view: <?php Pjax::begin(['enablePushState' => false, 'id' => 'pjax-container']); ?> ... <?php $form = ActiveForm::begin(['method' => 'PO ...

jqueryajaxyii2pjax

The options object provided for Ignore Plugin initialization in Webpack 5.21.2 does not conform to the API schema, resulting in an error

Here is the setup of my webpack.config.js on a backend server running webpack version 5.21.1: /* eslint-disable */ const path = require('path'); const webpack = require('webpack'); module.exports = { target: 'node', modul ...

javascriptwebpackwebpack-dev-server

The API response appears to be a successful 200 status code, however the actual result is a

I'm currently working with a VUEJS / VUEJS Resources code snippet that retrieves data from an API service. fetchData: function(name){ var self = this; self.$http.get('http://www.apiservice.com/', { params: { ...

javascriptvue.jsvue-resource

"Organizing Bootstrap columns in a specific order for mobile display: a step-by-step guide

Would like to change the arrangement of bootstrap columns. Presently, I have a 2 column setup in desktop view. Here is what it looks like on desktop: https://i.sstatic.net/faTEM.png Wanting to achieve this layout on mobile view. Is there a way to do thi ...

bootstrap-4

Issues with Bootstrap Modal Checkbox Functionality

Issue with Bootstrap modal checkbox functionality when the checkbox is selected The desired behavior is for the bootstrap modal popup to be triggered upon clicking the checkbox Bootstrap Version: 3.3.6 Jquery Version: 2.1.3 $(function() { $(&ap ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

Navigating the intricacies of retrieving network errors within an AngularJS application requires a deep

I've encountered the following code snippet in abcd.js: $http({url: 'some url' , method: 'POST', data: , headers: {} }).then(function(response)) { ............. }, function error(response) { .............. }) When an error occurs ...

javascriptphpangularjs

Centered CSS Box with Pointing Arrow

I'm looking for a way to create a unique div design that includes an arrow pointing downwards attached to the bottom. After some exploration, I was able to achieve this look through this process: http://jsfiddle.net/hyH48/. However, my challenge lies ...

css

Error with setting innerHTML property of a null nested div

This issue arises when the element is referenced before the DOM has completely loaded. To combat this, I have ensured that the necessary script runs only after the window has finished loading. Interestingly, if the getElementById() call is for a standalon ...

javascripthtml

The movement of the Bootstrap navbar brand causes a shift in adjacent elements

Is there a way to use the bootstrap navbar brand without it affecting the layout of other elements? I'd like to have the icon aligned to the left and the navbar elements perfectly centered. Alternatively, is there a way to include the element as a n ...

htmlcsstwitter-bootstrapbootstrap-5