search icon inside the input box

search icon inside the input box

  

Hello,

I am trying to implement a search box which has search icon inside it as shown in the attached file here .I have tried it using web pattern(Control\search) but the icon is not displayed in the webpage and also with 

InputWithIcons in web pattern here the icon is displayed outside the textbox


Solution

user Search widget as available below:

Solution

Amol Tupe wrote:

user Search widget as available below:

Hi Amol,

Thanks for your response. I have used that Search but Icon is not displayed in the webpage.


Can you show what you did in Widget tree? 

Amol Tupe wrote:

Can you show what you did in Widget tree? 



Hi,

Is this what you're trying to accomplish?

For this I just used the "Search" pattern from WebPatterns...

Can you provide a sample module?


Best regards,

Davide Résio

By the way, can you see any other icons on your pages or is this the only one not showing?

Sri Vaishnavi Guggilla wrote:

Amol Tupe wrote:

Can you show what you did in Widget tree? 




Didn't get any idea by this Vaishnavi. You need to show/check few more things like properties of input and its container. Also show view of the input.




Amol Tupe wrote:

Sri Vaishnavi Guggilla wrote:

Amol Tupe wrote:

Can you show what you did in Widget tree? 




Didn't get any idea by this Vaishnavi. You need to show/check few more things like properties of input and its container. Also show view of the input.





okay, Can you please share OML with search box?


Check my attached OML of sample Orders project. There check for Orders page. 

Amol Tupe wrote:

Check my attached OML of sample Orders project. There check for Orders page. 


thanks Amol it was helpful :-)



Amol Tupe wrote:

Check my attached OML of sample Orders project. There check for Orders page. 

Hi Amol,

That search is working good in Dublin theme, but not in lisbon theme. When I am trying to implement it in lisbon theme. I am unable to get the icon in the input area.



Hi Sri,


You should try to follow these steps:

- Put the input field in a container;
- Add 'position: relative;' to the class of the container;
- Add another container to the previous one, and set it's with to 0;
- Put the icon in the child container;
- Add 'position: absolute;' to the class of the child-container (if you want, you change the position of the icon with 'top: 5px; left 5px; ' for example.

A snapshot of what the widget tree should look like:


This will provide the following result:


Let me know if this has worked.


Kind regards,

Sam


EDIT: 

The text will appear behind the logo when you start typing. To avoid this, you could make an OnChange event, to change the style class of the icon, in which you set the 'display: none;' property.

Or even better, you may use the OnFocus property of the input field. But I'm not sure how to accomplish that. At least the icon is within the input field this way ;)

Hi Sam, it's better to understand the problem in order to solve, than to provide a workaround... ;)

Sri,

I tested in Lisbon theme and it is working perfectly...
Check if you don't have any kind of style that is making the icon "invisible" (because of the color, for example), or moving it for some other place.

Check also if you have any problem with FontAwesome (other icons appear ok?)

You can use the inspector of the browser for this.

Cheers

Thanks for the feedback Eduardo, makes sense :)