Title: Widget wrongly drawn
Last modified: May 4, 2024

---

# Widget wrongly drawn

 *  Resolved [lastala](https://wordpress.org/support/users/lastala/)
 * (@lastala)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/widget-wrongly-drawn/)
 * 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/](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](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/](https://www.lauriastala.com/652/videos/transit-scv/)(
   passwd: YexHO)O): [https://snipboard.io/PBMG7U.jpg](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](https://snipboard.io/VXzT2K.jpg)
 * and when looking at the pages normally on a web browser (image 2b.jpg): [https://snipboard.io/4QRbDJ.jpg](https://snipboard.io/4QRbDJ.jpg)
 * You can see it on my test page [https://www.lauriastala.com/652/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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fwidget-wrongly-drawn%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/)
 * (@misplon)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17732604)
 * 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](https://wordpress.org/support/users/lastala/)
 * (@lastala)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17732671)
 * 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 2 years, 1 month ago by [lastala](https://wordpress.org/support/users/lastala/).
 *  Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/)
 * (@misplon)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17732698)
 * 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](https://wordpress.org/support/users/misplon/)
 * (@misplon)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17732702)
 * 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](https://wordpress.org/support/users/lastala/)
 * (@lastala)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17733553)
 * 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:
 * ![](https://i0.wp.com/snipboard.io/g5HzO6.jpg?ssl=1)
 * 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](https://wordpress.org/support/users/misplon/)
 * (@misplon)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17733629)
 * 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](https://wordpress.org/support/users/misplon/)
 * (@misplon)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17739696)
 * 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](https://siteorigin.com/wp-content/uploads/2024/05/so-widgets-bundle.1.60.1-beta.zip).
   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](https://wordpress.org/support/users/lastala/)
 * (@lastala)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17740929)
 * 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:
 * ![](https://i0.wp.com/snipboard.io/0opGqg.jpg?ssl=1)
 * 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:
 * ![](https://i0.wp.com/snipboard.io/yoOApl.jpg?ssl=1)
 * 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 2 years, 1 month ago by [lastala](https://wordpress.org/support/users/lastala/).
 *  Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/)
 * (@misplon)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17740963)
 * 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](https://wordpress.org/support/users/lastala/)
 * (@lastala)
 * [2 years ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17746691)
 * 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](https://wordpress.org/support/users/misplon/)
 * (@misplon)
 * [2 years ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17746844)
 * 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.

 * ![](https://ps.w.org/so-widgets-bundle/assets/icon.svg?rev=2556862)
 * [SiteOrigin Widgets Bundle](https://wordpress.org/plugins/so-widgets-bundle/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/so-widgets-bundle/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/so-widgets-bundle/)
 * [Active Topics](https://wordpress.org/support/plugin/so-widgets-bundle/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/so-widgets-bundle/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/so-widgets-bundle/reviews/)

 * 11 replies
 * 2 participants
 * Last reply from: [Andrew Misplon](https://wordpress.org/support/users/misplon/)
 * Last activity: [2 years ago](https://wordpress.org/support/topic/widget-wrongly-drawn/#post-17746844)
 * Status: resolved