Trying to build a responsive Whatsapp clone

Need help
1

I am trying to build a responsive WhatsApp desktop clone here.

So, I have arranged the screen in 6 main parts, as you can see in the picture. Right now I have two issues that I cannot resolve:

  1. In section 3, the repeating group showing the list of messages, there is an issue with the scrolling. I want the scrolling to be similar to what you see in the picture: the length of the scrollbar to adapt to the page. The option Layout style = Fixed number of cells does not apply here, since I do not want a fixed number of messages to be shown.
  2. In section 5, there is also an issue with scrolling as I can see only a certain number of messages, and cannot scroll further up.

Do you have any tip how to solve these two issues?

whatsapp_ui
whatsapp_ui1384Ă—724 52.4 KB

2
1 Like
3

hey @cmarchan thanks for the reply :slight_smile:
I watched the video and I managed to apply the structure explained from minute 19.30 (see here), which is similar to what I did before. But the issue when including the repeating group in the left pan still remains. I want to make sure that the top and bottom arrows of the scroll bar are visible, independent of the screen height (similar to WhatsApp desktop), but ATM the bottom arrow somehow disappears. Hope I explained this issue clear enough :slight_smile:
thanks again

4

Set to vertical scrolling and “draw” the rg to the necessary number of rows that fill up your vertical space.

5

Hmm I am not sure if I understand correctly this part. Do you mean to extend the rg to the full length of the floating group (since the rg adapts automatically to the length of the element independent of the rows you choose)? Because I did that and the situation persists. Thanks

6

@cmarchan any further input would be much appreciated :slight_smile:

7

Check you text element responsive settings

8

@cmarchan thanks for the reply

I checked the text elements responsive settings and unchecked fixed width. But still the issue with the scrollbar remains. I really think it is something related to the floating group properties and the repeating group as a whole. What do you think?

9

@mikeloc any input on this would be much appreciated

10

In the text element play with “shrink the element height” or “cutoff content “

Responsive issues are usually about a couple of minor things or about the overall structure of the build.

12

@J805 do you have another quick life-saver here?

13

I found the solution from this previous post. To build the scrollable left pan you need to:

  1. The following element tree: Floating Group → Group → Repeatable Group.
  2. Repeatable Group needs to have a Layout Style = Ext. Vertical Scrolling
  3. Floating Group needs to be Both - Left - Above Elements
2 Likes
15

This topic was automatically closed after 70 days. New replies are no longer allowed.