Notification overlaps Textbox

1 Answer 54 Views
Notification
Hendrik
Top achievements
Rank 1
Iron
Iron
Iron
Hendrik asked on 18 Jul 2023, 07:10 AM

Even if the TelerikNotification Component is not visible it kind of blocks the Textbox for getting focused. I made a screenshot to demonstrate that with the BrowserTools. I only can focus the Textbox if I am clicking in the area marked with the red box.

Is there a solution for it ?

 

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 18 Jul 2023, 11:30 AM

Hi, Hendrik

I have investigated the provided screenshot and I have noticed that there is a height and width explicitly set. By default, the k-notification-group element does not have any dimensions and is resized dynamically when new notifications are added. In the current case, due to the high z-index value, the element appears on top of the input. Hence, stopping the focus from reaching the input.  

If you would like to limit the height and width of the container, make sure you set the max-height and max-width CSS rules, instead. This way, when no notifications are present, the container will shrink and allow the users to freely focus the input.

Alternatively, increase the z-index of the TextBox components (or their parent container directly). Additional information on the z-index rule can be found in the Notification appearance article.

I have prepared a REPL example that demonstrates setting the dimensions via the max-width and max-height rules.

Let me know if there is anything else I can help with.

Best Regards,
Georgi
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Hendrik
Top achievements
Rank 1
Iron
Iron
Iron
commented on 18 Jul 2023, 11:56 AM

Hello Georgi,

works like a charm !

Thank you very much !!

Tags
Notification
Asked by
Hendrik
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Georgi
Telerik team
Share this question
or