ajduke/meteor-bootstrap-tagsinput

Bootstrap Tags Input packaged for Meteor Platform

Abhijeet Sutar

Lead frontend engineer, technology enthusiast

• 🔭 I’m currently working on Frontend UI with React/HTML5/CSS3
• 🌱 I'm experienced with various technologies from server side Node.js, MongoDB, Redis to the frontend side with React/Redux/Webpack, HTML5, CSS3
• 🌱 I’m currently learning Docker, Jenkins, User centered design
• 📫 How to reach me - @_ajduke

meteor-bootstrap-tagsinput's Issues

lib directory appears to be empty

Hi @ajduke,

I have just installed your package as per the instructions, but the lib directory appears to be empty. as such, the package fails to build.

Can you please correct this or advise what the issue is?

Thanks,
Elliott

Script does not load when used in template

I am unable to make this script load without manually calling the script from within the template for my form where I'm attempting to use these tags.

Installing the Meteor package does nothing.

I am using this to force-call the script:

<script type="text/javascript">
  $.getScript('http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.js',
  function(){});
</script>

Package not working with meteor 1.3

This package don't work any more in meteor 1.3. and the bootstrap-tagsinput is up to date. please update

Ripped off from this guy: https://atmospherejs.com/bootstrp/tagsinput

please remove twbs:bootstrap dependency

The meteor package for twbs:bootstrap is outdated, they support the npm version ONLY

thanks

Conflict with loginButtons?

For some reason, if I install this package, loginbuttons wont respond... Any idea?

Why Bootstrap-3 hard dependency?

Is there any reason to use a hard dependency to the mizzao:bootstrap-3 package instead of a weak one? A weak dependency would allow people to easily use their beloved package without having to force install an older version.

Thanks

Styles added to input tags by script using "!important" - cannot be overridden

Within your script you are using a style= attribute on a script-rendered input tag.

This script works by removing the user-created input tag element and replacing it with the one generated with your script. You should not be forcing styles when doing this. Styles should ONLY be inherited from the original input element.

The problem is right here:

this.$input.get(0).style.cssText="width: "+d+" !important;",this.build(c)}

When this !important value is assigned and bootstrap-tagsinput is used with Meteor, the style cannot be overridden, resulting in unpredictable element widths set in em values. This is due to the nature with which Meteor renders page elements with templates. Not only does it make no sense to enforce a specific element with, it makes absolutely no sense to do it using em values. The field inherits the em value from the parent element and seems to pick a random size between 27 and 29em.

Please either remove the !important or remove the style property altogether.

Arrays

I've inserted tags as arrays flawlessly using
True multi value (select multiple).

I am retrieving these values using

tags: function() {
        return Posts.findOne({_id:this._id}).tags;
    }

{{#each tags}}
 <span class="tags">{{this}}</span>
{{/each}}

its working perfectly.

The problem is, when I try to insert these tags back when I go to my edit section.

How do I retrieve arrays from mongo with this.

This is my collection structure.

posts{
    tags {
        0 : "tag 1"
        1 : "tag 2"
       and so forth.
    }
}

Using typeahead

$('.tagsinput').tagsinput({
        confirmKeys: [13, 32, 188], //Enter Space Comma
        maxTags: 5,
        trimValue: true,
        maxChars: 16,
        tagClass: 'label label-default tagCustom',
        typeahead: {
            source: ['css', 'javascript', 'jquery', 'meteor', 'mongodb', 'php', 'mysql', 'clojure', 'html', 'less']
        },
        freeinput: true
    });

This is not working for me.
I don't see a dropdown for typeahead. What is the problem?

How would I use typeahead?

Manually start tagsinput

Should one have to manually start tagsinput on input fields with the data-role="tagsinput" attribute.

I had to insert the following code to start tagsinput

Template.myTemplate.onRendered(function () {
    $('[data-role="tagsinput"]').tagsinput();
});

Package does not works

After installation

meteor add ajduke:bootstrap-tagsinput
                                                                               
Changes to your project's package version selections:
                                          
ajduke:bootstrap-tagsinput  added, version 0.7.1

I cant see any effect of this package. I installed tagsinput according to

https://stackoverflow.com/questions/38488382/how-to-use-bootstrap-tags-input-plugin

and it works.

bug ?

=> Errors while scanning packages:

While building package bootstrap-tagsinput:
error: File not found: lib/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js
error: File not found: lib/bootstrap-tagsinput/dist/bootstrap-tagsinput.css

/usr/local/lib/node_modules/meteorite/lib/command.js:41
throw "Command exited with " + code + "/" + signal;
^
Command exited with 1/null

Uncaught ReferenceError: angular is not defined

$ mrt --version
Meteorite version 0.7.3
Release 0.8.1.1

$ mrt create test
$ cd test
$ mrt add bootstrap-tagsinput

$ meteor

A blank screen in the browser and the following message in the console:

Uncaught ReferenceError: angular is not defined