Botfront's Webchat Input Textfield Size too big

[vio_lovis (Violetta)]

Hi there,
I am a Rasa newbie and just started my first project.
I set up Botfront’s Webchat to implement my bot into my Wordpress website. I followed the tutorials by @Horizon733 to set it up/customize it and the tutorial by Innovate Yourself to implement it - it works just fine. There is just one little problem:
The input textfield is somehow higher than in the browser preview (opening the index.htlm file locally), such that the webchat windows is to large to fit on the screen without reducing the zoom to 90%.
Can someone help please? Any suggestion on how I can scale it?
Could it depend from my Wordpress settings?

Thank you in advance
Greetings from Germany, Violetta

[nik202]

@vio_lovis Hello, you can adjust the size of the InputText while customising css file, for that please see the rasa/webchat repo. I will try to share the code for the same, may be later in the day.

Repo: rasa-webchat/style.scss at master · botfront/rasa-webchat · GitHub

@vio_lovis

[Before]

.rw-conversation-container .rw-new-message  {
		padding-top:50px; # need to just adjust the value or it will automatic take the default value 
	}

[After]

Everything much depends on the padding please do ref the rasa/webchat repo.

Good Luck!

[vio_lovis (Violetta)]

Ok, thanks, @nik202!
I am going to check it out. Do you mind if I come back to you, if I have further questions?

[nik202]

@vio_lovis sure. No worries.

[vio_lovis (Violetta)]

Hi @nik202,
finaly I had some time to fix these issues. I just saw that you added the example - thanks as usual I couldn’t have fixed it without your help
So, what worked for me with the Botfront Webchat in the end, was the following:

.rw-conversation-container .rw-messages-container{max-height: 380px; padding-bottom: 55px;}
.rw-conversation-container .rw-sender{;max-height: 30px;}        
.rw-conversation-container .rw-new-message{padding-top: 10px;}

First I reduced the overall size (.rw-message-container), because the complete windows was too large. Then I changed the heigth of the input text field (.rw-sender). However, then the conversation just overlayed with the input text field. Thus I added a padding to the messages-container. To adjust the position of the “type your message here…”-text within the input text filed I added another padding.
Maybe it will help someone in future!?
Ciao

[nik202]

@vio_lovis Great Thanks a lot for the feedback. If you have any further doubt please feel free to tag me.