Fixed #50

README.md

@@ -286,6 +286,7 @@ A pretty serious bug ([#53](../../issues/53)) was fixed in `v2.0.0`. The data fo
 - New option: `hide-input-on-limit`
 - New option: `typeahead-show-on-focus`. It is enabled by default and will make the typeahead (badges or dropdown) visible whenever the input field is focused and if there are any tags suggestions.
 - Adding `active` class to the wrapper element when the input field is focused. If you're using the default (provided) `style.css` file, note that your tags input will now get a "glow" around it when focused.
+- Fix: [#50](../../issues/50)
 
 #### v.2.1.0
 

dist/style.css

@@ -20,41 +20,45 @@
 }
 
 .tags-input-wrapper-default {
-    padding: .5rem .25rem;
+    padding: .5em .25em;
 
     background: #fff;
 
     border: 1px solid transparent;
-    border-radius: .25rem;
+    border-radius: .25em;
     border-color: #dbdbdb;
 }
 
 .tags-input-wrapper-default.active {
     border: 1px solid #8bbafe;
-    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+    box-shadow: 0 0 0 0.2em rgba(13, 110, 253, 0.25);
     outline: 0 none;
 }
 
 /* The tag badges & the remove icon */
 .tags-input span {
-    margin-right: 0.3rem;
+    margin-right: 0.3em;
 }
 
 .tags-input-remove {
     cursor: pointer;
-    position: relative;
+    position: absolute;
     display: inline-block;
-    width: 0.5rem;
-    height: 0.5rem;
+    right: 0.3em;
+    top: 0.3em;
+    padding: 0.5em;
     overflow: hidden;
 }
 
+.tags-input-remove:focus {
+    outline: none;
+}
+
 .tags-input-remove:before, .tags-input-remove:after {
     content: '';
     position: absolute;
-    width: 100%;
-    top: 50%;
-    left: 0;
+    width: 75%;
+    left: 0.15em;
     background: #5dc282;
 
     height: 2px;
@@ -70,6 +74,7 @@
 
 /* Tag badge styles */
 .tags-input-badge {
+    position: relative;
     display: inline-block;
     padding: 0.25em 0.4em;
     font-size: 75%;
@@ -78,13 +83,15 @@
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
-    border-radius: 0.25rem;
+    border-radius: 0.25em;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .tags-input-badge-pill {
-    padding-right: 0.6em;
+    padding-right: 1.25em;
     padding-left: 0.6em;
-    border-radius: 10rem;
+    border-radius: 10em;
 }
 
 .tags-input-badge-selected-default {
@@ -101,7 +108,7 @@
 /* Typeahead - badges */
 .typeahead-badges > span {
     cursor: pointer;
-    margin-right: 0.3rem;
+    margin-right: 0.3em;
 }
 
 /* Typeahead - dropdown */
@@ -115,7 +122,7 @@
 }
 
 .typeahead-dropdown li {
-    padding: .25rem 1rem;
+    padding: .25em 1em;
     cursor: pointer;
 }
 

index.html

@@ -196,7 +196,7 @@ <h2 class="is-size-4" style="margin-bottom: 1rem;">Options</h2>
                     </div>
                 </div>
 
-                <div class="column">
+                <div class="column is-9">
                     <voerro-tags-input
                         v-model="selectedTags"
                         element-id="tags"

src/VoerroTagsInput.vue

@@ -10,7 +10,9 @@
             >
                 <span v-html="tag.value"></span>
 
-                <i href="#" class="tags-input-remove" @click.prevent="removeTag(index)"></i>
+                <a href="#"
+                    class="tags-input-remove"
+                    @click.prevent="removeTag(index)"></a>
             </span>
 
             <input type="text"