CSS-repositioned content leaves a footprint

Question

I'm trying to automatically place an asterisk next to all my mandatory inputs. Because I'm using MVC and Bootstrap, I'm using this Javascript approach to add mark-up, and this CSS approach to add a FontAwesome asterisk.

The problem is that the resulting line-spacing goes awry:

screenshot

It seems the asterisk is originally placed on the line after the input because the input is 100% width. Then, when the CSS has moved the asterisk, the container height doesn't change.

This simplified example illustrates the problem: http://jsfiddle.net/s3zrpo84/2/

And here's my actual Javascript

function markRequired() {
    var parentForm;

    // look at every mandatory field
    $('input[data-val-required]').each(function () {

        // not all should be treated
        if ($(this).is("input:text") && !$(this).parent().hasClass("input-append") && !(this).hasAttribute("readonly")) {

            // wrap the element with a span whose purpose is to attract the CSS requiredaddon treatment
            $(this).wrap("<span class='requiredaddon'>");

            // locate the form containing the input (we will add a footnote later)
            var parentFinder = $(this)[0];
            while (parentForm == null && parentFinder != null) {
                if (parentFinder.tagName.toLowerCase() == "form") {
                    parentForm = parentFinder;
                }
                parentFinder = parentFinder.parentNode;
            }
        }
    });

    // add footnote to the form
    if (parentForm != null) {
        var rubric = $('<span>', { text: "denotes a mandatory field" })
        .addClass("requiredaddon");
        rubric.appendTo($(parentForm).parent());
    }
}

... and CSS (containing cruft because I'm still trying things out)

.requiredaddon {
    position: relative;
}
.requiredaddon:after {
    position: relative;
    font-family: FontAwesome;
    font-size: 0.7em;
    color: #cd402e;
    top: -25px;
    left:-12px;
    content: "\f069";
    clear: right;
    margin: 0;
    padding: 0;
    display: inline-block;
}

... and the .cshtml

<tr>
    <td>Sale Date</td>
    <td>
        <span class="requiredaddon">
            @Html.DropDownListFor(m => Model.Date, Model.GetSalesDateList(Model.Date), new {@class = "form-control"})
        </span>
    </td>
</tr>
<tr>
    <td>@Html.DisplayNameFor(item => Model.PriceString)</td>
    <td>@Html.TextBoxFor(item => Model.PriceString, new { @class = "form-control currency-0-decimals", placeholder = "Sale price" })</td>
</tr>
<tr>
    <td>@Html.DisplayNameFor(item => Model.Comment)</td>
    <td>@Html.TextBoxFor(item => Model.Comment, new { @class = "form-control", placeholder = "Comments" })</td>
</tr>

Apologies for the noob code.

EDIT

Following @Lars' suggestion I got this sorted. Using position: absolute, different browsers gave different vertical positions for the asterisks until I changed my CSS to this:

.requiredaddon {
    position: relative;
    vertical-align: bottom; /* added */
    display: inline-block; /* added */
    width: inherit; /* added */
}
.requiredaddon:after {
    position: absolute; /* as per Lars' solution */
    font-family: FontAwesome;
    font-size: 0.7em;
    color: #cd402e;
    top: 1.0em;
    left:-1.2em;
    content: "\f069";
}

score 1 · Accepted Answer · answered Feb 02 '15 at 11:21

Use position: absolute instead of position: relative.

position: relative will move the element without actually moving the dom box, so all other elements will behave (and be positioned) as if it was not moved.

You can use position: absolute instead, which removes the element completely from the box flow, so other elements will behave as if it was not there. But absolute positioning works a little different. It is relative to the first parent element that is not positioned statically (i.e. a parent element with position: relative).

CSS-repositioned content leaves a footprint

1 Answers1