Okay, so I plan to create a table of data in the form of a card, and I want this table to be responsive. Everything went smoothly until finally, the problem came.
If you look here (at Codepen), you can see everything looks pretty normal. But try to click the next (>) button and try resizing the window. And you can see that the data is falling apart. I do not want that to happen. What I want is when we resize the window the data remains in place and does not move.
I tried using flex-basis so that each data item took 100% width, so the item remained in place. If at the initial item position, it works well. But after pressing the next (>) button and then we resize it, the item data becomes messy.
So, I hope someone who has the knowledge or someone who is an expert can help me with this problem.
I think the real problem is with the DOM manipulation, i.e. how you are displaying the data (scrollBy). I would add the data to your code and make a render/update function which is responsible for adding/changing the data in the DOM. Right now you are also relying on the layout to hide the data already in the DOM.
Actually, I don’t really know how. And, even if I do that, I think, won’t it make the web performance slower, because it has to update data continuously, right? And, if possible I just want to use pure CSS.
I doubt you would see a performance hit, at least nothing important. Getting data from outside the page is also a more realistic use case, so is direct DOM manipulation where you add/remove elements. There is no real point in practicing something you likely will never use. You are sort of doing pagination but only changing the numeric data which is also a little weird, what about the users and the percentages? I really don’t think the scrollBy solution is what you are looking for.
The easiest solution would be to stack all data on top of each other and then hide/show the relevant data using CSS, like toggling a show class, that would be one way of doing it. As it stands now i think no matter what you do, if you trigger goNext and then resize the page you can see the numbers scroll (i guess you can toggle the visibility on the numbers).
The real solution I’m proposing is obviously much more involved and would likely even use an API like randomuser.me just to get more realistic data. I know i am giving you more problems than solutions, but i mean well. The exercise you have started is great, but the implementation needs some work.
Actually, I forgot to say this, but, I didn’t plan to show just one data. I will show the data according to the screen size. For example, when full size will show 4 data, medium size will show 2 or 3 data, or in the case of mobile size, one data will appear.
And, when I think, you are right.
In the end, it will retrieve the data from a database that might use a JSON file. And in the end, I will save it into an object. And in the end, I will have to use javascript to do that.
So… I thought, why didn’t I just do that?
Well, it’s time to do research and experiment… again.
I just hope the performance isn’t slow, because there might be more than 50 data.