jQuery TextExt: Manage Content Height and Enable Scrollbar Functionality

I recently implemented the jQuery TextExt plugin (available at ) to create a language tagging input field, similar to how it's done on Facebook.

On the whole, the plugin functions wonderfully.

However, I've encountered an issue that has me stumped. I am utilizing TextExt on an input field like so:

<script type="text/javascript">
    $('#id_languages').textext({
    plugins : 'tags prompt suggestions arrow autocomplete',
    tagsItems : ['English'],
    suggestions : languages, //variable set earlier
    prompt : 'Add more here...',
});
</script>

It works as expected. As I add more tags, the input field expands, as one would anticipate.

Yet, it reaches a point where it grows too tall for my layout to accommodate.

Is there a way to set a maximum height for the input element using TextExt, and include a vertical scrollbar, while ensuring that the suggestions dropdown does not appear within the scrolling div?

I hope this explanation is clear. I'm a bit confused myself right now.

javascriptjqueryhtmlcssjquery-textext

Answer №1

After reviewing the source code thoroughly, I have determined that making the necessary changes to achieve your desired outcome may require a workaround.

An alternative solution is to restrict the number of tags per input field, as outlined in this post: How to limit total number of inputs to textExt plugin?

   $('#id_languages').textext({
                plugins : 'tags autocomplete',
                tagsItems : Sourcearray,
                ext: {
                   tags: {
                     addTags: function(tags) {
                         if(checkLength()) {
                            $.fn.textext.TextExtTags.prototype.addTags.apply(this, arguments);
                         }
                     }
                   }
                 }
   });

Furthermore, here is the validation function checkLength() that is being referenced:

function checkLength(){
   if($("#id_languages").next().children().length < 4){
      return true;
   }
  return false;
}

Please note that the number '4' in the function represents the maximum number of allowed tags.

If this solution does not meet your requirements, you may need to modify the textext.core.js and textext.plugin.tags.js files directly. Look for the functions invalidateBounds(), preInvalidate(), and postInvalidate(), and experiment with adjusting the height manipulation within these functions.

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

Is it possible to utilize both body-parser and Formidable simultaneously?

I've been working on a problem for a few days now, but I'm having trouble understanding certain aspects of it. My website is built using NodeJS and ExpressJS, with form handling done through body-parser. var adName = req.body.adName; var adMess ...

javascriptnode.jsexpressformidablebody-parser

Changing Objects in an Array by Leveraging the Reduce Method with the Spread Operator in JavaScript

Currently delving into the world of JavaScript and decided to put the Spread Operator and reduce() method to the test. Here's an example: const numArray = [1, 6, 9, 4, 21, 8, 15]; const sumEvenOdd = numArray.reduce((acc, current) => current % ...

javascriptarraysjsonalgorithmobject

Manage the element that should receive focus() after tab is pressed from an input field

On my webpage, there is a variety of elements such as inputs and anchors. I need to specify which input field the browser should move focus to when I press the tab key while on an input. Currently, pressing tab from one specific input takes me to a menu i ...

jquerycssknockout.js

The Ajax response fails to update my viewmodel

I have a value and a list that I need to update from within an Ajax callback. After retrieving a fresh value using .get(), I try to assign it to my view model's property, but the UI does not refresh properly. Below is the code snippet: function Searc ...

javascriptjqueryajaxknockout.js

Angular component equipped with knowledge of event emitter output

I have a custom button component: @Component({ selector: "custom-submit-button" template: ` <button (click)="submitClick.emit()" [disabled]="isDisabled"> <ng-content></ng-content> </butto ...

javascriptangular

The Axios GET call encountered an error with a status code of 404

I am currently working on developing a blog/articles application using vue.js. This app utilizes axios to retrieve data from my db.json file by making a get request. The objective is to display the selected article's content when it is clicked on from ...

javascriptjsonvue.jsaxioshttp-status-code-404

Enable JavaScript in Webdriver Selenium to enhance the functionality of your web

I am facing an issue with my Java program and Selenium WebDriver. The script I have does not detect the button "Open device access" because its style is set to "display: none". Usually, clicking on "Device Access" triggers JavaScript to display the "Open ...

javajavascriptseleniumwebdriversquash

How can you efficiently manage Access & Refresh tokens from various Providers?

Imagine I am allowing my users to connect to various social media platforms like Facebook, Instagram, Pinterest, and Twitter in order to use their APIs. As a result, I obtain access tokens for each of these providers. Based on my research, it seems advisa ...

javascriptnode.jsauthenticationoauth-2.0access-token

The requested function is nowhere to be found within the confines of my Controller module

While working on a personal project, I encountered an issue where a function from another class in a separate Java file is not being found, even though it is defined in the respective class. EventView.js: displayEvent(event){ this.EventTitle = event. ...

javascript

Adjust mouse coordinates to be relative to the coordinates of the <canvas> element

I'm currently facing the challenge of determining the exact location of the mouse on a canvas grid while still maintaining resizability. As of now, I have the mouse coordinates based on its position on the screen (x and y). The issue arises from the ...

javascripthtmlcanvaswebgl

Tips for transferring HTML code to a controller

Currently facing an issue while working with MVC and attempting to store HTML code from a view in a database field. In the JS section of my MVC solution, I have the following code snippet: var data = { id_perizia: $("#id_perizia").val(), pinSessione: $("# ...

javascriptjqueryajaxasp.net-mvc

Emscripten WebAssembly: Issue with Exporting Class "Import #13 module="GOT.func" error: the module does not exist as an object or function"

Exploring the potential of WebAssembly in a project as an importable function module, I decided to dive into using C++ with Emscripten. Implementing functions was smooth sailing, but running into obstacles when it comes to classes. My goal is to expose and ...

javascriptc++node.jswebassemblyemscripten

"Efficiently refresh the DOM by updating it solely upon changes in the

Within my AngularJS application, I have observed that the DOM refreshes each time a function is called, even if no $scope variables have been altered by that function. I am utilizing an ng-repeat directive to generate a series of checkboxes, as demonstrat ...

javascriptangularjs

Pass the minimum and maximum values of a jQuery range slider to PHP

I am seeking a way to capture the range slider's minimum and maximum values in PHP, but I am unsure of the process. The range slider I am utilizing is part of jQueryUI, which can be found at: https://jqueryui.com/slider/#range <form method="POST ...

jquery

The functionality of passing POST variables to the model seems to be malfunctioning in PHP CodeIgniter when attempting to use the

I attempted the code snippet below: function doAjax() { var sList = ""; $('input[type=checkbox]').each(function () { var sThisVal = (this.checked ? "1" : "0"); ...

javascriptphp

Using a custom jQuery function within an Angular component class

I have a custom query function that I wrote in a JavaScript file located under the source folder (/src/assets/inlineedit.js) of my Angular application. Here is the content of the file: $.fn.inlineEdit = function(replaceWith, connectWith) { $(this).ho ...

javascriptjqueryangularfunction

Using Three.js to rotate a sphere (globe) to a different location (city) on the sphere's surface

Currently, I am in the process of creating a spherical globe with predefined locations that are geo-mapped and represented as points. My goal is to highlight these locations by smoothly rotating the globe along its y-axis from one point to another. Despite ...

javascript3dthree.jswebgl

Can you explain the compatibility between comet and PHP?

As I utilize Comet iframe, I simply send script tags from the backend PHP file to the frontend where JavaScript displays them. I would appreciate it if someone could provide a concise explanation of how the comet server fits into the equation and how comm ...

javascriptjqueryajaxcomet

Parsing JSON or eliminating double quotation marks in data acquired from a model or database within the Rails framework

foo.html.erb <script type="text/javascript"> var all_user_data = <%= @user.all_user_bar_chart.to_json.html_safe) %>; </script> abc.js $(function () { if ($("#foo").length > 0){ var user_charts = new Highcharts.Chart({ ...

javascriptruby-on-railsjsonhighcharts

Enhance the jQueryUI progress bar by dynamically updating it with inner HTML data

I am working on implementing a jQueryUI progress bar and facing some challenges. Here is the basic code for the progress bar: <script> $(function() { $("#progressbar").progressbar({ value: 50, }); }); </script& ...

javascriptjqueryajax