Question
Cognizant Technology Solutions
IN
Last activity: 3 Sep 2019 9:43 EDT
Float or display labels on field focus
We have a requirement to display the field labels on top of the fields on field focus.
I couldn't find any ways to implement this, as the pega input field structure is different from other illustrated methods (bootstrap).
Pega input field structure:
Labels display on focus works for below code:
We have a requirement to display the field labels on top of the fields on field focus.
I couldn't find any ways to implement this, as the pega input field structure is different from other illustrated methods (bootstrap).
Pega input field structure:
Labels display on focus works for below code:
<div class="form-floating-label">
<input type="email" id="email" name="email" required>
<label for="email">Email float up</label>
</div>
Open source link for illustration-->https://foundation.zurb.com/building-blocks/blocks/form-floating-label.html
Any suggestions?
-
Like (0)
-
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
Cognizant Technology Solutions
IN
Hi all,
Is there any suggestion on this?
Pegasystems Inc.
AU
Hi Vignesh,
Looks like you have to create a custom control to achieve this.
To create a custom control
1. Records - User Interface - Control - Create a new control
2. Go To HTML tab in control - Uncheck Auto-Generated checkbox, Select Generate for JSP, You can paste your codes inside HTML source panel.
Let me know if you need more help on this.
Evonsys
IN
Hi,
Create an non-autogenerated section and then you can add the working html code in the section.This will show up the same code in the DOM.
Pegasystems Inc.
IN
Hi Vignesh,
Currently we do not support the capability of floating label directly. To get such style it would be difficult to go with the auto generated styles. Hence you can opt for a non autogenerated section with your own styles on top of it. To create a non autogenerated section you can simply check the radio button for "non-autogenerated" and create and style the section as required.
JPMC
IN
We also have a similar requirement. And we can see something similar already impemented in PDN itself, is that a custom code and not available in pega 8.2 also OOB?
Techmahindra
CA
Hi Ashish,
I have a similar requirement for my project, did you find a solution for this? if so can you share it?
Techmahindra
CA
Hi Vignesh,
I have a similar requirement for my project, did you find a solution for this? if so can you share it?
Pegasystems Inc.
AU
Hi Praveend,
Currently, we don't have any ootb control for the floating labels.
However, I have created a custom control similar to your requirement which can be used, By following the below steps. Or download the steps.doc
1. Create the custom control with the Below Code.
For Creating Custom control,
- Go-To Records- User Interface - Control - Create
- Enter Control Name,Choose proper ruleset Version and Click Create.
- In Control - Go to HTML tab- Uncheck Auto-Generated
- Go To Parameters Tab - Add Parameter Size and Label as String
Paste below code in HTML Source.
Hi Praveend,
Currently, we don't have any ootb control for the floating labels.
However, I have created a custom control similar to your requirement which can be used, By following the below steps. Or download the steps.doc
1. Create the custom control with the Below Code.
For Creating Custom control,
- Go-To Records- User Interface - Control - Create
- Enter Control Name,Choose proper ruleset Version and Click Create.
- In Control - Go to HTML tab- Uncheck Auto-Generated
- Go To Parameters Tab - Add Parameter Size and Label as String
Paste below code in HTML Source.
<style>
/**** floating-Lable style start ****/
input.error{
outline: none !important;
border-bottom: 2px solid red !important;
}
small.error{
color: red !important;
padding:4px !important;
}
small.errorwrapper{
float: right;
position: absolute;
right: 25px;
top: 6px;
}
small.errorwrapper .iconErrorDiv {
margin-left :0px !important;
}
.floating-label {
position:relative;
margin-bottom:20px;
margin-top:20px !important;
}
.floating-input , .floating-select {
font-size:14px;
padding:4px 4px !important;
display:block;
width:100%;
height:30px;
background-color: transparent !important;
border:none !important;
border-bottom:1px solid #757575 !important;
}
.floating-input:focus , .floating-select:focus {
outline:none !important;
border-bottom:2px solid #5264AE !important;
}
label.float-label {
color:#999 !important;
font-size:14px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:5px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
top:-18px;
font-size:14px;
color:#5264AE !important;
}
.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
top:-18px;
font-size:14px;
color:#5264AE;
}
/* active state */
.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
width:50%;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.floating-textarea {
min-height: 30px;
max-height: 260px;
overflow:hidden;
overflow-x: hidden;
}
/* highlighter */
.highlight {
position:absolute;
height:50%;
width:100%;
top:15%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
.floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* animation */
@-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
</style>
<pega:choose>
<pega:when test='param.Size != ""'>
<pega:save name="strExpectedSize" ref="param.Size" />
</pega:when>
<pega:when java='<%= !tools.getDictionary().fromDefinition(tools.getActive(), "pyExpectedSize").equals("") %>'>
<% tools.putSaveValue("strExpectedSize", tools.getDictionary().fromDefinition(tools.getActive(), "pyExpectedSize")); %>
</pega:when>
<pega:otherwise>
<pega:save name="strExpectedSize" value="50" />
</pega:otherwise>
</pega:choose>
<%
ClipboardProperty curProp = tools.getActive();
String strValue="";
String messageOnProp = curProp.getMessages();
boolean propHasValidValue = curProp.hasValidValue();
String messageOnPropAfter = curProp.getMessages();
if(messageOnPropAfter.equals("") && !messageOnProp.equals("")){
curProp.addMessage(messageOnProp);
}
tools.putSaveValue("formattedNumber",tools.getActiveValue());
strValue = tools.getActiveValue();
strValue = StringUtils.crossScriptingFilter(strValue);
tools.putSaveValue("result", strValue);
%>
<SPAN nowrap>
<div class="floating-label">
<small class="errorwrapper"> <pega:include name="Messages"/></small>
<input class="floating-input <% if(messageOnPropAfter.length()>0){ %> error <% } %> " placeholder=" " <pega:include name="ClientValidation"/> type="text"
size="<pega:reference name="$save(strExpectedSize)" />"
name="<pega:reference name="$this-name" />"
id="<pega:reference name="$THIS-DEFINITION(pyPropertyName)" /><%= StringUtils.crossScriptingFilter(tools.getParamValue("pega_RLindex")) %>"
value="<pega:reference name="$save(formattedNumber)" />">
<span class="highlight"></span>
<label class="float-label "><%=tools.getParamValue("Label") %></label>
<small class= "<% if(messageOnPropAfter.length()>0){ %> error <% } %> " > <%= messageOnPropAfter %></small>
</div>
</SPAN>
2. In Your Section Drag a button Control - Change the control type by clicking on Chnage link and choose your newly created control.
3. You will be getting a parameters tab In your newly created Control, Enter the Label in Parameters Tab, and Remove Label from General tab.
Incase if you face any issue let me know
View in Runtime.
Pegasystems Inc.
US
I do not recommend creating a custom control to implement the floating label pattern - this article should provide all the required details to implement this pattern using the OTB Pega UI
https://collaborate.pega.com/discussion/how-implement-floating-labels-your-application