Question
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***
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
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
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;
}
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
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?