Align values to right

[Thomas]

Hi
Is there a custom class for align the values to the right? I believe there is but I haven't found it. By default all values are aligned to left. But I need a table style design with description on the left and values on the right.

Thank you

[Erwin van der Zwart]

Hi Thomas,

Try this: (add to custom css and give text element additional class 'right-align' and you might need to adjust the min-width rule depending on your text  size)

Code:

.right-align {
    text-align: right !important;
    min-width: 150px;
}

BR,

Erwin

[Thomas]

Hi
thank you. Only a small modification because the change destroys touch visu and because I need different widths for different object sizes.
I have another question. Would it be possible to format numbers by CSS?  Actually my problem is brightness in lux. It's five digits number. Without a proper formatting it's hard to read such long number. 

Thank you

Code:

.usermode .right-align-100px {
   text-align: right !important;
   min-width: 100px;
}
.usermode .right-align {
   text-align: right !important;
   min-width: 150px;
}
.usermode .right-align-200px {
   text-align: right !important;
   min-width: 200px;
}

[Erwin van der Zwart]

Hi,

Not that i know, but you could create some dummy objects for this and format it with event script and write (grp.update) it to your dummy objects for your visu. I don't think these few extra objects will be a problem. In next FW you will also have virtual objects for this.

BR,

Erwin

[Thomas]

Thank you for the idea. I will probably use it because I need a solution. But that's not a correct solution because the format should depend on client's locale settings. The same problem is date format. I think it should be completely solved on Client's side. I remember jquery has some little support for a proper formatting. Mobile phones has support for input fields.nEtc.

[Erwin van der Zwart]

Hi,

I get your point and it would be possible, but the objects are compliant with the KNX standard and there is no localization on KNX telegrams. It would be possible to decode it on the client but you can have all kinds of different results on clients. Now you are sure the client always shows server side data and localisation is set on server. I also think it is almost never needed as you control your installation 99% local and/or within same time zone...

If you really need it you could solve it with custom javascript, also your lux value could be scaled / decoded client side with custom javascript..

BR,

Erwin

[Erwin van der Zwart]

Hi Thomas,

You could use this also to scale your Lux values on client side, this way you don't need the dummy objects and server side event based scaling (:

This code is for both PC tablet and Touch visu (see lines 8 and 10)

Code:

$(function(){
 
 function LuxScale(value, classname){  
   value= value / 1000;
   value = value.toFixed(2);
   value =  value  + " klx";
   // Update PC / Tablet visu
   $("." + classname + ".item-value").text(value);
   // Update Touch visu
   $("." + classname).find(".control-value").text(value);
 }
 
 // Listener on object 1/1/14 with custom classname "lux1" (East side)
 if (typeof grp != 'undefined') {
   grp.listen('1/1/14', function(object, state) {
    LuxScale(object.value, "lux1");
   }, false);
 }
 
 // Listener on object 1/1/15 with custom classname "lux2" (South)
 if (typeof grp != 'undefined') {
   grp.listen('1/1/15', function(object, state) {
    LuxScale(object.value, "lux2");
   }, false);
 }
 
 // Listener on object 1/1/16 with custom classname "lux3" (West)
 if (typeof grp != 'undefined') {
   grp.listen('1/1/16', function(object, state) {
    LuxScale(object.value, "lux3");
   }, false);
 }
 
});

BR,

Erwin

[Thomas]

Hi Erwin
Thank you for these perfect and inspirational examples. I see I can use jquery NumberFormatter plugin and format the "value". But will it work in trends and graphs?

[admin]

Another similar request is how to center value if value's width is larger than icon:
1. Add custom class centered to the required element
2. Add this to Custom CSS and adjust width/margin:

Code:

.usermode .centered .value {
  min-width: 200px;
  margin-left: -40px;
}

min-width = icon_width + margin * 2
margin-left = -margin
In this example, icon width is 120px, extra margin for value is 40px from both sides.

[Trond Hoyem]

Hi Thomas,

Try this: (add to custom css and give text element additional class 'right-align' and you might need to adjust the min-width rule depending on your text  size)

Code:

.right-align {
    text-align: right !important;
    min-width: 150px;
}

BR,

Erwin

Hi Erwin

I just tried this, but it did not change the alignment on my value objects. I have copied the code above to the CSS, and added 'right-align' to the additional classes for all values in a table created in a widget, but all values still has left alignment.

Is there something else I need to do in order to get this working?

Trond