Widget wrongly drawn

Hi, thanks for posting your question.

Did you make any changes to the site’s database such as find and replace operations?

Hi,

Thanks for your fast reply! No, I didn’t do any changes. I just cloned it with Installatron in cPanel.

And that wouldn’t change the problem of drawing the buttons differently inside WordPress editor and web browser.

• This reply was modified 6 months, 3 weeks ago by lastala.

Thanks for your reply.

Page Builder uses data serialisation. If changes are made in the database such as finding and replacing a URL for example and the operation is done in a manner that doesn’t support data serialisation, Page Builder data will be corrupted.

Unfortunately, I’m not immediately seeing the cause of the issue. It looks like you’re comfortable using CSS. You could perhaps try editing the Button Widget containing the top button on the left side of the screen. In the CSS Declarations field, the following can be added to limit the height of the up arrow: max-height: 55px

The same could be tried for your re-built buttons that are too wide. In the Widget Styles section on the right > Attributes > CSS Declarations: max-width: 55px.

Thank you for your reply!

The addition to the CSS Declarations didn’t solve the issue. It changed the placement of the button (upper left) but not its size. See image:

And again, the problem of drawing the buttons differently inside WordPress editor and web browser (as described in the first post) is not solved.

Any other ideas? Thanks in advance!

Hi. Within the top left Button Widget, the Icon Placement is set to Top which sets a bottom margin to the icon. I’m not sure why that bottom margin isn’t present in your pre-cloned site. You can try editing the top left Button Widget and changing the Icon Placement from Top to Right. You might have to make some small adjustments to your custom styles as a result but it should remove the bottom margin which is elongating the top left side button.

Hi, Alex at SiteOrigin has prepared a beta release for the Widgets Bundle that improves the button icon alignment when the button text field is empty. You can find the beta release here. The changes will be included in the next Widgets Bundle release. The beta release ZIP file can be installed from Plugins > Add New > Upload Plugin.
Cheers, Andrew

Hi, Thank you for the beta release. I tested it, but it didn’t really change the issue.

I made an experiment, as you proposed to change the icon positioning to “right” (both the upper and the lower side button), but that makes the icon to be drawn outside of the “button area” and I cannot get it drawn inside the grey area, see image:

And, what makes it worse, again, is that the wordpress editor window draws it differently than it is drawn on a normal webisite browsing situation, see the image:

Both the icon placement and the box sizing is changed. This is a real nightmare to try to edit the page/widget if the editor and the result don’t match!!!!

There’s no possibility to make the icon placement to center, and I think this is the minimum needed change to solve this kind of a problem…

Please help! Thanks in advance for your help!

• This reply was modified 6 months, 2 weeks ago by lastala.

Hi, thanks for the update.

The overlap is likely caused by the button’s fixed width of 55px. If the padding values cause the width to be greater than the fixed width applied in the button’s settings, an overlap will occur.

The top left icon is pulled slightly to the left at the moment due to the -10px margin applied.

You can perhaps try adding to Appearance > Custom CSS or Customize > Additional CSS the following to remove the bottom margin from all Button Widget icons with icon alignment set to top:

.ow-button-base a.ow-icon-placement-top [class^="sow-icon-"] {
margin-bottom: 0;
}

Unfortunately, I’m unsure why there is a difference between the editor and live views.

Thank you Andrew for your replies and your help!

Actually, I got it working with the beta release and the CSS addition you proposed, except that it needed “!important” to the end (without “!important” didn’t work). And of course quite a bit of tweaking to the widget values. But now it shows the same way also in the editor and live view, which is a big relieve.

The strange thing still is that the original site (not cloned) still draws the buttons as it has always drawn. So, why does the cloning (or building a new page) change the situation?!?!

Thank you again for your help!

Hi, thanks for the update, I’m glad to hear you’re making progress.

I looked at the sites for some time; unfortunately I’m not sure what the reason for the differing output is.

The changes in the beta release will be included in the next Widgets Bundle release.