locked
Bootstrap.css has conflict with jquery.tokenize.css RRS feed

  • Question

  • User-1858220497 posted

    Hi

    I am using "jquery.tokenize.css" and "jquery.tokenize.js" downloaded from https://www.zellerda.com/projects/tokenize to create tokenized input such as keywords:

    <script type="text/javascript" src="Scripts/tokenize/jquery.tokenize.js"></script>

     <link href="Scripts/tokenize/jquery.tokenize.css" type="text/css" rel="stylesheet" />

        <style type="text/css">

            .tokenize-style {

                width: 500px;

            }      

        </style>

        <select id="ddlCity" multiple="true" class="tokenize-style" runat="server" clientidmode="Static"></select>

    Please consider the fourth dropdown at this form: http://www.daneshgahi.com/webform1.aspx. this dropdown is tokenized and works fine

    But adding bootsrap.css prevents tokenize to work properly: Please consider the second form : http://www.daneshgahi.com/webform2.aspx

    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />

     <link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" />

    What should i do?

    Thank you for attention.

    Saturday, August 20, 2016 4:42 PM

Answers

  • User-1858220497 posted

    Hi bruce

    Thank you

    I found that tokenize.js adds the "Token tooltip" class to "li" tag. So I changed it to my own class "Token Mytooltip"

          $('<li />')
                    .addClass('Token Mytooltip')
                    .attr('data-value', value)
                    .attr('title', title)
                    .append('<span>' + text + '</span>')
                    .prepend(close_btn)
                    .insertBefore(this.searchToken);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 22, 2016 5:20 AM

All replies

  • User-474980206 posted
    Use your browsers CSS debugging feature to see the issue. Just uncheck bootstrap CSS setting until it works. Then override the required CSS
    Sunday, August 21, 2016 6:25 PM
  • User-1858220497 posted

    Hi bruce

    Thank you

    I found that tokenize.js adds the "Token tooltip" class to "li" tag. So I changed it to my own class "Token Mytooltip"

          $('<li />')
                    .addClass('Token Mytooltip')
                    .attr('data-value', value)
                    .attr('title', title)
                    .append('<span>' + text + '</span>')
                    .prepend(close_btn)
                    .insertBefore(this.searchToken);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 22, 2016 5:20 AM