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

Custom Coding
,
1

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, here is the code to be inserted in the header code of the page settings. You may need to adapt .css-mfstbn with the right selector of your page

<style>
.css-mfstbn {
  border: 1px solid #FFA500;
  border-radius: 10px;
  padding: 25px;
}
</style>
3 Likes
2

Sweet! Thank you Matthieu

1 Like
3

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

1 Like
4

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
5

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

1 Like
6

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):

7

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