Tab Element : Adding blank spacer/ resizing elements screws up page format

[David Martin – Support]

Hi,

You are right, something is causing the shortcodes to become undefined. I’ll need to chat to the team about this further. In the meantime:

1) Please test adding this custom CSS to Theme Options => Custom CSS:

.tab-pane .product_list_widget.woocommerce.spb_content_element.col-sm-12 {
    float: left;
    width: 50%;
    margin-top: -100px;
}
.tab-pane .spb_content_element.col-sm-12.spb_text_column {
    max-width: 50%!important;
    float: right;
}

2) I had to remove this, it was causing a JS error:

Thanks.

[Swift Ideas – Ed]

Hi @juliankhor

As per our support policy, and clearly detailed when you create a topic, adding responses to your topic will take you back in the queue – this is why our response has been delayed.

We’ll do our best to prioritise the investigating of this issue.

– Ed

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[juliankhor]

@ David . May I know what does those css code does?. I have added them and the issues are still the same.

[juliankhor]

@ Ed. I am glad support is looking into this. I felt neglected. :/.

[juliankhor]

@ Rui. The issue happens randomly. Try other tabs especially ” TATTOO” tab.

Steps to replicate :
– Edit the ‘tattoo tab’ content
– Try swapping the position of the ‘Product element’ with the ‘ block text element’
– Try adding a blank spacer on top.

At the moment, I think the tabs element is fundamentally buggy and unusable. From this forum I believe I am not the only one experiencing this issue. If you read the history of this thread, I have repeated myself numerous times before. I truly hope this can be resolved and not pass on to another support officer each time requiring me to repeat my self. Frankly it has been a very frustrating experience.

Julian

[David Martin – Support]

@juliankhor – that should have set the layout as you wanted it without the need to heavily adjust the layout.

I’ll re-add it and see what I can do to assist you further.

Thanks,
David.

[David Martin – Support]

With the added CSS, this is what I get:

Thanks.

[juliankhor]

Hi David,
Thank you for your reply.
However when I did a preview from the actual home. page , not the test page you created,
Just by shifting the position of product to the left still mess up the entire page formatting. :/

Julian

[David Martin – Support]

Hi,

The CSS was meant to replicate the mockup you supplied, without the need for you to change the actual Page Builder elements.

Did you want the layout changed to something other than the supplied mockup?

Thanks.

[juliankhor]

Thanks David for the explanation.
I think I understand, what you did now. However, I am planning to add more tabs and edit the others too. And I may change my mind of the order of the components within the tabs too. By hardcoding ( adding code in the CSS ) is a stop gap measure I presume?. However the question is, is the tab element, fundamentally flawed at the present moment? If it is, then I will design my page around this restriction at the moment until it’s fix.

Warm Regards
Julian

[Rui Guerreiro – SUPPORT]

Hi @Julian,

I wasn’t around yesterday so only today I could look at the tabs issue. I think I manage to fix it, can you provide me ftp access in a private reply to implement my changes in the page builder so we can check it it’s ok or not.

2 things I notice and fixed:

1) When you add an element inside the tabs only that last element was resizable unless you save and refresh the page or switch to classic editor and back to the builder.

2) When you dragged an element inside the Add icon was disappearing and white space was being added inside the Tab content.

-Rui

[juliankhor]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

Can you clear the browser cache and try again?
Let me know the results.

-Rui

[juliankhor]

it is still the same when I :
– Under tattoo tab
– Swapping position between product and block text

julian
P.S : cleared cache