Question

I’m getting some unexpected behaviour with white spacing when using knockout.js and creating elements through foreach : I’m getting an unexpected amount of large and irregular spacing between the elements I’m creating.

Here’s the code at JSFiddle: http://jsfiddle.net/upnD8/

If I comment out the white-space: pre-wrap, I’d get what I want: a listing of elements tightly packed together on different lines one after the last. However, I’d be doing so at the cost of being unable to preserve any reoccurring white spaces in text that I may have purposely inserted.

Any ideas as to why this is happening and how I could go about solving this?

I’ve only just started using knockout.js; any other related comments on javascript, etc. are also much welcome.

Answer 1

The whitespace you’re seeing is the whitespace between the DIV’s. Two solutions I can think of:

• move the pre-wrap to the generated DIV’s (http://jsfiddle.net/upnD8/2/)
• remove whitespace between the DIV’s by ‘tucking’ the elements together (http://jsfiddle.net/upnD8/1)