Need for many information to be displayed in your list details block? Check this out

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.

Here is a demo: https://test-play.softr.app/list-details-tabs

Here is the full code:

<!DOCTYPE html>
<html>
<head>
    <style>
  @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
  
  .button-group {
    padding: 10px;
    border: 0px solid #FFA500;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .button {
    background-color: #FFFFFF;
    color: #182939;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 15px;
    margin-right: 30px;
    margin-left: 1px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
  }
  
  .button:focus {
  outline: none;
 }

  .button:hover {
  background-color: #FFFFFF;
  color: #FFA500;
  border-bottom-color: #FFA500;
 }

  .button:active,
  .active {
    background-color: #FFFFFF;
    color: #FFA500;
    border: none;
    border-bottom: 2px solid #FFA500;
    outline: none;
  }
  
  @media (max-width: 760px) {
    .button-group {
      flex-direction: column;
    }
  }
</style>

</head>
<body>
    <div class="button-group">
        <button class="button active" onclick="runButton1Script()" title="All list details must have the same data source to avoid conflicts">Information group 1</button>
        <button class="button" onclick="runButton2Script()">Information group 2</button>
        <button class="button" onclick="runButton3Script()">Information group 3</button>
    </div>
     <script>
    const buttons = document.querySelectorAll('.button');
        buttons.forEach(button => {
        button.addEventListener('click', function() {
            buttons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
        });
    });
</script>
</body>
<script>
    // hide blocks 
    window.addEventListener('DOMContentLoaded', (event) => {
        document.getElementById("list-details1").style.display = "block";
        document.getElementById("list-details2").style.display = "none";
        document.getElementById("list-details3").style.display = "none"
    });

    function runButton1Script() {
        document.getElementById("list-details1").style.display = "block";
        document.getElementById("list-details2").style.display = "none";
        document.getElementById("list-details3").style.display = "none";
        console.log("Button 1 clicked"); 
    }

         function runButton2Script() {
        document.getElementById("list-details2").style.display = "block";
        document.getElementById("list-details1").style.display = "none";
        document.getElementById("list-details3").style.display = "none";
        console.log("Button 2 clicked");
    }
          function runButton3Script() {
        document.getElementById("list-details3").style.display = "block";
        document.getElementById("list-details1").style.display = "none";
        document.getElementById("list-details2").style.display = "none";
        console.log("Button 3 clicked");
    }

</script>
</html>

For the border effect on each list details block, here is the code to be inserted in the header code of the page settings.

<style>
#list-details1 .container, 
#list-details2 .container, 
#list-details3 .container {
  border: 1px solid #FFA500;
  border-radius: 10px;
  padding: 25px;
}
</style>
7 Likes

Sweet! Thank you Matthieu

1 Like

Matthieu - this is amazing as always! Looking forward to incorporating into my site.

1 Like

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!

1 Like

Very good… I can already see a helpful use-case for this.

1 Like

Yes this is possible, it works with any block. So let’s say you would have 3 or 4 table blocks, but each of them with different fields and filters. This would work the same as what I did.

For other reference to know (many ways and possibilities):

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 :heart_eyes: 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 :smiling_face_with_tear: some teams demand the “full width” tables and others are crazy overwhelmed… back to the drawing board!

1 Like

What I love about this is how it puts the data into a container. It looks so much smoother.
Is there any way I can only apply that container formatting to my details page without the tabs feature?

The part of the code to use is the following one (Just updated this for better maintenance)

<style>
#list-details1 .container { // change #list-details1 by the correct block ID
  border: 1px solid #FFA500;
  border-radius: 10px;
  padding: 25px;
} 
</style>
1 Like

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.

and replace the code by:

<style>
#list-details1 .container {
  border: 1px solid #FFA500;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: none; 
  padding: 25px;
  padding-bottom: 0;
}

#list-details2 .container {
  border: 1px solid #FFA500;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top: none; 
  padding: 25px;
  padding-top: 0;
}
</style>

1 Like

Awesome!! Thank you!!

I still struggle whenever there is a top bar action button included, then it looks like this:

Any idea how to fix that?

Sorry for asking so many questions @matthieu_chateau ! It’s such a game changer though, my company pages look suuuper professional now, thank you!!!

Example:

Still working on a few things but it looks so much better now already.

Big big thank you!!

Just put the button below instead of to the top when there is type of problem (for list-details blocks).

For list blocks it should be something like:

=> using margin for left and right and padding for top and down as .filter-container is wider than .container of a list-details block.

@media (min-width: 768px) {
  #list1 .filter-container {
    border: 1px solid #FFA500;
    border-radius: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: 80px;
    margin-right: 80px;
  }
}

All these borders should be removed on mobile, not a very good practice to add borders everywhere on mobile and tablets.

There might be a more precise way, but no time for it for free.

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?

Hi,

It is possible by avoiding .container in the styles => the title and subtitles will be included inside the whole border of the block.

For example

#list-details2 .container {
  border: 1px solid #FFA500;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top: none; 
  padding: 25px;
  padding-top: 0;
}

Should become

#list-details2 {
  border: 1px solid #FFA500;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top: none; 
  padding: 25px;
  padding-top: 0;
}

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)

Sorry, I should have clarified - its the latter I’m seeking; keep the title and subtitled inside the overall block border, without the second border.

So removing .container should do the trick (+ updating patiently padding and margin until you find the right spot)

1 Like

In that setup, is there a way to directly click and open one of the buttons via the URL? :slight_smile:

It should be possible, yes, though I never tried it.

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.