pxRadioButtons control consumes large space in height and width

User Experience
, ,
1

Hello,

I want to have a radio button for each row in a table. However, I can’t adjust the height and width properly. System inserts large space as below, which makes UI strange. I want to remove unnecessary spaces.

Large space in height and width.png
Large space in height and width.png1255×612 17.8 KB

I am simply using the most standard radio button control, pxRadioButtons. Right after I specify the control, it consumes large space as below.

pxRadioButtons control.png
pxRadioButtons control.png901×414 25.3 KB

I tried changing the cell width and height to a smaller value, but it doesn’t work. What is the easiest solution to fix this?

Cell width and height.png
Cell width and height.png877×158 7.67 KB

Regards,

2

@CloeW938 in skin rule of the application you can set up padding and margin for the control.

3

@NehaM498

I have added padding and margin attributes to Radio buttons control in Skin rule as below. However, it is not reflected on screen. I also removed the default attribute “min-height” but there was no changes.

Radio Buttons skin.png
Radio Buttons skin.png1168×865 82.2 KB

Am I missing anything?

Regards,

4

@CloeW938

I do not know how to handle this by Skin rule, but we have fixed the same issue using inline style.

  1. First of all, make sure “Display row numbers” is not checked in the Table configuration (if this is checked, the further steps won’t work well).

Check off display row numbers.png
Check off display row numbers.png764×564 35.7 KB

  1. Select row in the Table and configure height directly in the inline style as below.
height: 30px

Row configuration.png
Row configuration.png1715×347 33.7 KB

  1. Select column in the Table and configure width and height directly in the inline style as below. Also, Filtering must be set to “None” (the default is “Auto”).
width: 30px; height: 30px

Column configuration.png
Column configuration.png1557×349 47.1 KB

  1. That’s it. The unnecessarily large space is now adjusted and UI should look good. The actual size may slightly differ per screen resolution and environent. In my desktop, width is 45px and height is 37.67px as below.

Radio button space fixed.png
Radio button space fixed.png1099×458 31.8 KB

Thanks,

5

@KenshoTsuchihashi

PEGA does provide the option to use the custom CSS styles in any field that use. There are OOTB styles already available for the same in PEGA. You can refer them in the presentation tab of the field. That should also avoid any custom inline style warning that you may get.

You can try searching with Padding / Margin or corresponding text of the style you want to apply.

6

@KenshoTsuchihashi

Thanks, this approach worked.

Regards,

7

@PrakashDeep

PEGA does provide the option to use the custom CSS styles in any field that use. There are OOTB styles already available for the same in PEGA. You can refer them in the presentation tab of the field. That should also avoid any custom inline style warning that you may get.

My team investigated this but they said it is not possible to accomplish this using CSS. If you think it is still possible, can you please paste a screenshot so I know the exact steps to follow?

Regards,