Repeat buttons are overlapping

Discussion about MagicEdit features, modules, applications, and HowTos.

Repeat buttons are overlapping

Postby capsityjeff » Mon May 06, 2013 3:54 pm

Tried to create a gallery page with one repeating instance of a fancybox. The float: left seems to be causing the ME Repeat buttons to overlap, but then I'm not sure how to get the gallery to be horizontal.

Any feedback or assistance would be appreciated!

Here's the sample code we were using:

Code: Select all
<magicrepeat me_name="testing">
    <div style="padding:10px; float:left;">
            <a class="fancybox" rel="gallery" cl_image="$image" cl_effects="maxsize=800,600,1" cl_title="$caption">
                <img magicedit me_name="image" src="http://placehold.it/150x150" cl_alt="$caption" width="200" height="200" />
        </a>
      <p cl_visible="=CLManager.activeAccount:isAdmin||$caption"><magicedit me_name="caption" me_plain>Caption</magicedit></p>
    </div>
</magicrepeat>
<div class="clearfix"></div>
capsityjeff
 
Posts: 1
Joined: Mon May 06, 2013 3:43 pm

Re: Repeat buttons are overlapping

Postby raw10 » Tue May 07, 2013 4:38 pm

Well, the repeat buttons are generally placed after the element that is repeated, unless this results in invalid HTML. You can take advantage of this fact and use a different HTML element, in this case a UL.

Try setting up your repeated elements as <li>s instead of <div>s. MagicEdit knows to put the repeat buttons inside the <li>, because putting them outside would be invalid. Then, if the elements are floated the buttons will stay with the elements that are floated instead of dropping outside.

Here's how the code might look:

Code: Select all
<ul style="list-style-type:none; margin:0; padding:0">
  <magicrepeat me_name="testing">
    <li style="padding:10px; float:left;">
      <a class="fancybox" rel="gallery" cl_image="$image" cl_effects="maxsize=800,600,1" cl_title="$caption">
        <img magicedit me_name="image" src="http://placehold.it/150x150" cl_alt="$caption" width="200" height="200" />
      </a>
      <p cl_visible="=CLManager.activeAccount:isAdmin||$caption"><magicedit me_name="caption" me_plain>Caption</magicedit></p>
    </li>
  </magicrepeat>
</ul>
<div class="clearfix"></div>


The <magicrepeat> tags will be removed when the page is rendered, so you will see valid HTML on the page as delivered to the browser. You would probably want to take out those inline styles and put them in an external CSS file, too.

Another instance of how MagicRepeat buttons might be used is when <magicrepeat> wraps table rows. MagicEdit knows that the buttons can't show up in between rows, so it traverses backwards to the first actual table cell it finds and inserts the buttons there. That lets you easily create, sort, and delete table rows.
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm


Return to MagicEdit Discusson

Who is online

Users browsing this forum: No registered users and 1 guest

cron