[Tagify] Tagify: Dynamically increase the height of input box

Forge Component
(4)
Published on 14 Apr by Afonso Carvalho
4 votes
Published on 14 Apr by Afonso Carvalho

I am using Tagify to input free text in the form of Tags in my web application, after adding a few entries, the tags start overflowing from the input box, is there any way to dynamically increase the height of text to fit the content inside input box


Hi Vaibhav,

That's the default behaviour for Tagify: fields should grow and shrink as needed. It's working in the demo:

You can try at afonsobc.outsystemscloud.com/TagifyDemo. I suspect there should be some specific issue in your Screen outside of Tagify. Do you think you could share an OML with an example of the problem, for everyone to look over?

Hi Afonso,

I have attached the OML with this post.

I have one more question, can we get rid of "Add <EnteredText>" suggestion box while making an input?



Thanks in advance.

It's the BaseTheme. it sets a fixed height of 40px for anything with the "input" class, which Tagify uses:


Try setting this class in your Theme and it should be fixed:

tags.input {

height: initial;

}

It will affect all <tags> elements with the input class, which should be just Tagify. Otherwise, you might have to change it to be more specific.

About the Add helper behaviour, not right now. I can add an input to control this behaviour, but by default it's displayed if IsAllowNewOptions is True. If you need a solution right now, you can check the transformTag option inside the Javascript of the Tagify webblock and adapt it. 

Or give me a couple of days and I'll push a new version out.


Thank you Afonso, I am looking forward to see a new version with option to control Add helper feature.

I found two more issues,

1. When hitting save button, it displays duplicate inputs in red background for a moment.

2. After deleting an element from list, when you click on save, the deleted element still gets displayed in the input box. 


Thank you, I've managed to reproduce both issues. The second one looks demo-specific but I'll need to investigate the first one. I'll do a set of fixes and I'll let you know once I have a new version.

Solution

Hi Vaibhav,

Sorry for the delay, the week has been a little more busy than what I was expecting. I uploaded a new component and demo with the changes we discussed. Let me know what you think!

Solution