This is a migrated thread and some comments may be shown as answers.

SearchBox in a Modal - Text not visible

2 Answers 48 Views
SearchBox
This is a migrated thread and some comments may be shown as answers.
Stuart
Top achievements
Rank 1
Stuart asked on 07 Mar 2019, 09:26 AM

I have added a searchbox in a modal window on a web app, and when it loads, neither the placeholder text nor the entered text are visible - or more accurately, only the first few pixels are.

My issue is similar to this post - https://www.telerik.com/forums/impossible-to-type-into-my-searchbox and I tried adding the CSS as suggested but it seems to get overridden.

I have found that if I right click and Inspect Element then the width increases so that the text becomes visible.

I have set up a small sample page which illustrates the issue at http://twadventureworks.azurewebsites.net/

Click the Add an Account button to get the modal.  You can see the start of the placeholder text in the top box.  If you click into it and start to type e.g. 'Matthew', the search works and the dropdown is populated with results, but the entered search text is mostly hidden.

If I take RadSearch out of the modal then it works correctly, but this really goes against what I am trying to do in my application.

Would be grateful for any suggestions as to how I can fix this.

Thanks

2 Answers, 1 is accepted

Sort by
0
Accepted
Peter Milchev
Telerik team
answered on 07 Mar 2019, 02:19 PM
Hello Stuart,

This is most probably caused by the fact that the SearchBox container is initially hidden. 

What I would suggest that fixes the issue is calling the .repaint() method of the SearchBox. For example, in the event that is fired after the modal window is shown, you can find the SearchBox as explained below and call its .repaint() method:
Regards,
Peter Milchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Stuart
Top achievements
Rank 1
answered on 08 Mar 2019, 12:42 PM

Hi Peter

Thanks very much for your help and answer.  I've got this working now. 

Tags
SearchBox
Asked by
Stuart
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Stuart
Top achievements
Rank 1
Share this question
or