:after when inserting html through JavaScript

Question

I'm creating a website that loads content from a db through an ajax call and then writes the data by creating elements and appending them to their parent.

It is currently not working correctly as can be seen in the images below, but when I manually add the HTML using the developer tools, everything works fine.

This is how it should appear,

correct

This is how it currently appears,

incorrect

What am I doing wrong?

( jsFiddle )

var thumbsDIV = document.createElement('div');
thumbsDIV.className = 'Thumbs';
for (var i = 0; i < this.pictures.length; i++) {
  var pictureID = this.pictures[i].pictureID;
  var thumbDIV = document.createElement('div');
  thumbDIV.className = 'Thumb';
  var thumbIMG = document.createElement('img');
  thumbIMG.id = 'Review_' + this.iD + '_Picture_' + this.pictures[i].pictureID;
  thumbIMG.src = this.pictures[i].picture;
  thumbIMG.border = '0';
  thumbDIV.appendChild(thumbIMG);
  thumbsDIV.appendChild(thumbDIV);
}
picturesDIV.appendChild(thumbsDIV);
parentDIV.appendChild(picturesDIV);

.Thumb {
  display: inline-block;
  margin-bottom: 5px;
  width: 15%;
  cursor: hand;
  cursor: pointer;
  zoom: 1;
  *display: inline;
}
.Thumbs:after {
  content: "";
  width: 100%;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.Thumb img {
  width: 100%;
}

<div class="Thumbs">
  <div class="Thumb" onClick="ViewThumb(1,1)">
    <img src="http://smakelynn.com/images/pictures/pic2.png" id="Review_1_Picture_1" border="0" title="Voorgerecht">
  </div>
  <div class="Thumb" onClick="ViewThumb(1,2)">
    <img src="http://smakelynn.com/images/pictures/pic1.png" id="Review_1_Picture_2" border="0" title="Hoofdgerecht">
  </div>
  <div class="Thumb" onClick="ViewThumb(1,3)">
    <img src="http://smakelynn.com/images/pictures/pic3.png" id="Review_1_Picture_3" border="0" title="Dessert">
  </div>
  <div class="Thumb" onClick="ViewThumb(1,4)">
    <img src="http://smakelynn.com/images/pictures/pic4.png" id="Review_1_Picture_4" border="0" title="Tafeldekking">
  </div>
  <div class="Thumb" onClick="ViewThumb(1,5)">
    <img src="http://smakelynn.com/images/pictures/pic5.png" id="Review_1_Picture_5" border="0" title="Sfeerbeeld">
  </div>
</div>

You want the content: to go after .Thumbs and not .Thumb? Or is that a typo? — user1106925
– user1106925, Commented Jul 13, 2015 at 19:29
...well anyway, either way the content: works for me after JS. One difference in your layout is that you no longer have a whitespace text node after every .Thumb element. Also, your onclick is going to fail to give the desired result, but that's a different issue. — user1106925
– user1106925, Commented Jul 13, 2015 at 19:37
hey guys, i put it in jsfiddle where you can see the difference. The issue is indeed the missing space in between the images that seems to be due to the elements being inserted one after another (if you put an enter after each '.Thumb' div, the spacing magically appears) — Mats Raemen
– Mats Raemen, Commented Jul 13, 2015 at 19:43
You do not want to do this. Use flexbox instead. css-tricks.com/snippets/css/a-guide-to-flexbox — Stephan Bijzitter
– Stephan Bijzitter, Commented Jul 13, 2015 at 19:47
Found the solution in stackoverflow.com/questions/6048561/… — Mats Raemen
– Mats Raemen, Commented Jul 13, 2015 at 20:39

Community · Accepted Answer · 2017-05-23 11:44:00Z

0

Your ':after' code isn't affecting the side margin of your images. By removing it, they remain the same and what's affected is the height between the two set of images.

What's happening here is the commonly known space between two divs. When you write this:

<div>HI</div>
<div>WORLD</div>

a blank space is created in the middle of the two divs, because of that paragraph. Whilst on JavaScript, that paragraph isn't humanly added.

If you remove your space between those divs, such as:

<div>Hi</div><div>
WORLD</div>

that no longer happens. As you can see on this update to your fiddle: https://jsfiddle.net/vqe4fth5/8/

Both images are exactly the same. If you want to add some styling to the images, just add 'margin-left' on the '.Thumb' class.

There are a couple solutions to that whitespace too. Here is one: Remove "whitespace" between div element

If the spacing is intended to be there, add

margin-right: 5px

to the .Thumb class in the CSS. Or if you want them to split evenly, instead of simple div's, use a div with display:table.

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jul 13, 2015 at 19:44

Ted

5704 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mats Raemen Over a year ago

Yeah, the spacing is supposed the be there as it spreads the images evenly across the parent.

Mats Raemen Over a year ago

because doing it like this automatically sets the margin in between images so that I don't need to calculate what the margin should be depending the screen size

Ted Over a year ago

For that you can use display:table. Check the end of my answer. Display table automatically fits stuff inside, if given instructuions too.

Abdul Ahmad · Accepted Answer · 2015-07-14 04:31:08Z

0

an alternative would be to set up a column structure if you know how many images are on each row. If you always have 5 images, you can have 1/5 size columns of your parent's 100% width.

And inside each column, have a div that serves as the content of the column, which should be about 85% of the column width so that you automatically have spaces between each image.

this way you're not technically calculating the exact size of each image and the spaces between, they get calculated for you.

and if you're using img tags, set their width:100% and height:auto so that they will take full width, and their height will maintain its ratio

here's and example of what I'm talking about http://jsfiddle.net/7zm8mawh/1/

answered Jul 14, 2015 at 4:31

Abdul Ahmad

10.1k16 gold badges76 silver badges136 bronze badges

Collectives™ on Stack Overflow

:after when inserting html through JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related