How can I adjust the margin between a value und a unit?

Ask Questions
1

Hello,

when displaying a value with a unit in mappView, there is always a huge gap in between. This is especially disturbing when using smaller font sizes. Like in this case where the value is in 12pt and the unit in 10pt
image

Analyzing this a bit I came across the brease_core.css, that has (in my case for a numeric output) the following settings:

.breaseNumericOutput.unitAlign-left .box-unit {
margin-right: 10px
}

.breaseNumericOutput.unitAlign-right .box-unit {
margin-left: 10px
}

Is there any way to adjust this?

2

Hi Markus, I checked but also couldn’t find a setting that would allow you to change that padding. I also checked in AS6 and while there are additional styling option for the unit display, padding to the value isn’t one of them :neutral_face:.

WDTC might be an option and creating you own custom copy with the modification.

Just for fun I came up with a “simple solution” that could easily be made into a compound widget that can also scale and has the same properties as a regular NumericInput with an additional setting for the unit padding.
The result looks pretty promising but it really is a pretty cumbersome workaround and should be necessary in my opinion.

image

If you want to take a closer look below is the code from my sample content. If you change the padding for the UnitOnly input you can “move” the unit closer to or further from the value.


<?xml version="1.0" encoding="utf-8"?>
<Content id="content_3" height="50" width="200" xmlns="http://www.br-automation.com/iat2015/contentDefinition/v2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Widgets>
    <Widget xsi:type="widgets.brease.NumericInput" id="numInputNoUnit" top="10" left="10" width="50" zIndex="2" showUnit="false" unitAlign="right" borderWidth="1px 0px 1px 1px" activeBorderWidth="2px 6px 2px 0px" textAlign="right" fontSize="12px" unitFontSize="10px" shadow="none" padding="0px 0px 0px 15px" />
    <Widget xsi:type="widgets.brease.NumericInput" id="numInputStandard" top="10" left="107" width="85" zIndex="0" unit="{'metric':'CEL','imperial':'CEL','imperial-us':'CEL'}" unitAlign="right" fontSize="12px" unitFontSize="10px" shadow="none" />
    <Widget xsi:type="widgets.brease.NumericInput" id="numInputUnitOnly" top="10" left="22" width="60" zIndex="1" unit="{'metric':'CEL','imperial':'CEL','imperial-us':'CEL'}" unitAlign="right" unitTextAlign="right" fontSize="12px" unitFontSize="10px" shadow="none" padding="0px 7px 0px 0px" />
  </Widgets>
</Content>

One additional comment, unless you need unit conversion the UnitOnly widget doesn’t need a binding to the same variable as the value display widget.

1 Like
3

Hi Marcel,

thank you for this “simple solution”. With that I can make my visu work!

However, I still consider this either as a missing feature, or even as a bug.
For larger font sizes, the default widgets are fine, but not for smaller ones.

4

100% agreed glad I was able to help out in the meantime!