I have a horizontal repeating group that I used to display some user data. The repeating group has a lot of columns, and so I have horizontal scrolling on it. Properly formed it looks like this:
Let me start by asking have you set the necessary columns for the repeating group? Also it’s important to make sure your elements are withing the grid.
I’d suggest enabling the grid feature at the top to see how your repeating group lines up on the ui.
If you have these areas covered well enough and with confidence then you might need to try a plugin to help you with the design. Could just be that there are too many columns. I know there are several ones that you could try, but with plugins also comes the problem with vulnerabilities. so you might need to go with one with good reputation.
Also I use a better layout for this using Data Tables, my web application has more columns than you have here by one (I have 9 columns). But it’s really clear that your layout there is wasting some space.
The Data Table Plugin will space appropriately so your First Name, Last Name, Age, Gender will shrink giving your Address more space. Nevertheless, I think you need to get that plugin.
Yes, I definitely always have had the repeating group within the grid. I use a 20 by 20 grid. I should also mention that my repeating group actually has 25 columns. As a result I need to have horizontal scrolling enabled so I can scroll and actually see all the columns. So the problem is the scroll bar and like 15 columns don’t display untill I scroll up and down the page.