Question

9
Replies
1122
Views
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
Posted: 19 Mar 2019 10:30 EDT
Last activity: 3 Sep 2019 9:43 EDT
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:

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:

<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?

Low-Code App Development User Experience
Moderation Team has archived post, 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.