Hi @arunsqureboat,
Welcome to Google Cloud Community!
It looks like you are encountering an issue where you receive an HTML table as a response from Dialogflow Messenger, but you are unable to set the white-space property to nowrap and make the table scrollable on the X-axis using overflow: auto. In addition, you want to ensure that the table cells remain in a single line and that the table can be scrolled horizontally.
Here are the potential ways that might help with your use case:
- Wrap the Table in a Div: You may start by enclosing your <table> within a <div>. This <div> will act as a container for your horizontal scrolling. Assign a class to this <div>, such as table-container.
- CSS for the Container and Table: Make sure you target your table-container div and set its overflow-x to auto. Additionally, ensure your table does not shrink by setting a width constraint to keep it stable. Apply white-space: nowrap; on your table element to maintain its structure.
You may refer to the documentation below, which provides information on Google Cloud’s Dialogflow CX Messenger fulfillment and HTML customizations:
Was this helpful? If so, please accept this answer as “Solution”. If you need additional assistance, reply here within 2 business days and I’ll be happy to help.
LinkedIn
Twitter
