Search code examples
htmlasp.netasp.net-mvcasp.net-corerazor

In the newly created ASP.NET project, why is the _LoginPartial placed at right while there isn't any markup specifying such placement?

I am recently starting with ASP.NET core. In the sample provided when I create a new project with authentication, there is an _Layout.cshtml. Part of _Layout.cshtml looks like this:

    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Contacts/Index">ContactManager</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <partial name="_LoginPartial" />
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

As you can see, the partial is at the same level with ul. However, when I run the app, in the webpage the partial is shown at right while both li, Home and Privacy are at left next to the ContactManager title link. I cannot see any markup indicating it to be at right, neither _LoginPartial.cshtml:

@using Microsoft.AspNetCore.Identity
@inject SignInManager<IdentityUser> SignInManager
@inject UserManager<IdentityUser> UserManager

<ul class="navbar-nav">
@if (SignInManager.IsSignedIn(User))
{
    <li class="nav-item">
        <a  class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity.Name!</a>
    </li>
    <li class="nav-item">
        <form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/", new { area = "" })" method="post" >
            <button  type="submit" class="nav-link btn btn-link text-dark">Logout</button>
        </form>
    </li>
}
else
{
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
    </li>
}
</ul>

So, what caused it to be aligned to right instead of left? Thanks for your great help!

Solution

  • This is almost certainly caused by CSS.

    1. Build your project.
    2. Open it in the web browser.
    3. Open the web console.
    4. Click the select icon.
    5. Point at the ul flex-grow-1.
    6. Check the inspector to see what styles are being applied and from what file.

    You will likely find that flex-grow-1 is a bootstrap css class that applies flex box grow property.

    This property specifies how much of the remaining space in the flex container should be assigned to the item

    THIS IS JUST AN EXAMPLE enter image description here