Tagify input: How to eliminate the extra line (SOLVED)

Wappler General How To
#1

Hey guys,

When I use a tagify in default mode, an extra line is added when input width when adding input but although the input width is enough, an extra line (space at the bottom of the tagify input box) is created…
image

And…
image

Is there a way to avoid this?

#2

I have seen this in our projects as well, and I don’t think there is any way to avoid it. Maybe check Tagify library… someone might have some workaround there.

1 Like
#3

Thanks @sid,

It is caused by the min-width:110px set to .tagify__input

image
image1895×859 138 KB

I think I fixed it with an extra css rule in my style.css…

/* Fix Tagify extra empty row */
.tagify__input {
      min-width: 1px !important;
}
#4

Nice!
Does it work ok when searching for a new item with 1px?

#5

Still testing it… Just realised that it needs also padding:0 & margin:0 in order to get the right results…

/* Fix Tagify extra empty row */
.tagify__input {
  min-width: 1px !important;
  margin: 0px !important;
  padding: 0px !important;
}

Testing on Default mode and clicking on values from the dropdown menu it seems to work nice…

EDIT: After those changes on .tagify__input css I just have to give the input a py-2 in order to look nice (form-control) if the tagify is empty (no tags selected)

1 Like