1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Unable to type on filter box when displaying control em Modal form

Unable to type on filter box when displaying control em Modal form

Hello,

I am trying to render the Dropdown Tree control on a Modal form. And when doing so, I am unable to type anything on the filter box for the control. 

I had a similar issue with the Rich Text Editor, where you helped me with a solution. I tried to replicate it to the Dropdown Tree but with no success.

Serching the forum, I found the following solutions, but those did not work:

Use of  $.fn.modal.Constructor.prototype.enforceFocus = function () { }; or $(document).off('focusin.modal');

I would appreciate any help on this matter.

Regards,

Alexandre



5 Replies
SS Sharon Sanchez Selvaraj Syncfusion Team November 15, 2021 11:04 AM UTC

Hi Alexandre, 
 
Greetings from Syncfusion support. 
 
We have checked with your reported issue in Dropdown Tree. We have prepared a sample by rendering Dropdown Tree within bootstrap modal dialog(similar to the RTE forum) and able to replicate the issue. 
 
We suspect that, you might have set tabindex for the modal dialog in your application which is the cause of this issue. To overcome this scenario, we suggest removing the tabindex.

Refer to the sample: 
 
 
If the issue persists, kindly provide a complete code snippet of the mentioned issue, else modify the above sample so that we can check and provide a better solution. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Sharon Sanchez S. 


AL Alexandre November 18, 2021 05:14 PM UTC

Hello Sharon,


The issue was not about the tabindex. It was something about the way I configured my Modal. I have wraped my "modal-body" code around you Modal, and it worked just fine. Thank you very much for that sample! 

There is only one thing that is bothering me, a strange behavior on all the lists, where an empty space appears on the right side of the dropdown arrow button.




Can you see it in the image above? What could be causing this effect?


Regards,


Alexandre



SS Sharon Sanchez Selvaraj Syncfusion Team November 19, 2021 12:15 PM UTC

Hi Alexandre, 
 
We have checked with your reported query and created multiple components in the modal dialog. However,the required spacing issue isn’t replicated in our sample application. We suspect that, there might be CSS level overriding in your application.  
 
In the attached video, we have showcased the DOM structure and CSS on where the icon is present. Kindly inspect the DOM and let us know if any extra padding is set for the arrow icon. 
 
Refer to the video attachment. 
 
 
Refer to the sample:  
 
 
Can you please share your complete code block along with the CSS changes made in your end? 
 
If possible, please modify our shared sample with the reported issue so that we can check and provide a prompt solution. 
 
Regards, 
Sharon Sanchez S.

AL Alexandre November 19, 2021 01:46 PM UTC

Hello Sharon,


Indeed you sample works the way I expected it to behave in normal conditions. But when I copy and paste you code to my project, it behaves just my controls:




Maybe this is an issue of bootstrap or js libraries?


Regards,


Alexandre


KR Keerthana Rajendran Syncfusion Team November 22, 2021 08:54 AM UTC

Hi Alexandre,  
 
Based on the shared details, we understood that the issue arises specific to your application. We have rechecked our previous sample with latest Bootstrap5 CDN link but we were unable to replicate any alignment issues and the Dropdown Tree is aligned properly as shown in the below image. 
 
 
 
We have attached a sample with Bootstrap 5 for your reference.  
 
 
 
We suspect that some external styles or scripts in your application cause the issue. We request you to modify the above sample to replicate the issue else share your Bootstrap/JavaScript files along with the layout and view page(where Dropdown Tree is rendered). These details would help us to assist you promptly .  
 
Regards, 
Keerthana R. 


Loader.
Up arrow icon