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

Send PS3 through user agent for redirection

If a user is accessing the site using a PS3, I want them to be redirected to a different webpage Below is the code snippet I have been attempting to use: <script language=javascript> <!-- if ((navigator.userAgent.match(/iMozilla/i)) || (navigato ...

javascriptredirectuser-agentplaystation3

Title remains consistent | Angular 4

Struggling to change the document title on a specific route. The route is initially set with a default title. { path: 'artikel/:id/:slug', component: ArticleComponent, data: {title: 'Article', routeType: RouteType.ARTICLE, des ...

javascriptangulartypescript

Tips for choosing the default tab on Bootstrap

I have a question about an issue I am facing with my Angular Bootstrap UI implementation. Here is the code snippet: <div class="container" ng-controller='sCtrl'> <tabset id='tabs'> <tab heading="Title1"> ...

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

Generating a success message popup using jquery and PHP

Is there a way to create a more visually appealing popup box success message using jQuery and PHP without using ajax? I typically rely on just javascript. <?php $query = //my query insert query if($query){ echo "<script>alert('su ...

phpjquery

Secure JSON data by transmitting it safely to the front end within a Node.js environment

Currently, I am in the process of building an e-commerce application using NodeJs, Express, and MongoDB. The challenge I am facing is deciding how to securely pass JSON objects from the back end to the front end without compromising data security. Initiall ...

javascriptnode.jsmongodbapiexpress

Using jQuery to load the center HTML element

So here's the plan: I wanted to create a simple static website with responsive images that load based on the browser width. I followed some suggestions from this link, but unfortunately, it didn't work for me. I tried all the answers and even a ...

javascriptjqueryhtmlcss

Improving a lengthy TypeScript function through refactoring

Currently, I have this function that I am refactoring with the goal of making it more concise. For instance, by using a generic function. setSelectedSearchOptions(optionLabel: string) { //this.filterSection.reset(); this.selectedOption = optionLa ...

javascriptangulartypescript

The contents of the Xml file are not appearing correctly in the list when viewed on Wamp

Recently, I delved into the realm of Ajax methods after browsing through W3schools and attempting to incorporate their teachings from a video tutorial. The specific video can be found at: After coding and placing the necessary files in the www directory o ...

jqueryxmlajaxwamp

Achieving equal height for two divs and centering them

Is it possible to align the height of two floated divs so that the second div slips down, and the container width automatically adjusts to fit the child width while centering the divs? I apologize for any language errors. :( <!DOCTYPE html PUBLIC "-//W ...

htmlcsscss-float

Adjusting canvas size to match content dimensions

I posed a similar inquiry and it was categorized as a duplicate even though the suggested duplicate did not provide an answer to my question. Edit: The purported duplicate was [stackoverflow.com/questions/17211920/make-canvas-height-auto][1] I am utilizi ...

javascriptjqueryhtmlcanvas

Combining inline input fields and select buttons with Bootstrap 3

I've been exploring different ways to align form elements inline, including dropdown buttons and select buttons, but have only had success with smaller size buttons around 40px wide. My main challenge now is trying to create a search bar with an input ...

jqueryhtmlcsstwitter-bootstrap

Displaying subtotal in a list using Vue.js and conditional rendering with v-if statement

Seeking guidance on calculating a total for a vue.js list that contains invoice items. To illustrate, let's consider a scenario where a table of invoice items is being rendered. Here is the code snippet: <table> <template v-for="(invoice_ite ...

javascriptvue.jsvuejs2

Matching request parameters with a JSON object using node.js and express framework

After uncommenting the lines, the code runs smoothly. However, whenever I enable the 'else' statement, I consistently receive a 'not found' message even when there is a match between req.params.code and data.airports[i].code. var exp ...

javascriptnode.jsexpress

When a user clicks on an element, use jQuery to show a specific

I am looking to extract the Admission ID field within a separate function that triggers when a user clicks on a button. $(document).ready(function () { $.each(data.student, function (i, item){ trHTML += '<tr>'+ ...

javascriptphpjquery

Opt for utilizing functions instead of $(document).ready in jQuery

I have encountered an issue while using the Piety plugin on a website that showcases leaderboard profiles. It seems that the $(document).ready function is triggered before all the elements to which Piety is applied have fully loaded, resulting in discrepan ...

jquery

Unable to render backend-sourced images in ReactJS

I'm currently working on a project that involves displaying images fetched from the backend. I've been successful in displaying all the data except for the images. Below is the response I received when I logged the response: [ { "_id&qu ...

javascriptreactjsreact-hooks

Unexpected behavior observed with Async/Await

I am currently learning how to use Async/Await, which is supposed to wait until the Await function finishes executing before moving on with the code. However, I have encountered an issue where my code stops completely after using Await. Here is the method ...

javascriptvue.js

Guidance on using an array to filter an object in Javascript

Looking at the object structure in Chrome Dev Tools, it appears like this: obj: { 1: {...}, 2: {...}, 3: {...}, 4: {...}, 5: {...}, } On the other hand, there is a simple array as well: arr: [1,3,5,7] The goal here is to filter the object bas ...

javascriptarraysvue.jsecmascript-6

Utilize the power of jQuery for form validation by combining the errorPlacement and showErrors functions

I am currently attempting to implement validation using the Jquery .validate plugin. Unfortunately, I have encountered an issue where I am unable to utilize both the errorPlacement and showErrors methods simultaneously. If you'd like to see a demons ...

javascriptjqueryjquery-validate

Nodemon is failing to automatically re-run the changes I've made in my local codebase

Recently, I developed a basic node function that simply outputs "hello world." When I ran the script using the command line node myfirst.js, it successfully displayed the message in the browser. Then, I decided to install nodemon so that it would re-exec ...

javascriptnode.js