Bizarre White Space Issue. HTML, CSS, Angular

Question

I have a bizarre issue with the following code:

I save text that has been inputted using a areatext-box to a SQL DB. In the DB there are no leading or trailing white spaces.

When I then display the text inside a div using angular {{ model.text }}

it magically adds these weird leading and trailing white spaces:

<pre class="ng-binding">        Line1
Line2
Line3
Line4                            
    </pre>

as you can see in the pre tag there is leading and trailing spaces. Please note that this also happens when this is inside a div and is not restricted to the pre tags.

I am stumped..

I already tried a filter to remove leading and trailing spaces and also nuked all css on the parent containers.

this might come from your original, unrendered code, try removing all the whitespace there — Laura
– Laura, Commented Dec 19, 2014 at 14:26

Ian · Accepted Answer · 2016-11-14 15:45:09Z

9

I know this is an old question but I recently had the same issue and it was due to my use of line breaks and indents inside the <pre> tags. For instance, my original code looked like:

<pre>
    {{model.text}}
</pre>

This gave the results you described. My solution was to remove the line breaks and indents so that it was all on one line:

<pre>{{model.text}}</pre>

Doing so fixed the issue for me.

I understand your experience isn't limited to <pre> tags, but unfortunately, I don't have a good explanation for that. Just wanted to add an answer in case it helps someone down the road.

answered Nov 14, 2016 at 15:45

Ian

911 silver badge2 bronze badges

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

2 Comments

Ben Pretorius Over a year ago

Thanks for sharing Ian :-) It might be old today but tomorrow this might be new to someone else:)

kottartillsalu Over a year ago

Thanks, had the same ridiculous issue. I'm suck a good developer. Edit: lol, I suck too

Collectives™ on Stack Overflow

Bizarre White Space Issue. HTML, CSS, Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related