Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal not appearing

See original GitHub issue

I have the code set up like the examples given:

_Imports.razor:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using Blazored
@using Blazored.Modal
@using Blazored.Modal.Services

MainLayout.razor:

@inherits LayoutComponentBase

<div class="header">
    <div>
        <LoginDisplay />
    </div>
</div>
<hr class="accent" />

<div class="px-4 container mt-2">
    @Body
</div>
<BlazoredModal />

_Host.cshtml:

@page "/"
@namespace TicketingSolutions.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link href="~/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/css/site.css" rel="stylesheet" />
    <link href="~/css/blazored-modal.css" rel="stylesheet" />
    @*<link href="~/css/all.min.css" rel="stylesheet" />*@
</head>
<body>
    <div id="app">
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </div>

    <script src="~/js/bootstrap.min.js"></script>
<script src="_framework/blazor.server.js"></script>
<script src="https://kit.fontawesome.com/a0cf32fa76.js" crossorigin="anonymous"></script>
@*<script defer src="~/js/all.min.js"></script>*@

</body>
</html>

Origin Component: (truncated for brevity)

@inject IModalService Modal

<td class="align-text-top calendar-click" @onclick="@(() => SubmitDate(date))">@Date</td>

private void SubmitDate(DateTime date)
    {
        var parameters = new ModalParameters();
        parameters.Add("Date", date);

        var options = new ModalOptions()
        {
            Position = "blazored-modal-center"
        };

        Modal.Show<Submit>("Submit Date", parameters);
    }

Submit.razor (modal component)

@using TicketingSolutions.Models
@inject IModalService ModalService

<form>
(stuff)
</form>

@code {
    [CascadingParameter] ModalParameters Parameters { get; set; }

    private RepActivitySubmission repActivitySubmission { get; set; }


    protected override void OnInitialized()
    {
        base.OnInitialized();
        repActivitySubmission = new RepActivitySubmission();
    }

    private void Cancel()
    {
        ModalService.Cancel();
    }

}

When I press the table cell in the originating component, nothing happens. When I add a breakpoint to the OnInitialized method, it runs, but nothing ever appears.

Thoughts?

Issue Analytics

State:
Created 4 years ago
Comments:18 (6 by maintainers)

Top GitHub Comments

1reaction

arumfordcommented, Dec 16, 2019

I think I’ve found an issue. blazored-modal.css is empty

1reaction

chrissaintycommented, Dec 14, 2019

@arumford Have you done a hard refresh on your browser or cleared the cache to make sure that is not an issue? Otherwise, could you provide a screenshot or a repro of the issue?