Question

9
Replies
995
Views
VigneshE Member since 2016 1 post
Cognizant Technology Solutions
Posted: 1 year ago
Last activity: 1 year ago
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 Interface
Moderation Team has archived post
Share this page LinkedIn