How to change Glassmapper's BeginEditFrame enclosing html element

Question

I am using Glassmapper's BeginEditFrame method to make a treelist editable in Experience Editor. I am using

<%using (BeginEditFrame(Model, "Edit Location", x => x.Locations)) {%>
<% if (HasLocations) {%>
'some code here'
<% else if (Sitecore.Context.PageMode.IsExperienceEditor){ %>
+Add Locations 
<%} %>
<%} %>

+Add Location text should be presented as in inline element and get displayed fine in the preview mode but in Experience Editor, the following gets appended:

<div class="scLooseFrameZone scEnabledChrome" sc_item="sitecore://master/{553F90DF-AC07-4941-B605-6F5F40270C57}?lang=en&amp;ver=1" sc-part-of="editframe">
    <span class="scChromeData">{"commands":[{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest('webedit:fieldeditor(command={86DECE56-8BD2-4FCC-9992-627D812089F5},fields=Locations,id={553F90DF-AC07-4941-B605-6F5F40270C57})',null,false)","header":"Edit Fields","icon":"/temp/iconcache/people/16x16/cubes_blue.png","disabledIcon":"/temp/cubes_blue_disabled16x16.png","isDivider":false,"tooltip":"Edit the following fields: Locations","type":null}],"contextItemUri":"sitecore://master/{553F90DF-AC07-4941-B605-6F5F40270C57}?lang=en&amp;ver=1","custom":{},"displayName":"Edit Location","expandedDisplayName":""}</span>
    +Add Locations
</div>

This div makes the +Add Location text as a block element and it shows up in the next line.

Is there a way I can change the Edit Frames enclosing tag from block element to inline element?

Answer 1

I'm not sure if you can change the markup that's generated for Sitecore edit frames, but you could always style that specific edit frame differently.

For example, wrap your existing edit frame code in a new div:

<div class="edit-frame-inline">
    [your existing edit frame code here]
</div>

And then style that markup very specifically:

.edit-frame-inline div.scLooseFrameZone {
    display: inline;
}