CODEWITHSUNDEEP
htmlcssangularjs
Ben Pretorius
Ben Pretorius

Reputation: 4319

Bizarre White Space Issue. HTML, CSS, Angular

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.

Upvotes: 2

Views: 1969

Answers (1)

Ian
Ian

Reputation: 91

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.

Upvotes: 9

Related Questions