Widget wrongly drawn

  • Resolved lastala

    (@lastala)


    1 year, 10 months ago

    I have a problem with SiteOrigin Button widget that manifests in at least two ways.

    A. When I clone my site, everything else works fine except the placement of the navigation buttons I’ve created to my (official) site, for example https://www.lauriastala.com/videos/transit-scv/. In this image you can see how the navigation buttons on both sides should look like: https://snipboard.io/jr7MQ9.jpg

    and in the other you can see how the buttons are drawn wrong on the cloned (test) site, for example https://www.lauriastala.com/652/videos/transit-scv/ (passwd: YexHO)O): https://snipboard.io/PBMG7U.jpg

    The buttons are drawn wrong also if I copy the buttons to a new page on my official site, on which all the old pages work fine.

    B. When I try to remake the buttons in another (new) manner (logged in to wordpress and building a new page), the buttons are drawn differently when in preview mode inside wordpress: https://snipboard.io/VXzT2K.jpg

    and when looking at the pages normally on a web browser (image 2b.jpg): https://snipboard.io/4QRbDJ.jpg

    You can see it on my test page https://www.lauriastala.com/652/test-page/ (passwd: YexHO)O).

    This problem has occurred a while, unfortunately I cannot remember in connection to which update (WP or plugins). In addition to SiteOrigin Widgets Bundle, I also use Page Builder by SiteOrigin and SiteOrigin CSS, among other plugins. I’m using a Mac computer with Firefox and Safari browsers.

    What is wrong? Please help.

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support Andrew Misplon

    (@misplon)

    1 year, 10 months ago

    Hi, thanks for posting your question.

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

    Thread Starter lastala

    (@lastala)

    1 year, 10 months ago

    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 1 year, 10 months ago by lastala.
    Plugin Support Andrew Misplon

    (@misplon)

    1 year, 10 months ago

    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

    Plugin Support Andrew Misplon

    (@misplon)

    1 year, 10 months ago

    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.

    Thread Starter lastala

    (@lastala)

    1 year, 10 months ago

    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!

    Plugin Support Andrew Misplon

    (@misplon)

    1 year, 10 months ago

    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.

    Plugin Support Andrew Misplon

    (@misplon)

    1 year, 10 months ago

    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

    Thread Starter lastala

    (@lastala)

    1 year, 10 months ago

    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 1 year, 10 months ago by lastala.
    Plugin Support Andrew Misplon

    (@misplon)

    1 year, 10 months ago

    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.

    Thread Starter lastala

    (@lastala)

    1 year, 10 months ago

    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!

    Plugin Support Andrew Misplon

    (@misplon)

    1 year, 10 months ago

    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.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Widget wrongly drawn’ is closed to new replies.