Question
Services Australia
AU
Last activity: 31 May 2017 15:52 EDT
customize Style for Required Element
Hi,
We want to style the required element, OOTB we see a Orange Star (RequiredStar.gif) when we select any control as required.
Wanted to check how can we customize the Orange star to some thing else like
***Moderator Edit: Vidyaranjan| Updated Categories***
Pegasystems Inc.
IN
Hi Vamshi,
If you wanted to replace the orange star with a different icon throughout the application, save as the requiredstar rule and upload a different gif.
Or is your requirement to add an icon before the label for the required?
Services Australia
AU
Hi
Sorry, got lost of this thread. Yes, my requirement is different. For a mandatory text input, we want to indicate with a red bar attached to the left of the input field in place of having a star for label. Is there a CSS . style sheet settings to achieve this
Vamshi
Pegasystems Inc.
IN
Hello Vamshi,
If you are looking for below requirement:
I could achieve this by adding below style in UserWorkForm:
<style>
span.iconRequired.standard_iconRequired {
background-image: url(images/requiredstar.gif);
background-repeat: no-repeat;
background-position: bottom left;
height: 8px;
width: 8px;
padding-left: 10px;
padding-bottom:20px;
color:green;
/*white-space: nowrap; */
}
div.field-item.dataValueWrite{
padding-left: 15px;
}
Regards,
Rincy
Virtusa Corp.
US
This is the simplest solution for your issue. Define the following CSS in your custom CSS to display the Mandatory Indicator as expected.
input[validationtype*="required"] {
border: none;
border-left: 3px solid red;
}
.iconRequired {
background: none;
}
Pegasystems Inc.
IN
Hello Vamshi,
Thanks for posting your query in PSC :)
Try to set the Dynamic layout properties with below:
Layout format as Inline labels left under General tab, Layout mode as 'Inline-block' under Presentation tab. I have modified the OOTB requiredstar.gif to vertical rectangular red bar.
At runtime, this would appear as below:
Does this meet your business requirement. Kindly verify and confirm.
Regards,
Rincy