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
Rajdeep Dosanjh
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
Vandervals
source
to share