If you have a list details block where you want to display many information and fields, here is a way to do it: use tabs (what else?) and split the list details block in 2, 3, 4 or more list details blocks.
This will allow to display a lot of information without having to play with too much verticality.
This is awesome! I was wondering, could I apply this same formatting/magic to grid views? Basically I have to create an admin view for onboarding new staff and I’m planning on creating different grid views (same table/different filters and fields presented) for admin oversight… Would love to be able to do that using tabs so she doesn’t have to scroll a ton!
I absolutely LOVE this and love how much additional detail your threads contained because the “scroll” function was kinda driving me nuts and then I came across your comment about deleting inside the function and BOOM! This looks soooo much better thank you, this just unlocked a ton of interface design challenges I was dealing with… My next thing is to figure out how I can add custom code to resize certain blocks some teams demand the “full width” tables and others are crazy overwhelmed… back to the drawing board!
This is awesome!
I also added some box shadow to it - such an upgrade in styling.
Would it be possible to also add multiple blocks within a container?
I for instance need a combination of the list details with 3 columns and the list details block with one column. Any chance to combine the two blocks into one container? That would supercharge the layout of all details blocks.
I tried to figure it out myself with ChatGPT but didn’t get far.
You need to play with the borders and the size of blocks:
Remove the padding bottom of the first list-details, within the styles settings. Remove the padding top of the second list-details within the styles settings. Then increase the margin of the first or two elements of the second list-details block (like the photo or the header of the block I don’t know) within the styles settings of each element.
Thanks for another great bit of code, matthieu! A question though - the code creates a secondary border around the title and subtitle of a block, if its enabled. Do you know if there’s a way to prevent the second border, while keeping the title/subtitle on?
Careful the size of a block from top to bottom and from right to left is not set up the same as for a container of the same block. (you can see it clearly when using the dev console of your browser).
So some changes about padding and margin might be done.
I don’t know if you want to exclude the title and subtitle from the border or to integrate them inside of it (without having a second border)? I updated my example at https://test-play.softr.app/list-details-tabs if you want to check (having a title and subtitle)
Off the top of my head, you should be able to use a URL Search Parameter to initialize a click event. I haven’t tested this out in this particular situation, but I’ve done something similar before to open a modal window using a URL.