Messaging prototype issue

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.
    image

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

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:

This has been a shortcoming in Axure for some time (forever, really :wink: ) 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:

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.

1 Like

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

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