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

matthieu_chateau · February 25, 2023, 2:39pm

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>

acjnas · February 25, 2023, 3:45pm

Sweet! Thank you Matthieu

gabeski · February 26, 2023, 10:16pm

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

danyalamriben · February 28, 2023, 3:05pm

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!

alexmohacs · February 28, 2023, 3:32pm

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

matthieu_chateau · February 28, 2023, 5:35pm

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

danyalamriben · February 28, 2023, 9:16pm

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!

Tim_ClimatEU · January 22, 2024, 10:59am

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?

matthieu_chateau · January 22, 2024, 11:55am

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>

Tim_ClimatEU · January 22, 2024, 1:02pm

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.

matthieu_chateau · January 22, 2024, 1:55pm

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>

Tim_ClimatEU · January 23, 2024, 2:04pm

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!!

matthieu_chateau · January 23, 2024, 5:06pm

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.

Matt · February 2, 2024, 4:26pm

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?

matthieu_chateau · February 2, 2024, 4:38pm

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)

Matt · February 2, 2024, 5:40pm

matthieu_chateau:

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

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.

matthieu_chateau · February 2, 2024, 5:49pm

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

Tim_ClimatEU · February 17, 2024, 11:59am

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

matthieu_chateau · February 17, 2024, 3:27pm

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

rhinonix · February 21, 2024, 10:13am

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.