CODEWITHSUNDEEP
htmlangularjscssjustify
Robin Timman
Robin Timman

Reputation: 519

Html css justify glitch with angularJS

I am trying to make a element with inner elements that should be justified.

Now is the problem that when I generate the elements with AngularJS text-align justify does not works anymore.

I've made a example that simulate it:

http://jsfiddle.net/2AaWf/1/

.container {
   text-align: justify;
}
span, a {
   display: inline-block;
}

Is there anything I can change in AngularJS or with CSS.

How can i do this ?

AngularJS code:

<a ng-repeat="tag in tags" href="#">{{tag.name}}</a>

tags is just a javascript array:

[{"id":"1","name":"Tag name","count":"1","weight":2}]

Upvotes: 4

Views: 1743

Answers (1)

Pete
Pete

Reputation: 3254

Analysis

I was stumped when I first saw this, but after some digging, I found out why. This question is somewhat related to this question. Just to quote:

In general, a line break is equivalent to a space in HTML. There are some exceptions, and according to formal rules on line breaks, the break should be ignored on two accounts (it immediately follows a start tag and immediately precedes an end tag). But browsers never implemented such features properly, so they treat your markup as equivalent to ...

What is going on here, is that in your second example, each item is placed next to the next item without any white space. Without any white space, the browser treats it as a continuous word.

He<b>llo, Wo</b>rld!

Is rendered inline:

Hello, World

In your case, the following code:

<a href="#">Lorem ipsum</a><a href="#">Lorem ipsum</a><a href="#">Lorem ipsum</a><a href="#">Lorem ipsum</a><a href="#">Lorem ipsum</a><a href="#">Lorem ipsum</a>

Is rendered inline as 

Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum

So it treats the whole thing as one inline box.

Solution

Below is a solution, but I'm not sure why it works. Essentially, you want to wrap your anchors and force a white space character into your template. The interesting thing is that if you replace the <b> with a <span>, the whole thing breaks again. This makes no sense to me as both <b> and <span> are inline elements. jsfiddle

If someone with more in-depth knowledge on why <b> and <span> makes a difference, please let me know. I tried messing around with the css for <span>, but the results are always the same.

Angular Template:

<div ng-app="app" ng-controller="ctrl" class="container">
    <b ng-repeat="tag in tags">
        <a href="#">{{tag.name}}</a>
    </b>
    <span class="last-child"></span>
</div>

CSS

.container {
    width: 100%;
    text-align: justify;
}

.container b {
    font-weight: normal;
}

.container a, .container span {
    display: inline-block;
}

.last-child {
    width: 100%;
}

Upvotes: 1

Related Questions