Microsoft teams app in blazor

Hi I'm developing a microsoft teams app using blazor server (this is what the teams app uses), I'm trying to implement a custom reconnection modal as recommended in the official Blazor documentation, by placing it within App.razor. I've tried to overwrite the default content that blazor provides, but it doesn't seem to work. the teams blazor app template is slighty different from the normal blazor app. So attached is the content of my App.Razor, I expect the text in my div to be shown, but instead it is still showing the default text.

I followed this step to overwrite the div

ASP.NET Core Blazor SignalR guidance | Microsoft Learn

Any help will be appreciated


    
        
            
        
        
            
                Sorry, there's nothing at this address.
            
        
    



    There was a problem with the connection!
    (Current reconnect attempt:
     /
    )

Cause

There could be several reasons why your custom reconnection modal is not being displayed. Here are a few possible causes:

Incorrect placement of the
element: Make sure that the
element containing your custom reconnection modal is placed correctly within the App.razor file. It should be placed within the appropriate section where you want it to be displayed.
CSS styling conflicts: Check if there are any CSS styles applied to the
element or its parent elements that might be overriding the display of your custom content. Inspect the element using browser developer tools to see if any conflicting styles are being applied.
JavaScript interference: If you have any JavaScript code that interacts with the
element or its parent elements, make sure it is not interfering with the display of your custom content.

Solution

To resolve the issue and display your custom reconnection modal, you can try the following solutions:

Verify the placement of the
element: Double-check that the
element containing your custom reconnection modal is placed in the correct location within the App.razor file. It should be placed where you want it to be displayed, such as within the or components.
Check for CSS styling conflicts: Inspect the
element and its parent elements using browser developer tools. Look for any CSS styles that might be conflicting with the display of your custom content. You can try adding specific CSS classes or inline styles to ensure that your custom content is displayed correctly.
Ensure JavaScript compatibility: If you have any JavaScript code that interacts with the
element or its parent elements, make sure it is compatible with Blazor and does not interfere with the display of your custom content. Consider using Blazor-specific approaches for any required functionality instead of relying on JavaScript.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Jayraj Chhaya2y ago
Cause
There could be several reasons why your custom reconnection modal is not being displayed. Here are a few possible causes:
1. Incorrect placement of the
  element: Make sure that the
  element containing your custom reconnection modal is placed correctly within the App.razor file. It should be placed within the appropriate section where you want it to be displayed.
2. CSS styling conflicts: Check if there are any CSS styles applied to the
  element or its parent elements that might be overriding the display of your custom content. Inspect the element using browser developer tools to see if any conflicting styles are being applied.
3. JavaScript interference: If you have any JavaScript code that interacts with the
  element or its parent elements, make sure it is not interfering with the display of your custom content.
Solution
To resolve the issue and display your custom reconnection modal, you can try the following solutions:
1. Verify the placement of the
  element: Double-check that the
  element containing your custom reconnection modal is placed in the correct location within the App.razor file. It should be placed where you want it to be displayed, such as within the or components.
2. Check for CSS styling conflicts: Inspect the
  element and its parent elements using browser developer tools. Look for any CSS styles that might be conflicting with the display of your custom content. You can try adding specific CSS classes or inline styles to ensure that your custom content is displayed correctly.
3. Ensure JavaScript compatibility: If you have any JavaScript code that interacts with the
  element or its parent elements, make sure it is compatible with Blazor and does not interfere with the display of your custom content. Consider using Blazor-specific approaches for any required functionality instead of relying on JavaScript.