Edit and Add New buttons are piled on top of each other

Hi all,

I have an email template where a user can add a lot of different blocks (Title, Subtitle, Image, Button, Divider etc...) A new element I just added was a table aligned right that would have all other elements wrap around it. This seems to work fine so far (I am still in testing mode) but I noticed that CM Edit, Move and Add New button blocks are all piled on top of each other and makes it impossible to edit any of the blocks. Is there a way to move these edit blocks or any other way to edit the content? I would love to see something where you can click on any of the content and the editor pops up (like when you click on an image and the editor pops up). If you have a lot of content areas, these edit buttons are all over the place and they cover content and sometimes it's hard to discern what edit block is for a specific content block (I know the edit blocks highlight a green colour when you rollover the content but this is still hard to see sometimes)

Any suggestions?

Chris

oneblackcrayon oneblackcrayon, 5 years ago

Can you post your code so I can see what is going on?
It may be an overlap in tables or a css issue.

Mindsplit, 5 years ago

Hi Crayon,

Here is the whole repeater code. The only one that is causing the problem is the table aligned right.

<repeater>
              
              <layout label="Callout Box">
              <div style="display: block;">
               <table width="200" border="0" cellspacing="0" cellpadding="0" align="right">
                <tr>
                  <td align="left"><table width="180" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td align="left" bgcolor="#b7a983" class="calloutTitle"><span>
                        <singleline label="Title">Title</singleline>
                      </span></td>
                    </tr>
                    <tr>
                      <td align="left" bgcolor="#b7a983" style="padding: 0 10px;"><img src="images/callout-image.gif" width="160" height="100" editable="true" label="Image" /></td>
                    </tr>
                    <tr>
                      <td align="left" class="calloutCaption"><span>
                        <multiline label="Image Caption">Image caption</multiline>
                      </span></td>
                    </tr>
                    <tr>
                      <td align="left" bgcolor="#b7a983" class="calloutContent"><span>
                        <multiline label="Content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
                      </span></td>
                    </tr>
                    <tr>
                      <td style="background-color: #b7a983;"><table width="180" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td style="padding-left: 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td width="1%" class="btnLinkWhite"><singleline label="Link Text">Learn More</singleline></td>
                              <td width="99%"><img src="images/btn-right-white.gif" width="30" height="28" editable="true" label="Button Image" style="display: block;" /></td>
                            </tr>
                          </table></td>
                        </tr>
                        <tr>
                          <td><img src="images/spacer.gif" width="25" height="10" style="display: block;" /></td>
                        </tr>
                      </table></td>
                    </tr>
                    <tr>
                      <td colspan="2"><img src="images/spacer.gif" width="25" height="15" style="display: block;" /></td>
                    </tr>
                  </table></td>
                </tr>
              </table>
              
              </div>
</layout>


              <layout label="Title">
              <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" class="title"><singleline label="Title" repeatertitle="true">Title</singleline></td>
  </tr>
  <tr>
    <td><img src="images/spacer.gif" width="25" height="15" style="display: block;" /></td>
  </tr>
</table>
</layout>

<layout label="Subtitle">
              <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="left" class="subtitle"><strong><singleline label="Title">Subtitle</singleline></strong></td>
                  </tr>
                <tr>
                  <td><img src="images/spacer.gif" width="25" height="15" style="display: block;" /></td>
                </tr>
              </table>
</layout>

<layout label="Content">
              <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="left" class="mainBody"><multiline label="Description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline></td>
                  </tr>
                <tr>
                  <td><img src="images/spacer.gif" width="25" height="15" style="display: block;" /></td>
                </tr>
              </table>
              </layout>
              
              <layout label="Button">
              <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td style="padding-left: 20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="1%" class="btnLinkGreen"><singleline label="Link Text">Learn More</singleline></td>
                      <td width="99%"><img src="images/btn-right-green.gif" width="30" height="28" editable="true" label="Button Image" style="display: block;" /></td>
                    </tr>
                  </table></td>
                </tr>
                <tr>
                  <td><img src="images/spacer.gif" width="25" height="15" style="display: block;" /></td>
                </tr>
              </table>
              </layout>

</repeater>

Thanks!

Chris

roshodgekiss roshodgekiss, 2 years ago

Hey there Chris, we've been having this same issue with a couple of other customers, so just wanted to update this thread. Usually this editor issue is caused by there being an align= attribute on the tables in a repeater. You may want to try removing the align="left" instances - if after playing with the code, you still see this issue, kindly get in touch with our team and we'll happily look into it.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098