Tabs / Tabulated views

Feature Requests
3

This is how it will look like (sorry I embedded the same block for the three tabs)
ezgif-5-1d0e2f14c4

2 Likes
4

Hey @JohnK,

Thanks for bringing this to our attention. I will add it as a feature request :slight_smile:
Meanwhile, I hope the workaround suggested by @matthieu_chateau will be helpful :slight_smile:

2 Likes
5

wait, this is awesome! Thanks @matthieu_chateau.
This could do the trick until the official feature comes out.

Would it be possible to put two blocks or more per tab if I insert multiple embed codes where the “<div class=“softr-embed…” is, back to back?

1 Like
6

Having some problems getting this working.

Two issues I’m encountering are:

  1. There is always a gray box with a " www.ipjobfinder.com unexpectedly closed the connection." error
  2. Once I insert a block into one of the tabs, the other two tabs show up below it.

EDIT: figured out the solution here. Need to replace the iframe following the <div class...>

1 Like
7

Is everything ok ?
The jbjobfinder is the website of Joachim, I didn’t replace all. Of course, in the code snippet, you need to rewrite some url paths that don’t match.

Let me know if you succeed in adding multiple blocks per tab.

Glad I could hep

8

@matthieu_chateau yup, got it working to a degree. Multiple blocks seem like they work if I just put them after each other.

Having an issue with lists. They’re simply not displaying (same thing as with the show/hide feature funny enough).

Any idea what could be causing this?

9

Getting the blow error when I try to insert the code for the list block. This list does not have any conditional filters (tested with lists that do have conditional filters also and receiving the same error).

I also tested just pasting the list code into a custom code block and I’m getting the same error.

Screen Shot 2022-09-25 at 10.50.58 AM

1 Like
10

Hi @matthieu_chateau , This is great! thanks so much for posting. I have embedded and got the tabs working. However now I am wondering how to hide the blocks that the embeded code is coming from?

For example - I created 2 blocks, then I added the custom code block and embedded these 2 blocks (which works great), I now want to hide the original 2 blocks so the content is not duplicated on the page but when I disable them it disables the embedded content blocks too.

Any advice would be great :slight_smile:

Thanks

Anna

11

Hi Anna!
Unfortunately… This is not possible, the two blocks have to be “live” to be displayed elesewhere. That’s the limit of such a method.

Be aware that I requested for a tab feature, naitive from Softr. Can’t give you any ETA, so for now, the best is to “host” your original blocks in a specific page.

1 Like
12

I believe you can hide the original blocks by putting them on a different page that is not accessible to your users. Try copying the original blocks to a new page that is not linked from anywhere, then deleting the original blocks, then re-embedding.

Please let us know if it worked!

1 Like
13

@dcoletta Thanks for the help, This solution worked for me.

For future reference for anyone else want to replicate,

  • I created a new page called hidden blocks and changed the visibility to a new user group I created called ‘Hidden’ which just had my email attached to it for logged in users
  • I copied all the blocks I wanted to hide to this page and deleted the old ones
  • I updated the embedded code to the newly created blocks
1 Like
14

Thanks dcoletta
It works perfectly, but originally, those original blocks are list details which have been filtered using recordId, how to filter them based on record Id in the tabs page?

15

Hi Tawfeeq, you can have tabs feature without hosting the blocks in specific pages :point_down:

1 Like
16

Perfect Thank you Matthieu, It worked as intended, but trying to change the color of the active tab’s button

17

In order to do this, the best would be to use the second link, “full customizable button”.

What you want to achieve is in this part of the provided code:

background-color: #f5E507; is the hexomatic format for the background color of the button when active (here a yellow color)
color: #182939; is the hexomatic format for the text color of the button (here a blue color)

        .button:active, .active {
            background-color: #f5e507;
            color: #182939;
            outline: none;
18

Here is an updated version of the TABS feature, using Softr CTA blocks and not hard-coded buttons

Demo here: https://test-play.softr.app/hide-show-copy

Code to be inserted in the header of your page settings

<style>
#cta3 a[data-element="button"]:nth-child(1) {
  background-color: #f5f5f5;
  color: #333;
}

#cta3 a[data-element="button"].active:nth-child(1),
#cta3 a[data-element="button"]:nth-child(1):hover,
#cta3 a[data-element="button"].active:nth-child(1):hover {
  background-color: #ff0000;
  color: #fff;
}

#cta3 a[data-element="button"]:nth-child(2) {
  background-color: #f5f5f5;
  color: #333;
}

#cta3 a[data-element="button"].active:nth-child(2),
#cta3 a[data-element="button"]:nth-child(2):hover,
#cta3 a[data-element="button"].active:nth-child(2):hover {
  background-color: #ff0000;
  color: #fff;
}

#cta3 a[data-element="button"]:nth-child(3) {
  background-color: #f5f5f5;
  color: #333;
}

#cta3 a[data-element="button"].active:nth-child(3),
#cta3 a[data-element="button"]:nth-child(3):hover,
#cta3 a[data-element="button"].active:nth-child(3):hover {
  background-color: #ff0000;
  color: #fff;
}
</style>

The code to be inserted in the footer of the page settings

<script>
 window.addEventListener('DOMContentLoaded', (event) => {
  document.getElementById("table1").style.display = "block";
  document.getElementById("form1").style.display = "none";
  document.getElementById("chart1").style.display = "none";
  document.querySelector('#cta3 a[data-element="button"]:nth-child(1)').classList.add('active');
});

window.addEventListener('block-loaded-cta3', () => {
  console.log('CTA Block loaded');

  const buttonClickHandler = (e) => {
    const button = e.target.closest('#cta3 a[data-element="button"]');
    if (button) {
      e.preventDefault();
      const activeButton = document.querySelector('#cta3 a[data-element="button"].active');
      if (button !== activeButton) {
        activeButton.classList.remove('active');
        button.classList.add('active');
        const buttonIndex = Array.from(button.parentNode.children).indexOf(button) + 1;
        if (buttonIndex === 1) {
          document.getElementById("table1").style.display = "block";
          document.getElementById("form1").style.display = "none";
          document.getElementById("chart1").style.display = "none";
        } else if (buttonIndex === 2) {
          document.getElementById("form1").style.display = "block";
          document.getElementById("table1").style.display = "none";
          document.getElementById("chart1").style.display = "none";
        } else if (buttonIndex === 3) {
          document.getElementById("chart1").style.display = "block";
          document.getElementById("form1").style.display = "none";
          document.getElementById("table1").style.display = "none";
        }
      }
    }
  };
  
  document.body.addEventListener('click', buttonClickHandler);
});
</script>
1 Like
19

:star_struck: This is perfect, Thank you for spending time making the sample

1 Like
20

Don’t worry! I do this for each custom code, as I need to test each of them, live, before writing my post.

2 Likes
21

This code is so so helpful! However, it is possible to have the same effect with much simpler CSS. Unless you want each button to have different color when active and/or inactive, you don’t need to call out each :nth position by hand. You can just define the inactive and active classes that should be applied to all buttons within that element:

#hero3 button[data-element="button"] {
  background-color: #fafafa;
  color: #000;
}

#hero3 button[data-element="button"].active,
#hero3 button[data-element="button"]:hover {
  background-color: #8c1d40;
  color: #fff;
}

(code also modified from the original to work with a hero block instead of a CTA block).

1 Like
22

Yep, @Derek , nice call. This is what I do … for myself! But =>

But here in this community I give codes to people that want to use custom code but don’t want to understand all about it, most of the time (or at least they want to replicate or change small parts of the code easily, themselves). So I need to show everything, which is not the most efficient way but the most explicit.
It’s way easier for people to visualize what’s going on in the code, to have a minimum understanding of the code structure as they never touched it before.

Showing all the :nth-child() in the css allows to get a better understanding of the whole code (with the javascript).

Maybe I will do it more frequently, I don’t know.
I think I have some work to do to reorganize all what I did here, and it could be good to refactor the codes too.

But I can definitely tell you that when I started myself to learn coding, it helped me a lot to understand everything.

1 Like