How to Increase the height and width of DateTime control on PEGA 7.2
Hey all,
i m working on design, and I want to modify the Date Control. I need to change the color, the height and width, as you can see below.
Could you please help me with this?
Regards;
Hasnaa
Pegasystems Inc.
US
Hello,
Please have a look at the following support article:
As mentioned in the article, you should consider creating a custom class, and reference this class in the Advanced Presentation options for the DateTime control. You can define your custom CSS for the class in the UserWorkForm HTML fragment, or add a custom stylesheet to your application skin.
Regards,
Brian
Northbridge
CA
Hi Hasnaa,
For a custom image to the right side of date-time control, make use 'background-image' style of inactvIcon class.
Refer screenshot-1
For height, width and border etc., Add a custom class(for suppose "test") to date-time field both for read-only and read-write styles in presentation tab or can create a new format in SKIN.
Then making use of the test class, add something like below in your application SKIN css, or css referred in harness or Userworkform. Below style is only to set the height. You can play around with other styles for width and border according at your requirement.
Refer screenshot-2
Hi Hasnaa,
For a custom image to the right side of date-time control, make use 'background-image' style of inactvIcon class.
Refer screenshot-1
For height, width and border etc., Add a custom class(for suppose "test") to date-time field both for read-only and read-write styles in presentation tab or can create a new format in SKIN.
Then making use of the test class, add something like below in your application SKIN css, or css referred in harness or Userworkform. Below style is only to set the height. You can play around with other styles for width and border according at your requirement.
Refer screenshot-2
- min-height: 40px;