Question
John Deere
IN
Last activity: 4 Oct 2018 13:54 EDT
Increase the height of DateTime control
Hi,
We are working on styling of application. One of the need is to increase the default height of all the controls like Text Input, Auto complete and Date Time.
We have already increased the height of Text Input and Auto complete using the skin rule. But Date time control does not provide any option on the actual field as well as in the skin.
Any way to achieve this?
**Moderation Team has archived post**
This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.
-
Like (0)
-
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
Pegasystems Inc.
IN
Hello Kunal,
Thanks for posting your query on PSC.
Could you please mention the version of Pega used at your end.
Is the related post(https://community.pega.com/support/support-articles/control-height-inconsistent) helpful at your end?
Regards,
Rincy
John Deere
IN
Thanks for the reply! Its V7.2 of PRPC.
I went through the article you mentioned but it's not helpful.
We are working on styling our application and have purposefully increased the height of controls. Date Time control does not give this facility and that is the problem.
John Deere
IN
Hi Rincy,
Any suggestion on this?
Pegasystems Inc.
IN
Hello Kunal,
As per Pega 7.2, I do not see we can increase the height of DateTime control. I tried adding height attribute to the cell's property as inline style. However, the change is not getting picked up. Adding padding attribute, does increases the space around DateTime control. I am still investigating and will keep you posted.
Regards,
Rincy
John Deere
IN
Thanks Rincy. Any hotfix Pega can provide? Its very critical for our app styling.
Pegasystems Inc.
IN
Hi Kunal
I'm unsure if we have any option at skin level to modify this but you can try out the below one. It worked fine for me kindly check.
Add below style in userWorkForm and specify your required height
<style>
.inactvDtTmTxt{
height:100px;
}
</style>
This change would reflect throughout. In case that is not wanted then probably you can add a non-auto generated section with the above style change and add that non-auto generated section in the required section that contains the dateTime control.
It would appear like below
John Deere
IN
Thanks for the reply Gouse. I tried with userWorkForm. Its not reflecting on actual work sections. Any extra setting required?
Steps I did,
1) save as user work form in my own appplication ruleset
2)Copied your js snippet
3) Ran the flow and checked on sections
Areteans Technologies
AU
You can include custom css which you can google it out!
John Deere
IN
Thanks Dharani. The snippet given by Gouse works when i create a custom section and put it into autogenerated section. But i want to apply it globally. Putting it in userWorkForm doesnt work for me.
Pegasystems Inc.
IN
Hi Kunal
Have you tried using height: 'x' pixel !important; in userWorkForm?
Starbucks
US
Hi Kunal,
Were you successful in applying the change globally? If yes, please let us know the approach you took.
Thanks!!