CODEWITHSUNDEEP
javascriptjqueryhtmlcss
aborted
aborted

Reputation: 4541

HTML appended through jQuery doesn't receive margin

I have a normal HTML page that contains some boxes which have a little margin from each other:

With margin

When an user scrolls down, the page automatically loads more images through AJAX and appends more boxes to the page, but they are glued to each other:

Without margin

They actually have the same HTML and they shouldn't be looking like that. This is the HTML of a box that comes directly with the page:

<div class="images inner">
{% for image in S_IMAGES %}
<span class="image{% if loop.last %} last-box{% endif %}">
    <div class="close" aria-hidden="true">&times;</div>
    <section class="row">

            <div class="col-lg-12 center upload-output">
                <br /><br />

                <div class="img-container">
                    <div class="helper"></div>
                    <a href="{{ S_IMAGES_PATH }}{{ image.image_name }}.{{ image.image_extension }}" class="lightview" data-lightview-group="images">
                        <img src="{{ S_THUMBS_PATH }}{{ image.image_name }}.{{ image.image_extension }}" class="img-thumbnail">
                    </a>
                </div>
            </div>

    </section>
    <hr />
    <div role="form">
        <div class="form-group">
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" onclick="this.select();" value="{{ S_WEB_PATH }}image/{{ image.image_name }}" readonly>
                <span class="input-group-addon">View</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" onclick="this.select();" value="{{ S_IMAGES_PATH }}{{ image.image_name }}.{{ image.image_extension }}" readonly>
                <span class="input-group-addon">Direct</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" onclick="this.select();" value="{{ S_THUMBS_PATH }}{{ image.image_name }}.{{ image.image_extension }}" readonly>
                <span class="input-group-addon">Thumb</span>
            </div>
        </div>
    </div>
</span>
{% else %}

{% endfor %}
</div>

And this is how I append the additional boxes with jQuery:

for (var key in response.images) 
{
    var image = response.images[key];

    var imageHTML = '<span class="image' + ((imagesLength == key) ? ' last-box' : '') + '">';
    imageHTML += '<div class="close" aria-hidden="true">&times;</div>';
    imageHTML += '<section class="row">';
    imageHTML += '<div class="col-lg-12 center upload-output">';
    imageHTML += '<br /><br />';
    imageHTML += '<div class="img-container">';
    imageHTML += '<div class="helper"></div>';
    imageHTML += '<a href="' + generate_site_url() + 'store/i/' + image.image_name + '.' + 
                  image.image_extension + '" class="lightview">';
    imageHTML += '<img src="' + generate_site_url() + 'store/t/' + image.image_name + '.' + 
                  image.image_extension + '" class="img-thumbnail" />';
    imageHTML += '</a>';
    imageHTML += '</div>';
    imageHTML += '</div>';
    imageHTML += '</section>';
    imageHTML += '<hr />';
    imageHTML += '<div role="form">';
    imageHTML += '<div class="form-group">';
    imageHTML += '<div class="input-group input-group-sm">';
    imageHTML += '<input type="text" class="form-control" onclick="this.select();" value="' + generate_site_url() + 'image/' + image.image_name + '" readonly>';
    imageHTML += '<span class="input-group-addon">View</span>';
    imageHTML += '</div>';
    imageHTML += '<div class="input-group input-group-sm">';
    imageHTML += '<input type="text" class="form-control" onclick="this.select();" value="' + generate_site_url() + 'store/i/' + image.image_name + '.' + image.image_extension + '" readonly>';
    imageHTML += '<span class="input-group-addon">Direct</span>';
    imageHTML += '</div>';
    imageHTML += '<div class="input-group input-group-sm">';
    imageHTML += '<input type="text" class="form-control" onclick="this.select();" value="' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" readonly>';
    imageHTML += '<span class="input-group-addon">Thumb</span>';
    imageHTML += '</div>';
    imageHTML += '</div>';
    imageHTML += '</div>';
    imageHTML += '</span>';

    $('.images').append($(imageHTML));
    $('.image').slideDown('fast');
}

LESS for such a box:

span.image {
    padding: 15px;
    width: 271px;
    height: auto;
    display: inline-block;
    border: 1px solid @lighten; 
    background-color: lighten(@lighten, 6%);
    overflow: hidden;
    cursor: default;
    position: relative;

    @media (max-width: 1200px){
        width: 296px;
    }

    @media (max-width: 992px){
        width: 336px;
    }

    @media (max-width: 768px){
        width: 432px;
    }

    .img-container {
        width: 130px;
        height: 130px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 4px;
        /* background-color: lighten(@light-grey, 10%);
        padding: 5px;
        border: 1px solid @light-grey; */

        .helper {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    }

    .close {
        position: absolute;
        top: 8px;
        right: 8px;
        cursor: pointer;
        z-index: 500;
        width: 16px;
        height: 16px;
    }

    img {
        max-width: 125px;
        max-height: 125px;  
    }
}

What is it that I'm not seeing which is making those boxes stick to each other?

Help would be appreciated.

EDIT

Here's the HTML which was copied from the rendered browser format (Console):

<span class="image" style="">
    <div aria-hidden="true" class="close">×</div>
    <section class="row">

            <div class="col-lg-12 center upload-output">
                <br><br>

                <div class="img-container">
                    <div class="helper"></div>
                    <a data-lightview-group="images" class="lightview" href="http://localhost/imgzer/store/i/e9K7P8V3z6o4.jpg">
                        <img class="img-thumbnail" src="http://localhost/imgzer/store/t/e9K7P8V3z6o4.jpg">
                    </a>
                </div>
            </div>

    </section>
    <hr>
    <div role="form">
        <div class="form-group">
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/image/e9K7P8V3z6o4" onclick="this.select();" class="form-control">
                <span class="input-group-addon">View</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/store/i/e9K7P8V3z6o4.jpg" onclick="this.select();" class="form-control">
                <span class="input-group-addon">Direct</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/store/t/e9K7P8V3z6o4.jpg" onclick="this.select();" class="form-control">
                <span class="input-group-addon">Thumb</span>
            </div>
        </div>
    </div>
</span>

And this is another box from the console, but which gets added later through AJAX:

    <span class="image" style="">
    <div aria-hidden="true" class="close">×</div>
    <section class="row">
        <div class="col-lg-12 center upload-output">
            <br><br>
            <div class="img-container">
                <div class="helper"></div>
                <a class="lightview" href="http://localhost/imgzer/store/i/l1I6a4Z1u9L7.jpg">
                    <img class="img-thumbnail" src="http://localhost/imgzer/store/t/l1I6a4Z1u9L7.jpg">
                </a>
            </div>
        </div>
    </section>
    <hr>
    <div role="form">
        <div class="form-group">
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/image/l1I6a4Z1u9L7" onclick="this.select();" class="form-control">
                <span class="input-group-addon">View</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/store/i/l1I6a4Z1u9L7.jpg" onclick="this.select();" class="form-control">
                <span class="input-group-addon">Direct</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/store/t/l1I6a4Z1u9L7.jpg" onclick="this.select();" class="form-control">
                <span class="input-group-addon">Thumb</span>
            </div>
        </div>
    </div>
</span>

The question

Does anyone have a nice workaround for this? How do I make those boxes look normal? Any help would be appreciated.

Upvotes: 1

Views: 127

Answers (1)

James Montagne
James Montagne

Reputation: 78650

In the original HTML code you have spaces between your elements. When you build the string, your elements are immediately one after another with no space at all.

Add a space:

imageHTML += '</span> ';

No space: http://jsfiddle.net/uwE7X/

Space: http://jsfiddle.net/uwE7X/1/

Upvotes: 1

Related Questions