CODEWITHSUNDEEP
javascripthtmlcss
David John Welsh
David John Welsh

Reputation: 1569

Dynamically-inserted content creates odd margin

I have a page that loads a list of values into a listbox. The values are retrieved from a database when the page loads, and the list is constructed using PHP.

After the page loads, the user can enter a new value and add it to the list via jQuery. The new list item is constructed as a DOM tree using jQuery, but it is identical in every way to the ones generated by PHP. I compared the two using the Chrome dev tools, and they are the same.

Anyway, this all works fine, except that one of the spans in the jQuery-inserted ones have a slightly different position.

An example

(the orange dotted lines are added for visual reference; they are outline values, so they don't affect the positioning of any of the elements)

I use the same classes for both, and I even checked the computed styles with Chrome. The list items inserted by PHP and the ones inserted by jQuery have exactly the same styles. And yet Smith Bob, the one inserted via jQuery, is not lining up.

What could be causing this?

I haven't posted any CSS because there is quite a lot, and I'm not sure how much help it would be. Since I've looked at each individual computed value and they are all identical, I'm thinking it may not be a CSS problem.

EDIT: [Removed test URL, as it resided on a server I don't control, and no longer seems necessary given the question has been answered]

The red 追加 buttons in the left-hand list should add items to the right-hand list, but they will appear not to line up, just like the image above.

Upvotes: 2

Views: 114

Answers (2)

enhzflep
enhzflep

Reputation: 13099

To be honest, I think there's a problem not with the user-inserted items, but rather with the ones that are inserted at page-load.

When I start the page in an english version of Chrome, the 'Currently Active Items' list is all screwed-up. Removing each of the items, before adding them again by clicking button with the red text makes the list look okay. It also makes the mouse hovering work correctly again, since each item exists on a single row, rather than 2 - 1 of which overlaps an adjacent element.

This is what I'm seeing. Left image is immediately after the page has loaded, right image has shows the list after clearing and re-populating.

enter image description here

Code added for completeness - promised in comment below. If it helps someone else, great!

<script>
<?php
    printf("var apartmentComplexes = { mArray : %s };", json_encode($apartmentComplexes));
?>

// an exerpt of what above statement produces
var apartmentComplexes = { mArray : [{"name":"Aria","description":"Uma das<br> mais exclusivas propostas de Porto ......

function myOnLoad()
{
    var numComplexes = apartmentComplexes.mArray.length;

    // do some other stuff with the apartmentComplexes object


    setPageApartmentComplex(0);
}

</script>

Upvotes: 1

besluitloos
besluitloos

Reputation: 269

With inline elements, it is possible you see the whitespace in your html code. you can test this. Create an unorderd list en make the li's inline (give them a BG color). Can you see the space? Now make them float-> boom, space is gone.

In your PHP code, the html is nicely formatted. your spans are inline elements, thus they show the (white)space. The HTML you insert via javascript isn't formatted, but concattenated with no spaces in between, so there is no whitespace to show.

So float your spans and your problem is fixed.

Upvotes: 1

Related Questions