Discrepancy between editor & preview for the menu component

This issue has been tracked since 2021-07-22.

Hello,

First of all, thanks for this awesome library.

I'm trying to add a menu component in the header of my email. I've added two elements to the menu and aligned the text to be on the same height as the logo:

Screenshot 2021-07-22 at 16 42 05

However, when I preview it, it's not aligned anymore:

Screenshot 2021-07-22 at 16 42 40

Unfortunately, when the email gets sent, the elements are also not positioned correctly.

It looks to be specific to the menu component because positioning text or header works fine.

Am I doing something wrong? I'd appreciate any help with this one. Thanks!

Here's the JSON of my design:

{
  "counters": {
      "u_column": 11,
      "u_row": 5,
      "u_content_image": 2,
      "u_content_menu": 5,
      "u_content_divider": 1,
      "u_content_text": 1,
      "u_content_heading": 1
  },
  "body": {
      "rows": [{
          "cells": [1, 1],
          "columns": [{
              "contents": [{
                  "type": "image",
                  "values": {
                      "containerPadding": "13px",
                      "src": {
                          "url": "https://prowly-uploads.s3.eu-west-1.amazonaws.com/uploads/1036/assets/56128/Spotify_Logo_RGB_White.png",
                          "width": 2362,
                          "height": 708
                      },
                      "textAlign": "center",
                      "altText": "Image",
                      "action": {
                          "name": "web",
                          "values": {
                              "href": "",
                              "target": "_blank"
                          }
                      },
                      "hideDesktop": false,
                      "_meta": {
                          "htmlID": "u_content_image_1",
                          "htmlClassNames": "u_content_image"
                      },
                      "selectable": true,
                      "draggable": true,
                      "duplicatable": true,
                      "deletable": true,
                      "hideable": true
                  }
              }],
              "values": {
                  "backgroundColor": "",
                  "padding": "0px",
                  "border": {},
                  "_meta": {
                      "htmlID": "u_column_9",
                      "htmlClassNames": "u_column"
                  }
              }
          }, {
              "contents": [{
                  "type": "menu",
                  "values": {
                      "containerPadding": "10px",
                      "menu": {
                          "items": [{
                              "key": "1626964747116",
                              "text": "Hello",
                              "link": {
                                  "name": "web",
                                  "values": {
                                      "href": "",
                                      "target": "_self"
                                  }
                              }
                          }, {
                              "key": "1626964748415",
                              "text": "World",
                              "link": {
                                  "name": "web",
                                  "values": {
                                      "href": "",
                                      "target": "_self"
                                  }
                              }
                          }]
                      },
                      "fontFamily": {
                          "label": "Arial",
                          "value": "arial,helvetica,sans-serif"
                      },
                      "fontSize": "25px",
                      "textColor": "#bfedd2",
                      "linkColor": "#0068A5",
                      "align": "center",
                      "layout": "horizontal",
                      "separator": "|",
                      "padding": "25px 15px 5px",
                      "hideDesktop": false,
                      "_meta": {
                          "htmlID": "u_content_menu_5",
                          "htmlClassNames": "u_content_menu"
                      },
                      "selectable": true,
                      "draggable": true,
                      "duplicatable": true,
                      "deletable": true,
                      "hideable": true
                  }
              }],
              "values": {
                  "backgroundColor": "",
                  "padding": "0px",
                  "border": {},
                  "_meta": {
                      "htmlID": "u_column_10",
                      "htmlClassNames": "u_column"
                  }
              }
          }],
          "values": {
              "displayCondition": null,
              "columns": false,
              "backgroundColor": "",
              "columnsBackgroundColor": "",
              "backgroundImage": {
                  "url": "",
                  "fullWidth": true,
                  "repeat": false,
                  "center": true,
                  "cover": false
              },
              "padding": "0px",
              "hideDesktop": false,
              "_meta": {
                  "htmlID": "u_row_5",
                  "htmlClassNames": "u_row"
              },
              "selectable": true,
              "draggable": true,
              "duplicatable": true,
              "deletable": true,
              "hideable": true
          }
      }, {
          "cells": [1],
          "columns": [{
              "contents": [{
                  "type": "divider",
                  "values": {
                      "width": "100%",
                      "border": {
                          "borderTopWidth": "2px",
                          "borderTopStyle": "solid",
                          "borderTopColor": "#ffffff"
                      },
                      "textAlign": "center",
                      "containerPadding": "10px",
                      "hideDesktop": false,
                      "_meta": {
                          "htmlID": "u_content_divider_1",
                          "htmlClassNames": "u_content_divider"
                      },
                      "selectable": true,
                      "draggable": true,
                      "duplicatable": true,
                      "deletable": true,
                      "hideable": true
                  }
              }],
              "values": {
                  "backgroundColor": "",
                  "padding": "0px",
                  "border": {},
                  "_meta": {
                      "htmlID": "u_column_2",
                      "htmlClassNames": "u_column"
                  }
              }
          }],
          "values": {
              "displayCondition": null,
              "columns": false,
              "backgroundColor": "",
              "columnsBackgroundColor": "",
              "backgroundImage": {
                  "url": "",
                  "fullWidth": true,
                  "repeat": false,
                  "center": true,
                  "cover": false
              },
              "padding": "0px",
              "hideDesktop": false,
              "_meta": {
                  "htmlID": "u_row_2",
                  "htmlClassNames": "u_row"
              },
              "selectable": true,
              "draggable": true,
              "duplicatable": true,
              "deletable": true,
              "hideable": true
          }
      }],
      "values": {
          "textColor": "#000000",
          "backgroundColor": "#169179",
          "backgroundImage": {
              "url": "",
              "fullWidth": true,
              "repeat": false,
              "center": true,
              "cover": false
          },
          "contentWidth": "550px",
          "contentAlign": "center",
          "fontFamily": {
              "label": "Arial",
              "value": "arial,helvetica,sans-serif"
          },
          "preheaderText": "",
          "linkStyle": {
              "body": true,
              "linkColor": "#0000ee",
              "linkHoverColor": "#0000ee",
              "linkUnderline": true,
              "linkHoverUnderline": true,
              "inherit": false
          },
          "_meta": {
              "htmlID": "u_body",
              "htmlClassNames": "u_body"
          }
      }
  },
  "schemaVersion": 6
}

lucasbesen wrote this answer on 2021-07-22

@lukaszwnek thanks for your report. We could reproduce and a fix will be deployed soon.

lukaszwnek wrote this answer on 2021-07-22

@lucasbesen that's awesome, thank you so much for this lightning-fast reaction!

More Details About Repo
Owner Name unlayer
Repo Name react-email-editor
Full Name unlayer/react-email-editor
Language JavaScript
Created Date 2017-10-01
Updated Date 2022-12-05
Star Count 3598
Watcher Count 48
Fork Count 627
Issue Count 163

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date