Aligning numbers at decimal point angular ui grid

Question

I am looking at aligning numbers on the decimal point in Angular UI Grid like below.

    11.293
      .89
233424
      .34345

I have had a few ideas including a cell template with three aligned divs and using transparent 0s.

Has anyone had any luck with this.

Answer 1

I think that the best way is to select all the numbers with Javascript, then break them and encapsulate them in 2 span elements like this:

<div>
    <span class="int">11.</span><span class="float">293</span>
</div>
<div>
    <span class="int">233424.</span><span class="float">89</span>
</div>

Then you can assign a with to the elements and align the .int to right and .float to the left with css:

.int, .float{
    display: inline-block;
    width: 100px;
}
.int{
    text-align: right;
}
.float{
    text-align: left;
}

This way the selection is ok and div and span doesn't disturb the meaning of your html5 code. Also, you do not deppend on a fixed width font.

Hope this works, if not, please let me know.