Question

9
Replies
1075
Views
Close popover
Vignesh Eswaran (VigneshE)
Cognizant Technology Solutions

Cognizant Technology Solutions
IN
VigneshE Member since 2016 1 post
Cognizant Technology Solutions
Posted: March 19, 2019
Last activity: September 3, 2019
Closed

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:

<div class="content-item content-field item-2 remove-left-spacing remove-right-spacing remove-bottom-spacing flex" string_type="field" reserve_space="false" >
<label class="field-caption dataLabelForWrite" for="FirstName">First Name</label>
<div class="field-item dataValueWrite">
<span class="solid_line" nowrap="">
<input type="text" id="FirstName" value="" class="leftJustifyStyle" title="" name="$PpyWorkPage$pFirstName" placeholder="First Name" >
</span>
</div>
</div>

Labels display on focus works for below code:

<divclass="form-floating-label"><inputtype="email"id="email"name="email"required><labelfor="email">Email float up</label></div>

Open source link for illustration-->https://foundation.zurb.com/building-blocks/blocks/form-floating-label.html

Any suggestions?

Low-Code App Development User Experience
Moderation Team has archived post,
Close popover This thread is closed to future replies. Content and links will no longer be updated. If you have the same/similar Question, please write a new Question.