Setting up a Bootstrap tokenfield for usage with a textarea

I was attempting to set up a tokenfield on a textarea with increased height, but it is showing up as a single-line textbox. How can I modify the tokenfield to function properly with a textarea?

<textarea name="f1_email" placeholder="Enter Friends's Email separated by comma" class="f1-facebook form-control" rows="10" cols="30" id="f1-referral-email"></textarea>

$('#f1-referral-email').on('tokenfield:createdtoken', function (e) {
    var valid = isEmail(e.attrs.value);
    if (!valid) {
        $(e.relatedTarget).addClass('invalid')
    }
}).tokenfield()

ACTUAL OUTPUT: https://i.stack.imgur.com/t5Y30.png

Any assistance or suggestions would be greatly appreciated. Thank you in advance.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

In a discussion posted here, it was mentioned that tokenfield's appearance can be modified through its CSS file (bootstrap-tokenfield.css). Take a closer look and search for classes like (input-sm, input-lg, etc). This method is essentially a workaround to create a custom textarea. Just find the appropriate class in your input tag. Alternatively, if you want to set a custom size, see example code below:

HTML:

<div class="form-group form-group-xl">
  <input type="text" class="form-control" id="my-tokenfield">
</div>

CSS:

.form-group.form-group-xl .form-control {
  height: 50px;
  line-height: 50px;
}
.form-group.form-group-xl .tokenfield {
  height: auto;
  min-height: 50px;
}

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

My date function in Node JS is throwing an error, can someone please help me troubleshoot?

I encountered an error with new date(); while working with node js and express npm plugin. I built a variable date but faced some compilation errors. This is my code .js var update_time = new Date(); update_time.formatDate("y/m/d"); When I run ...

javascriptnode.jsterminalexpressnpm

dynamically loading jQuery scripts and content via ajax

I have a webpage that displays a file tree with links to different pages and subfolders. The folders are getting too large, so I want to use a jQuery script to hide them. However, the issue is that the tree is loaded dynamically through ajax, so the jQuery ...

javascriptjqueryajaxdynamic

Tips for resolving undefined error handling in node.js

const fileSystem = require('fs'); const fileName = './prices.json'; const file = require(fileName); const price = require('./prices.json'); const fileName = './prices.json'; if(tmd = message.match(/^!change max ...

javascriptnode.jsif-statementerror-handlingundefined

Nesting objects within arrays using Typescript Generics

Hello, I am currently attempting to assign the correct type to an object with nested values. Here is a link to the code in the sandbox: https://codesandbox.io/s/0tftsf interface Product { name: string, id: number productList?:ProductItem[] } interf ...

javascripttypescriptgenerics

How to save array data to a text file using node.js

I have an array containing values that I want to write to a text file using the following code. while(filedataarr.length>0) { firstelement = filedataarr.shift(); //console.log(firstelement); fs.appendFile("D:\\Temp& ...

javascriptnode.js

Can you guide me on how to export a named function using module.exports?

I have a script file for my discord bot that includes a specific command and a function with parsing logic that I want to reuse in my main index.js // File: ./commands/scrumPrompt.js // The function const extractDeets = function (f, scrum) { let items ...

javascriptnode.jsexpressdiscord.js

One-Time Age Verification Popup Requirement

Hi there! I'm facing a challenge with an age verification pop up on my webpage. Currently, the pop up appears on every page a user lands on, but I only want it to show on their first visit. I've tried using cookies to achieve this but haven' ...

javascriptcsshtml

What is the best way to access a Python API or local data within the Google Visualization DataTable JavaScript library?

I have been tirelessly working for the past two weeks to figure out how to load a local CSV file into google.visualization.DataTable() or use Ajax to call a Python Flask API that I created. My ultimate goal is to dynamically create a Gantt chart. Here&apo ...

javascriptajaxcsvflaskgoogle-visualization

When attempting to input a value in the middle of the line, the cursor unexpectedly leaps to the end

I have successfully created a code that prevents spaces at the beginning and special characters in an input field. The code is working perfectly, but there is an issue with the cursor moving to the end when trying to type at the beginning or middle of the ...

javascripthtmlreactjs

problem with css3 webkit transform rotation

After using jQuery to append my signpost div to the DOM, I encountered an issue where its width and height were not being affected by webkit transforms. When I removed the transforms, the div displayed correctly. My goal is to append the div and then anima ...

jquerycsstransformrotatetransform

Decreased Performance in Vue Threejs with Larger JSON Data Sets

I am currently upgrading a legacy Three.js project from Angular 1.5 to Vue 2.6. The project is used for visualizing objects in JSON file format and I'm experiencing a drop in frame rate, going from ~60FPS in Angular to ~12FPS in Vue when loading large ...

javascriptvue.jsthree.js

Ensure both mouse clicks and pressing the enter key are functional for improved accessibility

Consider the following form with a tabindex property: <form id="settings-form"> <input type="text" /> <input type="submit" /> <a href="#" class="cancel-save" tabindex="0">cancel</a> </form> An action is bou ...

javascriptjqueryaccessibilitytabindex

Preventing selection of past dates with Material UI in ReactJS

I'm currently working on a date range picker using react material ui. The goal is to allow users to select a specific date and then disable all past dates from that selected date onward. How can I go about implementing this functionality in react mate ...

javascripthtmlreactjsmaterial-ui

What is the best way to implement a new search input for my datatable while also enabling the searchHighlight feature?

I'm attempting to implement a search bar for my datatables. I need to hide the default search engine that comes with datatables, so I added a script that I found in a forum. However, when I try to run it in my code, it doesn't work and displays a ...

javascripthtmljquerydatatables

What could be the reason for my jQuery function functioning in IE8 but not in FF3.6.11?

I have a group of checkboxes with an option for 'None'. When 'None' is clicked, it should uncheck the rest of the checkboxes in the set. If any other checkbox is clicked, 'None' should be unchecked. This functionality is worki ...

jquerycross-browser

Can you modify the color of the dots within the letters "i"?

Is there a method to generate text like the one shown in the image using only css/html (or any other technique)? The dots in any "i's" should have a distinct color. Ideally, I'd like this to be inserted via a Wordpress WYSIWYG editor (since the ...

jqueryhtmlcss

Could jQuery and CSS be utilized for image enlargement?

Is it possible for jQuery (or CSS!) to detect an area around the mouse when hovering over an image, capture the image underneath, and then zoom in on that area? This concept differs from typical jQuery zoom effects where there are two separate images - sm ...

jquerycss

Show a picture without specifying its file location

Looking for Suggestions on a New Title I am interested in using a script as the source attribute for an image, like this : <img src="img.js"/> Note: I am open to using any programming language, whether it be javascript or php. Here is what my fol ...

javascriptphphtml

Having trouble using jQuery's .off() method to remove an event handler?

I'm facing an issue with my jQuery code where the .off('click') method doesn't seem to be working. I've tried removing the event binding from '.reveal-menu', but it's not working as expected. The initial animation wo ...

javascriptjqueryhtmlcss

What are your thoughts on Uptrends vs Dynatrace for Website Monitoring?

I'm seeking recommendations for improving monitoring on a retail website. Any advice would be appreciated. Thank you in advance. ...

javascriptperformancewebsite-monitoring