Chat Responses not showing

[VMArchisage]

Hi,
I've sort of got the chat bot working by putting the setting values into the actual php files rather than use the settings. But, I'm having a weird issue with the bot. The request and responses are not showing on the page. This could be to do with my theme, but I don't know.

I've done a bit of digging and the CSS has two values in .chatbot-wrapper .chatbot-inner where the overflow-x and overflow-y values are being set to hidden. When using developer tools to set both of those to visible, the request/responses show up; but only for the first 4 messages. After that, there are no more messages because the page does not scroll or increase in size. This was in Internet Explorer and Edge. Chrome has similar behaviour, but I was not able to use Developer Tools to change the CSS values to see if the messages appear.

You can see this behaviour for yourself at http://www.archisage.com.au/archie-chatbot which is where I have deployed the page for the moment.

Hope you can point me to the cause of this and fix it.

Cheers, Vivek

PS: I removed the Title from the wrapper as I have the title elsewhere. That part is not a bug.

[krilor]

Hei Vivek

It seems that this is a bug in the CSS for the shortcode version of the chatbot. I'll fix that.

For now, you can add this custom CSS: .chatbot-wrapper-shortcode { height: 500px; }

[VMArchisage]

Adding just that line helped. I can now see all the request and responses. After a few messages, the scrolling does not work - that seems to be the same issue as #38

Thank you.

[danielpowney]

Looks like a great plugin. Well done. I don't understand why CSS position absolute has been used so much. Here's the CSS I have used to fix this. Cheers, Daniel

.chatbot-wrapper .chatbot-inner, .chatbot-wrapper .chatbot-top, .chatbot-wrapper .chatbot-content, 
.chatbot-wrapper .send, .chatbot-wrapper .chatbot-bottom, .css-icon.send:after {
	position: static !important;
}

.chatbot-wrapper .input {
	width: 90% !important;
	padding: 8px 0px !important;
	display:inline-block !important;
	float: left !important;
}

.chatbot-wrapper .send {
	float: inherit !important;
	position: static !important;
	display: inline-block !important;
	float: left !important;
}