How to put Search Icon inside Textbox as Search functionality in Designer Studio - PRPC v7.2
Hi we have a requirement that search icon should be displayed inside Textbox.
How it can be achieved with Dynamic Layout, Textbox and Icon(image) ?
we want the Search icon inside textbox in two variations as shown in attached screen, Please help me.
Accepted Solution
Pegasystems Inc.
IN
Hello Raj,
Thanks for posting your query in PSC :)
Refer the attached document "SearchIcon.doc" wherein I have tried achieving the option-1 as per the Capture.PNG.
Hope this helps at your end.
Regards,
Rincy
Virtusa Corp.
US
Hi Raj, is the search icon expected to be clickable with an associated click action or is expected to be a static icon displayed on the Input element?
If the ask is to display a static icon on the field, I would suggest you create a reusable style format for the input box and define the required styles in the Skin. this would help you maintain a simpler code as opposed to writing a set of CSS style attributes in an external CSS file.
Virtusa Corp.
US
Further, if the Search icon is expected to be clickable and would have a set of actions associated for the click event, please create the following style formats
- Container Format, which mimics a text input box with border, background color & other attributes defined
- Dynamic Layout Format to handle the display of the elements & responsive behavior of the dynamic layout
- Text Input/Formatted Text Style format to disable the borders and etc from being displayed
- Icon Style/Image to be used on the right
These can be used to build the new structure for your reusable search input box pattern
Pegasystems Inc.
IN
Nikhil,
Can you provide me the configuration details(screenshots) for Container, Dynamic Layout and Text Input/Formatted Text in skin ?
Pegasystems Inc.
IN
Hi Nikhil,
I tried the scenario which you are suggested and got the screen as shown in the attached.
But the issue is if we select the textbox the border is displaying only to the textbox and also i want to add the background color and border radius.
if i add anything it will reflect only to text box as it is textbox.
So, the solution which you have provided is not suitable for my requirement.
i have tried by applying inline style to Icon/Image "margin-left:-20px". its working but facing alignment issues in Mozilla browser.
So this is also not a desired solution, I want to make it inline automatically as exactly in Search functionality in Designer studio without inline style.
Please let me know if you have any other solution. Thanks for your help.
Virtusa Corp.
US
Hi Raj,
Which of the two options provided above did you try implementing? It looks you are using Option 2. Did you try using Option 1?
Pegasystems Inc.
IN
Hi Nikhil,
Yes I tried option 2. In option 1, it is static image right, I do not want static image. I need search icon to be clickable, need to perform an action.
Please let me know if you have any other option ?
ING
PL
Hi Raju,
Can you please check the configuration for pySearchFieldWorkResponsive and also pzStudioHeaderTools (Designer studio) verify if any of them helps you out to implement your requirement.
Pegasystems Inc.
IN
Hi Kola,
I tried replicating the Search functionality as in 'pzStudioHeaderTools' section but for me the search icon displaying separately, it is not displaying in Text box.
if you tried the same and got the same screen as in Designer studio like icon inside the Text box, Please let me know the configuration details. Thanks in Advance.
Pegasystems Inc.
IN
Hi Raj,
Use two different search icon images switching between two search icon images conditionally instead of using CSS styles.
I have attached a screenshot of search box implementation and properties set for its dynamic layout. Please take a look at it.
Regards,
Chetan
Pegasystems Inc.
US
You should be able to reverse engineer this based on what designer studio has done. They're using their own dynamic layout formatting here, but more importantly it looks like the positioning of this is driven off their custom CSS. Here's a proof of concept of me moving it even further in.
You should be able to reverse engineer this based on what designer studio has done. They're using their own dynamic layout formatting here, but more importantly it looks like the positioning of this is driven off their custom CSS. Here's a proof of concept of me moving it even further in.
Pegasystems Inc.
IN
Hi Rett_Hean,
It helps me, i tried this by Developer tools earlier but did not check 'Cell read-write classes' and 'Cell read-only classes' for the icon.
One thing I had identified here is we have to use the either CSS left Property or CSS right Property based on our layout design.
Thanks very much for the Help.
Accepted Solution
Pegasystems Inc.
IN
Hello Raj,
Thanks for posting your query in PSC :)
Refer the attached document "SearchIcon.doc" wherein I have tried achieving the option-1 as per the Capture.PNG.
Hope this helps at your end.
Regards,
Rincy
Pegasystems Inc.
IN
Hi Rincy,
Thanks Very much for detailed explanation in the DOC and it works for me.
One thing I observed here is, we have to use the either CSS left Property or CSS right Property based on our layout design to align the icon.
Thanks!