Messaging prototype issue

[jackyhl8]

Hi All,
I’m totally lost idea on how to do this. Can anybody please enlighten me.
I want to create a messaging prototype and encountered a few problems.
inbox.rp (49.8 KB)

1. How to make the text box height responsive to the fixed text width ?? for example, the longer the message i type in the text box, the text box response by increase its height to show the full text typed.
   

2. How to show the message typed on the above interface upon pressing “send” ?
   

[mbc66]

There are lots of threads on this forum that can help. I recommend searching for “chat” or “chatbot”. For example, here is a thread with several examples and links to others:

Chat / Chatbot samples?

Hi Axure Users. Can some one share a sample chat / chatbot app that you have created. I would like to learn Text feild, Text box and variables with Dynamic panels. To get inspired and to learn a easy and effective way to build chat bot apps with Axure. #Thanks _Wil

How to make the text box height responsive to the fixed text width ??

This has been a shortcoming in Axure for some time (forever, really ) You can use the “Fit to Text Height” style option for widgets, but that only works for text entered in the editor, not dynamic changes in the browser. The best approach I’ve seen is to try to calculate the height based on the string length, but this is fraught with issues for proportional fonts. Here is a thread showing this approach:

Setting the size of an element by the height of an element which is populated by repeater data

Hi @StefanSchmager, Not sure if I understood well your issue but do you want to adapt the height of an element with its text? If so you could set a Resize action on ItemLoad and use the number of characters (its length) to change its height: [image] Here a mockup with this behaviour: Adapt_height.rp (55.3 KB) Hope it will help you, Best,

How to show the message typed on the above interface upon pressing “send” ?

One approach is to use a repeater for the chat list, adding rows with each press of “Send” and using the text input field to set a column value in the repeater. --After that you can move the repeater up (within a fixed-area dynamic panel) to show the new chats at the bottom.
Another approach (simpler than a repeater, but less extensible) is to set a limit for how many messages to show (let’s say you only need 5 or 6 to demonstrate the functionality) and then just simply progressively showing the next “message widget”.
Either way, you’ll need to estimate the height needed for the text based on string length. More accurate ways to do this are available in javascript and CSS which you can “inject” or apply via Axure Share plugin.

[jackyhl8]

@mbc66 Thank you so much for all the useful threads and advice

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.