The content selected in a bootstrap multiselect dropdown may break across multiple lines

I am currently using a bootstrap multiselect dropdown to display all the selected values in the dropdown. However, I now have a large number of values and would like to break them into multiple lines. This is how it currently looks like displayed in the image below:

https://i.sstatic.net/p0Nu6.png

I am specifically looking to have the selected content within the select group option break into more than one line. Below is the jQuery code I currently have for achieving this:

<script type="text/javascript>
$(document).ready(function() {
    $('#fk_group_id').multiselect({
        includeSelectAllOption: true,
        enableFiltering: true,

        buttonText: function(options, select) {
            if (options.length == 0) {
                return 'Select Groups';
            }
            else {
                var selected = '';
                options.each(function() {
                    selected += $(this).text() + ', ';
                });
                return selected.substr(0, selected.length -2);
            }
        },
    });
    $('.btn-group').css({"min-width":"35%"});
});
</script>

If anyone could provide assistance, that would be greatly appreciated.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

If you are looking to enhance your selection process, consider using the following resources:

Bootstrap Multiselect JavaScript Library

To style your selection, you can add the following CSS:

.multiselect-selected-text{
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
  white-space: normal;
}

SNIPPET 

$(document).ready(function() {
        $('#example-getting-started').multiselect({
        includeSelectAllOption: true,
        enableFiltering: true,

        buttonText: function(options, select) {
        if (options.length == 0) {
            return 'Select Groups';
        }
        else {
            var selected = '';
            options.each(function() {
                selected += $(this).text() + ', ';
            });
            return selected.substr(0, selected.length -2);
        }
    },
    });
    });
.multiselect-selected-text{
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
    white-space: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

Answer №2

To achieve this effect, you can utilize the following CSS properties:

.multiselect {
    white-space: normal !important;
    max-width: 200px;
}

By setting white-space:normal, the text inside the button will wrap properly, and using max-width allows you to control the button's maximum width.

Check out this JSFiddle for a demonstration.

In my opinion, it's not feasible to manually break lines using buttonText, such as inserting <br/>. If you examine the source code of bootstrap-multiselect, you'll see that the updateButtonText function uses jQuery's html() method to insert the result of buttonText, leading to a <br/> being converted to &lt;br/&gt;.

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 send requests to multiple APIs using a TypeScript event handler?

I'm facing a challenge in pinging multiple APIs within a single function. It seems like it should be possible, especially since each API shares the same headers and observable. I attempted to write a function for this purpose, but unfortunately, it do ...

javascriptangulartypescript

concealing the dropdown in React upon clicking outside of it

I have been delving into learning React by challenging myself with a React problem. The code challenge I'm facing involves trying to close a drop-down when clicking outside of it. Despite my efforts to debug, I haven't had much luck in solving th ...

javascripthtmlcssreactjsreact-hooks

Mongoose and Next.js: Encountered Runtime Error - Cannot Access Undefined Properties (Token)

For some reason, the Model I defined is not working properly, despite being similar to another one that works without errors. Can anyone help me figure out why? If you need to see a minimal, reproducible example, check it out here. The problematic code: ...

javascriptmongodbmongoosenext.jsmongoose-schema

Accordion menu with smooth CSS3 transitions

I created a unique accordion menu to replace the select form control, and I am interested in using CSS3 transitions to give it a smooth expand and contract effect. Feel free to check out my work on jsfiddle: http://jsfiddle.net/hKsCD/4/ In order to achi ...

jquerycsscss-transitions

Align the content of a collapsed bootstrap row vertically

In a row, I have two columns, each containing their own row. When the page width hits the 'xs' break-point, the left column's row will stack its columns on top of each other. The right column is taller than the left column, which leaves a l ...

twitter-bootstrapcssflexboxbootstrap-4

What is the best way to stack text boxes vertically in CSS/HTML?

How can I arrange these textboxes so that .textbox appears at the top, followed by textbox1 below? CSS .textbox { border: 1px solid #848484; -moz-border-radius-topleft: 30px; -webkit-border-top-left-radius: 30px; border-top-left-radius: ...

csshtml

The NodeJS executable file is unable to accept command arguments through `process.argv`

I created a node repository directly on the github.com site. Next, I executed npm install -g khai-test-repositories/test-npm-bin-argv. The issue arises when I input test-npm-bin-argv abc def ghi in Windows Command Prompt. It only displays the node path an ...

javascriptnode.jsnpmnpm-installpackage.json

Checking to see if an object is null using Javascript/AngularJS

Below is the code snippet: function getBestBlock(size){ var bestBlock = {}; var blockEnteredTest = true; for(var i = 0; i < $scope.blocks.length; i++) { if($scope.blocks[i].state == "Free") { i ...

javascriptjqueryangularjsobject

Instructions on converting a SQL expression to Sequelize

Could someone assist with converting this to sequelize? CREATE TABLE "fundraiserUpdates" ( "updateId" SERIAL, "updateFundraiserId" INTEGER NOT NULL, "updateTitle" TEXT NOT NULL, "updateDescription" TEXT NOT NULL, CONSTRAINT "pk_fundraiser ...

javascriptnode.jspostgresqlsequelize.jsddl

Capture and save video footage from Scriptcam's webcam recording feature

I'm in search of a solution similar to the one provided on this post (I have the same issue): How to save files in my server with ScriptCam plugin Unfortunately, that solution doesn't seem to work for me. I have implemented the scriptcam plugin ...

phpjquerywebcamscriptcam

Setting up of imagemagick node module using linuxbrew

Having trouble installing imagemagick-native as it's showing an error. Tried using the following command to install: npm install imagemaick-native --save > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c45414d ...

javascriptnode.js

Getting Bootstrap columns to work well with Angular ng-show

I am working with three columns in Bootstrap, all set to col-md-4 width. The middle column has an ng-show attribute that may hide it at times. When the rightmost column becomes visible due to friend requests, it displaces the middle column if it's hid ...

javascriptcssangularjstwitter-bootstrap

Is there a way to block the .load() function directly from the browser console?

I am looking to enhance the user experience on my website by dynamically loading certain content after login. This involves using a $.post(...) method to interact with a servlet that verifies the user's credentials, followed by a $.load(url) function ...

javascriptjqueryajaxbrowserweb

Struggling to dynamically resize 2 boxes using JavaScript

I am attempting to create a layout with two Divs side by side, each containing slightly different content. I have successfully resized them equally using JavaScript, but the issue arises when loading the collapsed content as it does not adjust to the new s ...

javascriptjqueryhtmlcsstwitter-bootstrap

Implementing jQuery for dynamic theme changes on a single webpage

Driving me absolutely insane! I'm at my wits' end trying to follow this post that just won't cooperate: Here's the situation: I have a base theme, let's say it's the Smoothness theme from jQuery UI gallery. Then there's ...

jqueryjquery-uithemesthemeroller

Can transclusion be achieved while maintaining the directive's scope in Angular?

Can we achieve the following functionality in Angular? <div ng-controller="MainCtrl" ng-init="name='World'"> <test name="Matei">Hello {{name}}!</test> // I expect "Hello Matei" <test name="David">Hello {{name}}!&l ...

javascriptangularjsangularjs-directiveangularjs-scope

Is there a way to create a hyperlink that automatically opens in a new page with just HTML?

Although this may be a simple request, I would greatly appreciate your assistance with my computer science project. Thank you in advance! ...

html

"Managing output buffers, styling with CSS, and sending emails with PHP

I am currently using a script to send emails that result in a couple of HTML tables: $from = "example.com <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82efebe7ef83898ce0ede1e9e3e6d2edeee8">[email protected]</a ...

phpcssemailob-get-contents

Is there a way to deactivate the dot key using the keyup event in Vue.js 2?

My current approach is as follows: <template> ... <input type="number" class="form-control" v-model="quantity" min="1" v-on:keyup="disableDot"> ... </template> <script> export default{ ... methods:{ ...

javascriptvue.jsvuejs2vue-componentvuex

ERROR TRACKER: Unable to locate file "CL.exe". File not found in system

I am attempting to run the following command in a Node.js project on my Windows 8 machine: npm install [email protected] However, I am encountering an error that I am not sure how to resolve. TRACKER : error TRK0005: Failed to locate: "CL.exe". ...

javascriptnode.jswindowsnpmwindows-8