[Plugin: Page.ly MultiEdit] Resolved: Admin menu buttons break in middle when line wraps

When I created 9 editable areas for one template the Admin area tabs broke in the middle because the CamelCase in the main php file was adding spaces between words. Here’s the problem: Screen Shot of Broken Admin Menu

I worked for over 2 hours trying all types of solutions, from removing the CamelCase to adding spaces between items to changing from span’s to li’s… ugh! I finally went back to the drawing board and found a pure CSS solution. The trick is telling the span to display: inline-block.

Here is a screen shot of my Admin menu now: Screen /Shot of my CSS fix

And here is the CSS:

#multiEditControl {
    display: block;
    height: auto;
    margin: 0;
}
#multiEditControl span.multieditbutton {
    background: none repeat scroll 0 0 #F1F1F1;
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 1px 1px 1px 1px #CCCCCC inset;
    color: #21759B;
    cursor: pointer;
    display: inline-block;
    margin: 3px 5px 6px;
    padding: 6px 10px;
    -webkit-box-shadow: inset 2px 2px 3px 3px #ddd;
    -moz-box-shadow: inset 2px 2px 3px 3px #ddd;
    box-shadow: inset 2px 2px 3px 3px #ddd;
}

#multiEditControl span.multieditbutton:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #21759B;
    -webkit-box-shadow: 2px 3px 4px 1px #AAAAAA;
    -moz-box-shadow: 2px 3px 4px 1px #AAAAAA;
    box-shadow: 2px 3px 4px 1px #AAAAAA;
    padding: 6px 10px;
}
#multiEditControl span.multieditbutton.selected {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #21759B;
    -webkit-box-shadow: 2px 3px 4px 1px #AAAAAA;
    -moz-box-shadow: 2px 3px 4px 1px #AAAAAA;
    box-shadow: 2px 3px 4px 1px #AAAAAA;
    padding: 6px 10px;
}

Hope this helps someone else.

Trishah

https://www.ads-software.com/extend/plugins/pagely-multiedit/