Staff replied SP Page Builder

Sp Page Builder 5 issues

Asked by Chris 3 years ago Last activity 3 years ago

Hello,

I tried to update my recent template with the new Sp Page Builder 5, but I found some issues.

It seems that the empty space addons for which I have selected to be hidden on desktop are visible:
As you can see, the hidden-md class no longer applies.
I use Sp Page Builder modules to create the template footer and once I made the transition from the version 3 to 5, the footer image dissapeared, though it is set in the backend editor: https://screencast-o-matic.com/watch/c0ih0FVguND

Hope you can get these fixed.

27 replies

Rakesh

3 years ago

The frontpage editor is showing an empty page, only the menu is visible.

Rakesh

3 years ago

Article Addon still doesn't have multiple screensize settings for the options:
Limit,
Columns,
Introtext characters limit

Toufiq Senior Staff

3 years ago

Hi there,

I appreciate you reaching out. I sincerely apologize for this oversight. Will you please provide me the Joomla administrator access to check the issue? I will check & get back to you soon.

-Thanks

Chris Asked this

3 years ago

Hi,

I sent the details, you can check how it looks now with the 3rd version and update to the 5th to see the differences.
Also I noticed on another template that the content shrinks a bit when I update to the 5th version even though the container sizes are the same, you can see if it happens here also.

Robert Leist

3 years ago

I have the same issue. My content is not respecting the container padding or margins.

Chris Asked this

3 years ago

I found the answer to this.
Sp Page Builder 3 uses the class .sppb-container-inner which has the following styles:

.sp-pagebuilder-section-inner .sppb-row, .sppb-container-inner, .sppb-row-container {
    position: relative;
    z-index: 3;
}

Sp Page Builder 5 uses the class .sppb-row-container which has the same styles but also adds:

.sppb-row-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

and that is where the extra padding is coming from: https://screencast-o-matic.com/watch/c0ijDcVgawP

Robert Leist

3 years ago

Everything looks great now.

Thanks!

Chris Asked this

3 years ago

Hello,

Another issue I found is that the color variables that used to work on the 3rd version do not work anymore:
https://screencast-o-matic.com/watch/c0i1btVgw2U

Toufiq Senior Staff

3 years ago

How to use color libray

https://drive.google.com/file/d/1Ruae4eIVmUTB1jJCQu1B6BQsP3NqhfIE/view

Chris Asked this

3 years ago

Hello,

I saw that, it is an interesting function, but it is useful for people who only use Sp Page Builder. Most of us use it with Helix Ultimate also.

Allowing use of variables like you did up until the 3rd version makes it easier to implement in Sp Page Builder pages the Helix presets so a user who wanted to change the main color of a website, could do that from the preset settings in the template options.
See how easy it was: https://screencast-o-matic.com/watch/c0iiIUVgyzz

Now a user who wants to change the main color must do that from the Helix presets and also from the Sp Page Builder options. Why would you complicate this?

Chris Asked this

3 years ago

Color variables seem to work now.

Chris Asked this

3 years ago

Hi again,

I found another issue: for the DIV addon, I give it a custom class and edit it in the Custom Css box, but the css does not apply on the front end.
Please check here what I am talking about: https://screencast-o-matic.com/watch/c0iiVhVgxjq

Toufiq Senior Staff

3 years ago

I have informed our team. I hope next release it will be solve. Thanks

Toufiq Senior Staff

3 years ago

We have solved this issue in our end. You will get it next update.

custom css on div addon

Chris Asked this

3 years ago

I can confirm this got fixed.

Chris Asked this

3 years ago

I found a couple of more issues:

The Testimonial Carousel addon applies the margin bottom for both the .sppb-testimonial-carousel-message class and for .sppb-testimonial-carousel-item-content class.
See here: https://screencast-o-matic.com/watch/c0ijoBVgavr
The column padding is wrong, in Sp Page Builder 3 I had padding applied to the top, right and bottom of a column. After update to Sp Page Builder 5, it automatically applied a padding to the left also.
See here: https://screencast-o-matic.com/watch/c0ijoCVgavB
The solution cannot be to add 0 padding there, because I have thousands of columns from hundreds of websites edited this way which will break for sure after transition from Sp Page Builder 3 to 5.
Another issue I found is on the Heading addon. The headings for which I have selected text transform uppercase in Sp Page Builder 3 no longer apply this in Sp Page Builder 5
See here: https://screencast-o-matic.com/watch/c0ijodVgawc
And last issue, it seems that the Button Group addon comes with a predefined font-size of 16px which overrides the buttons font sizes from previous versions.
See here: https://screencast-o-matic.com/watch/c0ijoLVgawT

I hope you can get these fixed, despite finding all these issues, I really like the new Sp Page Builder, I feel like once I get the hang of it, my work will go much faster.

Toufiq Senior Staff

3 years ago

Thanks for your cooperation.

I have found this issues.

Text transform function missing on typography settings
Padding issue

For other issue, can you give me a Akeeba backup copy of your site?

Thanks

Chris Asked this

3 years ago

Sure, I attached the website to this post.
It is currently with sp page builder 3, you can make the update and check for yourself.

I also noticed when I checked a page for responsive the padding I set for a column also appears on other columns as well. I think this may happen if you duplicate or copy/paste a section.
Try setting padding values for a column, copy/paste the parent row. On the pasted row remove the paddings for the column and see if they still appear after saving on responsive.

Toufiq Senior Staff

3 years ago

Thank you so much. I have explain your issue with our developer team. I hope they will fix it as soon as possible. :)

Pirosoft

3 years ago

Oh my God
SPPB 4
https://prnt.sc/z3bHeBfRa_d1
https://prnt.sc/kUVPXIPc0BD5

Mobile
https://prnt.sc/9pwlzYwFzviP
https://prnt.sc/Uvf5JLodor5E

After upgrade to
SPPB 5
https://prnt.sc/yyQIjRqunP5M
https://prnt.sc/kjRVAPIxouIZ

Mobile
https://prnt.sc/QYmJo5P9pRBV
https://prnt.sc/3HIx_D0KIwXM

Toufiq Senior Staff

3 years ago

Will you please provide me the Joomla administrator access to check the issue?

Pirosoft

3 years ago

Credentials in hidden field

Rakesh

3 years ago

After saving global settings for Page Builder I get this message: danger
Could not save data. Error: %s

Page: ../administrator/index.php?option=com_config&view=component&component=com_sppagebuilder

Rakesh

3 years ago · edited

When opening Joomla Module:

Unhandled Runtime Error
TypeError: C.size is null
Please open the browser console for more information!
Call Stack
children
(2:560060)
m
(2:45285)
xs
(2:527204)
xl
(2:584036)
vu
(2:573190)
mu
(2:573118)
pu
(2:572979)
ru
(2:569786)
su
(2:570175)
Bi
(2:511050)
4448/tu/<
(2:567727)

CONSOLE:
TypeError: C.size is null
    children .../administrator/components/com_sppagebuilder/assets/editor/dist/js/bundle.min.js?6044a42430be6e6bc77038d6c6adf518:2
    m .../administrator/components/com_sppagebuilder/assets/editor/dist/js/bundle.min.js?6044a42430be6e6bc77038d6c6adf518:2
    xs .../administrator/components/com_sppagebuilder/assets/editor/dist/js/vendors.min.js?6044a42430be6e6bc77038d6c6adf518:2
    xl .../administrator/components/com_sppagebuilder/assets/editor/dist/js/vendors.min.js?6044a42430be6e6bc77038d6c6adf518:2
etc
vendors.min.js:2:535839
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data

Error: Promised response from onMessage listener went out of scope

Rakesh

3 years ago

Access Administration Interface: Allowed

But user doesn't have access anymore after update to SPPB 5.

Had to Allow also: Configure ACL & Options to give access.

Rakesh

3 years ago

When adding an image in the Image Addon.
The content URL becomes "/images/...." and should be "images/..."
So creating src="//images/..." and resulting in a bad URL link.

For now I can simply remove the extra added '/' at the beginning of the URL manually.

Chris Asked this

3 years ago

I found no issue regarding this.
Using the backend editor, the image will be visible if you add "/images" and also "images" in the url path, but the resulting link will only work if you add the image path as "images/imagename.extension".
The same way works for Sp Page Builder 3 and 5.

Rakesh

3 years ago

In the module SPPB the hide on mobile doesn't work for the Image addon

Rakesh

3 years ago

in the Backend editor, when adding an image, the URL get's an extra / at the beginning. Looks fine in the backend, in frontend, image shows a broken link image.

Rakesh

3 years ago

Hi Chris,
The problem is with Media Manager and the results it creates with the URL. It adds a '/' at the beginning of the URL, resulting in a broken URL link at the frontend.
This is a VERY serious problem that needs to be fixed ASAP.

Toufiq Senior Staff

3 years ago

Will you please provide me the Joomla administrator access to check the issue?

Rakesh

3 years ago

Notice it only occurs when selecting images within folders.

Toufiq Senior Staff

3 years ago

Got it. I have informed our team. Thank you so much.

Chris Asked this

3 years ago

Found another issue: The Slideshow addon, no matter what animation and what settings I choose, it always slides from the left: https://screencast-o-matic.com/watch/c0ilqZVgm09

Chris Asked this

3 years ago

Another issue you can check is the row and column vertical alignment. No matter what I choose, it's always center.

Chris Asked this

3 years ago

Also, please check the Image Carousel addon, even though no link is inserted, it automatically adds an link.
https://prnt.sc/c2KVBGViI9Su
https://prnt.sc/N0TwfCYScFbz

Toufiq Senior Staff

3 years ago

I will check & share it with our developer team. Thanks

Chris Asked this

3 years ago

Another issue I found is that animation does not work on the Div addon.

Toufiq Senior Staff

3 years ago

Download this package & check please. Let me know if you found any issues.

Chris Asked this

3 years ago · edited

I tried, it's bad, first of all, i get this warning in the front end (php 7.4 and 8.0):
Warning: Undefined property: stdClass::$settings in C:\xampp\htdocs\joomlaclean\components\com_sppagebuilder\helpers\helper.php on line 1034

Also all the images are gone because the path is incorrect, see how it is generated:
src="/joomlaclean/\joomlaclean\images\resource\about-1.jpg"
There were no issues with the image path, it was good.

Also I cannot edit any pages, i get the undefined error

Toufiq Senior Staff

3 years ago

Please test this package and let me know your feedback.

Note: Don't try to check on your live server.

-Thanks

Chris Asked this

3 years ago · edited

I tried the latest release 5.0.2, this image path error is still present, the image paths are generated wrong:
/gerow/\gerow\images\images\about_author.png

Please leave it as it was up until version 5.0.1, all my images have dissapeared.
See here what happens after I install the 5.0.2: https://screencast-o-matic.com/watch/c0iFoJVgSBB

Chris Asked this

3 years ago

Also this issue is not happenning on all addons. In the carousels the image path is generated correctly, for the rest of the addons (image addon, person addon, feature box addon) I see the issue above.

And for the background image again, the path is generated incorrectly, it is made with \ instead of /, please check here: https://screencast-o-matic.com/watch/c0iFbVVgSs2

Chris Asked this

3 years ago

I tested on a public hosting and this issue is not present, I don't know why it only happens on a local computer. Can you check and provide a fix for this? Previous versions worked everywhere without issues.

I don't understand why you changed the images paths, there was nothing wrong with them, I have been using all Sp Page Builder released versions ever since the 2nd version, I inserted images in all ways, using the media upload, the folder select and by adding direct path in the input field and there wasn't any problem ever.

Toufiq Senior Staff

3 years ago

Please check this package and let me know the update.

Toufiq Senior Staff

3 years ago

We just fix minor issues. Please check the 5.0.3

Rakesh

3 years ago

Can you please add this function to the SPPB Module: Options>Prepare Content: YES !

Also in the SPPB Row/Column options would be great.

Chris Asked this

3 years ago · edited

Hello,

I checked the new version, most issues reported here were fixed, but some are still present.

Some classes from the 3rd version are not available for the 5th: It seems that the empty space addons for which I have selected to be hidden on desktop are visible: As you can see, the hidden-md class no longer applies. so we get some extra spaces.

See here: https://prnt.sc/2GdddfeYVnbh

The heading addon text-transform issue has not been fixed: Another issue I found is on the Heading addon. The headings for which I have selected text transform uppercase in Sp Page Builder 3 no longer apply this in Sp Page Builder 5 See here: https://screencast-o-matic.com/watch/c0ijodVgawc

It may be because in the 3rd version you had two options: the default uppercase icon and also a select form field for text-transform: https://prnt.sc/Z2DK6U01dH_N
I hope you get this fixed so that the text transform from the select applies too.

The button group addon has a predefined font-size of 16px: And last issue, it seems that the Button Group addon comes with a predefined font-size of 16px which overrides the buttons font sizes from previous versions. See here: https://screencast-o-matic.com/watch/c0ijoLVgawT

But strange that I don't see this font size applied on other templates except this template, I leave again the akeeba from it, maybe you find where the issue is.

Toufiq Senior Staff

3 years ago

The hidden-md function placed on Hidden on Tablet Portrait
text Transform function issue - Already informed our team.
Button group font size was 16px Page Builder 3. That's why font size is 16px.
https://prnt.sc/ks4CdoumRBgC

Chris Asked this

3 years ago

You are right, but for Sp Page Builder 3 the hidden-md class was to hide addons for desktop/laptop view. So after update to the 5th version this no longer works.
I showed you in the video, there is no 16px size set for Page Builder 3, default 16px size comes from sppagebuilder.css, but I override that in the custom.css file. As you can see, the akeeba with the 3rd version has no 16px size, the 16px appears after update to the 5th version: https://screencast-o-matic.com/watch/c0iYDxVkhrO

Toufiq Senior Staff

3 years ago

Add this css code inside the custom.css file.

body .sppb-btn, body .sppb-sp-slider-button .sp-slider-btn-text, .login .btn, .registration form > div .btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
    font-size: 13px !important;
    line-height: 24px;
    padding: 15px 50px;
    font-weight: 700;
    letter-spacing: 0.1em;
    overflow: hidden;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
}

I will inform our team about the hidden-md issue.

Chris Asked this

3 years ago

Thanks, I know how to add !important in css, I just want to make sure this issue does not rise up in other of my templates as well.

Also you might want to check this post: https://www.facebook.com/groups/sppagebuilder/posts/2229177207273864/
The column padding seems to be wrong:
Pagebuilder 5.0.1: the section padding is set to 70px 0 70px 0
after update to 5.0.3, the padding section changed automatically to
70px 70px 0px 0px

Happens after transition from 3.8 to 5.0.3 as well, the column paddings are not transferred in the same positions, I think this is a minor mistake the developers may have made, they confused the directions.

Chris Asked this

3 years ago

Ignore the reported column padding issue, it has been resolved in 5.0.4 version.

Toufiq Senior Staff

3 years ago

Already this issue is solved latest update.

Chris Asked this

3 years ago · edited

Hi,

I found some more issues.

After update from 3rd to 5th version, the overlay on the slider does not work anymore (at least the gradiend overlay). It does not work even if I add it again.
Image column in the slider is wrong, sppb-col-xl is missing, check screenshot how the columns are generated: https://prnt.sc/2sG-PWYVlJZj
Letter Spacing on Headings: Headings with the letter-spacing field empty get automatically a letter-spacing: 0; which overrides the default settings in the custom.css file. If I have:
```
h1, h2, h3, h4, h5, h6 {
 letter-spacing: -1px;
}
```
I cannot add !importat in the custom.css because this will override the addons with a different letter-spacing than the default one set. This is the same case with the buttons above, adding !important in any place will generate overrides in other places. Please remove the settings that automatically add a letter-spacing: 0 if no value is selected.

Toufiq Senior Staff

3 years ago

I just checked your three issues on my end and no problem found. Besides, You shouldn't use this css code on your custom.css or template.css file.

You should add a class before use this type of css code

h1, h2, h3, h4, h5, h6 {
 letter-spacing: -1px;
}

.title h1, h2, h3, h4, h5, h6 {
 letter-spacing: -1px;
}

-Thanks

Chris Asked this

3 years ago

Hello,

I am sorry, but why is it wrong to set the basic style settings for a template? If I add the class like you said, the headings styles will no longer apply as general settings and besides even if I do that, the letter-spacing will still be overridden by the one added as default by you in the addon. Best thing is to not automatically add letter-spacing: 0 where no value is selected, because this way you will only complicate the transition from 3rd to 5th version.

Let me show you these issues, see here how it looks before and after the update and see how the gradient does not apply no matter what settings I choose: https://screencast-o-matic.com/watch/c0itDIVk0Ov

If you need the akeeba backup of the website, let me know.

Toufiq Senior Staff

3 years ago

Give me a Akeeba backup zip file. Thanks

Chris Asked this

3 years ago

Akeeba file attached to this post.
You can update to latest 5th version and check for the slider:

in Home 1 the gradient overlay issue.
in home 5 the image column issue

You may also check how letter-spacing is automatically added and how some columns break after the update

Toufiq Senior Staff

3 years ago

Thanks a lot. I just shared your link to our developer team. I will get back to you soon. Thanks