1. Responsive
Last updated
Last updated
FG - Conversation (Desktop)The element FG - Conversation (Desktop) is displayed to the Current User when they are viewing the messages page at a current page width greater than or equal to 600 pixels:
There are a few situations where this element is not visible, but the most important one to remember is that this element is set to be "visible on page load", and becomes hidden when the current page width is less than 600 pixels:
The opposite is true for the FG - Conversation (Mobile) element, which is hidden on page load, and becomes visible when the page width is less than 600 pixels:
This is necessary to ensure the UI for desktop and mobile fits most screen sizes. The repeating group within the FG - Conversation (Desktop) element is set to "vertical scrolling", while the FG - Conversation (Mobile) element is set to "ext. vertical scrolling". Setting the Repeating Group Messages (Mobile) element to ext. vertical scrolling ensures that the repeating group automatically adjusts to the Current User's screen size.
In preview mode, the result of this setup is:
FG - Conversation (Desktop)The Repeating Group Messages (Desktop) element (shown below) is visible when the current page width is greater than 887 pixels:
FG - Conversation (Desktop) The Repeating Group Messages (Desktop) element remains visible after the left-side desktop navigation and Repeating Group Conversations (Desktop) elements collapse in width, when the current page width is less than 887 pixels:
FG - Conversation (Mobile) The FG - Conversation (Mobile) element contains the Repeating Group Messages (Mobile) element. The FG - Conversation (Mobile) element becomes visible when the current page width is less than 600 pixels (while the FG - Conversation (Desktop) element becomes hidden when the page width is less than 600 pixels).
When using the debugger on the messages page, Bubble will flag that there is a 'circular reference' issue with the two multiline inputs on the page. Please disregard this flag because it is intended behavior in this instance. The two multiline inputs -- Multiline Input (Desktop) and Multiline Input (Mobile)allow Users to type a message, depending on whether they are on desktop or mobile. Currently, each time either multiline input value is changed, it immediately sets the opposite multiline input’s initial content to that same just-typed value.
For example, if the Current User types “hey!” into the desktop multiline input, then the conditionals and custom states set up will immediately change the mobile multiline input’s value to “hey!” as well (and vice versa). This way, if the Current User resizes the page while typing into either multiline input, it will ‘feel’ like the same input is being used at all page sizes, though they’re two separate inputs. It also prevents the User from feeling like what they just typed was erased. Bubble is flagging this because the multiline inputs are referencing each other’s values, but these reset workflows only occur when the page is resized. If you have any questions about this, please don't hesitate to email us at support@littlebaytech.com.
