How to change length of span on show of edit controllers

Question

My div with controllers overflow span with text inside td. Can I make force span to margin from controllers div on their show?

Here what I need:

And here what I have:

Here is my code:

.controllers {
    position: absolute;
    right: 0px;
    top: -4px;
    display: none;
    transition: visibility 0.5s, opacity 0.5s linear;
    opacity: 1;
}

<tr onmouseover="document.getElementById('row2').style.display='block';" 
    onmouseout="document.getElementById('row2').style.display='none';">
    <td class="mdl-data-table__cell--non-numeric">2048</td>
    <td class="mdl-data-table__cell--non-numeric">Lorem text</td>
    <td class="mdl-data-table__cell--non-numeric">
        <div style="position: relative; vertical-align: top;">
            <span>Very long content Very long content Very long content Very long content Very long content Very long content</span>

            <div class="controllers" id="row2">
                <div class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="edit2">
                    <i class="material-icons">edit</i>
                </div>
                <span class="mdl-tooltip" for="edit1">Edit</span>
                <div class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="delete2">
                    <i class="material-icons">delete</i>
                </div>
                <span class="mdl-tooltip" for="delete2">Delete</span>
            </div>
        </div>
    </td>
</tr>

abluejelly · Answer 1 · 2017-04-06T16:11:59.893

Any display:inline; element (such as a non-redefined span) does not have a defined width.

Can you use floats? float:right;ing your buttons before outputting the content might do the trick:

http://dabblet.com/gist/7d8b25a7c18e956c77b1

div{
    background: #f06;
    background: linear-gradient(45deg, #f06, yellow);
    min-height: 100%;
}

.fr { float:right; }

<span class="fr"><button>Del</button><button>Edit</button></span>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id ornare mi. Duis id dapibus est. Integer egestas eleifend ipsum sed facilisis. Suspendisse rhoncus, quam quis ultricies rutrum, ipsum erat lobortis enim, vel ultrices purus diam non ligula. Donec ullamcorper orci malesuada, ornare orci mollis, vehicula tortor. Phasellus vitae pulvinar lacus. In eu odio nec est mollis ultrices eget rhoncus erat. Morbi pellentesque quam viverra egestas ullamcorper. Praesent tristique felis vel nibh pharetra varius. Ut ut luctus orci, vitae rhoncus velit. Fusce luctus, ligula eu fringilla venenatis, ipsum tellus elementum nisl, lobortis iaculis sapien quam cursus neque. Maecenas maximus finibus justo at blandit. Nam blandit scelerisque metus non facilisis. Vestibulum dictum eu eros vel accumsan. Duis massa leo, aliquam non ullamcorper eu, rhoncus et lacus.Proin pretium semper purus sit amet mollis. Sed non nibh vel diam tempor dapibus. Mauris dapibus augue augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam quis nulla massa. Donec sodales nisi urna, ac pharetra nibh gravida in. Vestibulum blandit sit amet massa ac vehicula. Duis nibh odio, ultricies quis leo eu, semper vestibulum mauris. Suspendisse egestas euismod augue non fermentum.Donec congue massa quis purus posuere, eu egestas nunc ullamcorper. Vestibulum pellentesque urna pulvinar, vestibulum augue quis, dictum mi. Donec sit amet tortor vel leo vulputate sollicitudin vitae nec mi. Curabitur euismod sed sapien in pellentesque. Curabitur eros tortor, porta non magna gravida, euismod ultricies velit. Aliquam varius magna diam. Sed feugiat sapien sit amet cursus semper. Praesent tincidunt, libero eget tristique finibus, ipsum purus pellentesque magna, et porttitor enim nisl quis arcu. Suspendisse lacinia eleifend pulvinar. Sed placerat euismod porta.Pellentesque rhoncus, enim sed commodo viverra, libero arcu dignissim nisl, sit amet rutrum erat libero quis nisi. Maecenas ornare hendrerit sagittis. Mauris posuere lorem ante, non aliquet turpis bibendum id. Praesent suscipit, justo eget porta mollis, leo dui blandit ex, et rutrum eros turpis ut sapien. Suspendisse dapibus sit amet sapien ac hendrerit. Suspendisse nec urna auctor, interdum ex quis, dictum lectus. Vestibulum sit amet mauris a dolor laoreet congue. Sed mollis, metus eu fringilla finibus, dolor ipsum posuere lacus, eget aliquam enim nisl id risus. Quisque vitae eros porta, molestie nibh ac, dictum purus. Curabitur blandit justo id hendrerit tempor.Mauris ut fermentum ante. Ut finibus efficitur massa vitae auctor. Nullam laoreet tristique felis et mattis. Praesent ultrices, libero eu sagittis facilisis, ipsum diam auctor mauris, non hendrerit justo massa ut augue. Vivamus varius ipsum id lorem cursus aliquet. Aliquam erat volutpat. Pellentesque fermentum mi vitae finibus placerat. Nunc blandit leo aliquam ullamcorper euismod. Donec varius et tortor sit amet euismod. Phasellus non ipsum in diam tristique fermentum id vitae tortor. 
</div>

NOTE: works with spans wrapping the content, too, I just used a div outta habit.

How to change length of span on show of edit controllers

1 Answers1