Clever Geek Handbook

Aligning numbers at decimal point angular ui grid

I am considering aligning numbers at the decimal point in the Angular UI grid as shown below.

    11.293
      .89
233424
      .34345

I had a few ideas including a cell template with three aligned divs and the use of transparent 0s.

Anyone got lucky with this.

+3


source to share


1 answer


I think the best way is to select all the numbers using Javascript, then split them and encapsulate them in two span elements, like so:

<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 an element with elements and align .int to the right and .float to the left using css:



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

This way the selection is ok and the div and span don't break the meaning of your html5 code. Also, you are not using a fixed-width font.

Hope it works, if not please let me know.

+1


source






More articles:


All Articles