Align Output Text values with labels on the left

Stu Leibowitz

May 11, 2016 at 5:27 am #1731

When I use the Output Text controls and place my labels on the left, the values are not aligned when the labels have different widths. Is there a way to set a fixed width for the label text so the value text is aligned (left justified)?

I was able to add CSS to get this to work correctly for Text controls, but it does not seem to work for Output Text.

It would be great to have this as a config property, but I’ll take CSS.   Working on a client POC this week…

EQuintanilla

May 12, 2016 at 9:30 am #1744

Hey Stu,

One way you could accomplish this is to use the Page Layout controls. You can use the Page Layout Row, then add 2 Page Layout Cells to it. In each cell you would add an Output Text. The first Output Text would be used for the label, and you would bind the second one to the string variable that contains your text. Doing this, you can use the “Width When in Row” configuration option of the Cell control to specify how wide you want each cell to be. If you structure each row with the same “Width” options, they will all align.

A few things to also make sure you do is to set the “Label Placement” of the second Output text to “Left”, and set the “Label Visibility” to “Hide”. And for the “Width When in Row” option, the total number for each row has to be 12.

Stu Leibowitz

May 12, 2016 at 6:32 pm #1761

Thanks for that suggestion.

But yikes, that’s a whole lot of controls!  Is there a simpler workaround using CSS?

Rackley Boren

May 13, 2016 at 3:51 pm #1790

Hi Stu,

I am not entirely sure of your use case as there isn’t much to go on from the first post, but if you are just looking for a quick way to align a single column of output text controls, take a look at the screenshot and explanation below. Note: If you are trying to also have other controls horizontally aligned with your output text controls, you will want to go with an approach more akin to Erick’s solution above.

Use the Appearance > Text Alignment configuration option with “Right” as your selection. This will throw the text as far to the right as your layout will allow. If you put your Output Text controls inside a layout control and set the width, you can limit how far over this will go. I would suggest a pixel setting so that the text doesn’t move if you are planning to adjust the screen size, otherwise you will end up with jumbled looking text. The downside to this is you might have to run through a few times to figure out how wide to set things. Erick’s approach is more robust, but this is certainly quicker.

Regards,

Rackley Boren

Ryan

July 31, 2017 at 11:07 am #4510

Hey Stu, worked out how to do this with the blue-washed Spark tk in 8.5.7 CF2017.06 (BPM UI Toolkit).  This description is here also -> http://www.evernote.com/l/AWP8QA76QG1EUqsqU3jEQexKdklxRKu4X0w/

this css allows you to set the width of the label and aligns the label and text value correctly vertically. for Output Text controls that have the Label placement: Left.

<style>
/* these styles apply to all Output Text controls on the page*/
/* this controls the output text label. */
.Output_Text>.form-group.label-left>span.control-label {
color: blue;
width: 200px;
display: block;
float: left;
margin-top: 7px;
}
/* this styles the output text value */
.Output_Text>.form-group.label-left>.input {
color: red;
}
</style>

then narrow down the css selector to only the Output Text control with the “label-align” class:

<style>
/* label-left is a custom class assigned to only the Output Text control we want to change. remove the reference to “.label-align” in this css and these styles will apply to all Output Text controls on the page*/
/* this controls the output text label. */
.Output_Text.label-align>.form-group.label-left>span.control-label {
color: blue;
width: 200px;
display: block;
float: left;
margin-top: 7px;
}
/* this styles the output text value */
.Output_Text.label-align>.form-group.label-left>.input {
color: red;
}
</style>