CODEWITHSUNDEEP
htmlcss
IttayD
IttayD

Reputation: 29133

why do spans overlap

I have a table with a cell that contains two spans, the first containing a span and and input. I want these to overlap (I use them to create an edit-in-place). So I set the parent span positioning to relative and set their position to absolute with left: 0. When I do that, the second top span also moves to the left of the cell. Why? How to fix (I want the inner span and input to overlap)

UPDATE: Note that the input is used for edit-in-place, so the other span needs to be positioned after it. Otherwise, when I remove the visibility style (by toggling a class), then it will overwrite the second span. I've updated the fiddle, so it shows bot the span and the input.

Here's a fiddle: http://jsfiddle.net/jvyLtr82/5/

Here's the HTML:

<table>
    <tbody>
        <tr>
            <td>
                <span class="first">
                    <span>hi</span>
                    <input value="hi"/>
                </span>
                <span> there</span>
            </td>
        </tr>
    </tbody>
</table>

CSS:

.first {
    position:relative;
}

.first > * {
    position: absolute;
}
.first > span {

    left: 0;
}

.first > input {
    left: 0;
}

Upvotes: 1

Views: 1589

Answers (3)

Nandha
Nandha

Reputation: 695

If you dont want to enter data in the input field, try below

HTML:

  <table>
    <tbody>
        <tr>
            <td>
                <span class="first">
                    <span onclick='$(this).hide().next().show()'>hi</span>
                    <input value="hi" onclick='$(this).hide().prev().show()'/>
                </span>
                <span>there</span>
            </td>
        </tr>
    </tbody>
</table>

CSS:

.first >input {  
   display: none;
}

Here is the JSFiddle :http://jsfiddle.net/jvyLtr82/8/

If you want to enter data in input field, try below

HtML:

<table>
    <tbody>
        <tr>
            <td>
                <span class="first">
                    <span onclick='$(this).next().toggle().next().toggle()'>switch</span>
                    <span >hi</span>
                    <input value="hi"/>
                </span>
                <span>there</span>
            </td>
        </tr>
    </tbody>
</table>

CSS:

.first >input {  
   display: none;
}

Here is the JSFiddle:http://jsfiddle.net/jvyLtr82/10/

Upvotes: 1

dfsq
dfsq

Reputation: 193281

Because both span and input are absolutely positioned there is nothing to add to parent span width. Make only input positioned absolute and in edit mode make span hidden and input visible:

.first {
    position:relative;
}
.first > input {
    position: absolute;
    display: none;
}
.first.edit > span {
    display: none;
}
.first.edit > input {
    display: inline-block;
    position: relative;
}

Demo: http://jsfiddle.net/jvyLtr82/7/

Upvotes: 0

Dhruv Ramani
Dhruv Ramani

Reputation: 2643

Here is what you should do :

.first {
    position:relative;
}

.first > * {
    position: relative;
}
.first > span {

    left: 0;
}

Upvotes: 0

Related Questions