简体   繁体   中英

<select> has items but dropdown doesn't dropdowns on click

I'm stuck with an extremely simple question: HTML "select" tag is populated with data (I can see it because I inspected it), but is not dropping down when i clicked:

@model Models._02_ModulePlanner.PlannerViewModel
@{
    ViewData["Title"] = "ShowGGGShutdowns";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<form asp-controller="Planner" asp-action="AddGGGShutdown" method="post">     

    <select >
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
    </select>
</form>

It seems to be a problem with one of this CSS property because when I comment it out, everything works fine. Any idea what's happening?

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}

That CSS class is used in "SideBar", invoked from _Layout.cshmtl. If you scroll down you will see that there is a simple div with id "content" at the bottom.

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

@{
    Layout = null;
}

<div class="container body-content">
    <div class="wrapper">
        <!-- Sidebar  -->
        <nav id="sidebar">
            <div id="dismiss">
                <i class="fas fa-arrow-left fa-sm BackArrowSize"></i>
            </div>
            <img class="logo" src="~/images/01_WebArchitecture/02_IconShaped.svg" alt="Operatoor" />
            <ul class="list-unstyled components">
                @if (SignInManager.IsSignedIn(User))
                {
                    <li class="active">
                        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="true"><i class="fas fa-home fa-fw"></i>&nbsp;&nbsp;Home</a>
                        <ul class="collapse list-unstyled" id="homeSubmenu">
                            <li>
                                <a href="~"><i class="fas fa-user fa-fw "></i>&nbsp;&nbsp;Welcome</a>
                            </li>
                            <li>
                                <a href="#"><i class="fas fa-cog fa-fw "></i>&nbsp;&nbsp;User settings</a>
                            </li>
                        </ul>
                    </li>
                    IdentityUser MyUser = UserManager.Users.FirstOrDefault();
                    IList<string> MyRoles = await UserManager.GetRolesAsync(MyUser);
                    bool IsRole_ModuleAll_Admin = MyRoles.Contains("Module: All - Admin");

                    bool IsRole_ModuleStatus_TechnicianOSC = MyRoles.Contains("Module: Status - TechnicianOSC");
                    bool IsRole_ModuleStatus_Admin = MyRoles.Contains("Module: Status - Admin");
                    bool IsRole_ModulePlanner_Admin = MyRoles.Contains("Module: Planner - Admin");
                    bool IsRole_ModulePlanner_TechnicianOSC = MyRoles.Contains("Module: Planner - TechnicianOSC");
                    bool IsRole_ModulePlanner_Scheduler = MyRoles.Contains("Module: Planner - Scheduler");
                    bool IsRole_ModulePlanner_TechnicianMaintenance = MyRoles.Contains("Module: Planner - TechnicianMaintenance");
                    bool IsRole_ModuleEquipments_Admin = MyRoles.Contains("Module: Equipments - Admin");
                    bool IsRole_ModuleEquipments_Technician = MyRoles.Contains("Module: Equipments - Technician");

                    if (IsRole_ModuleAll_Admin || IsRole_ModuleStatus_TechnicianOSC)
                    {
                        <li>
                            <a href="#StatusSubmenu" data-toggle="collapse" aria-expanded="false" aria-controls="PlannerSubmenu"><i class="fas fa-satellite-dish fa-fw"></i>&nbsp;&nbsp;Status</a>
                            <ul class="collapse list-unstyled" id="StatusSubmenu">
                                <li>
                                    <a href=@Url.Action("Now_AllGGG", "Status")><i class="fas fa-industry fa-fw"></i>&nbsp;&nbsp;GGG</a>
                                </li>
                            </ul>
                        </li>
                    }

                    if (IsRole_ModuleAll_Admin || IsRole_ModulePlanner_TechnicianOSC || IsRole_ModulePlanner_Scheduler || IsRole_ModulePlanner_TechnicianMaintenance)
                    {
                        <li>
                            <a href="#PlannerSubmenu" data-toggle="collapse" aria-expanded="false" aria-controls="PlannerSubmenu"><i class="fas fa-calendar-alt fa-fw"></i>&nbsp;&nbsp;Planner</a>
                            <ul class="collapse list-unstyled" id="PlannerSubmenu">
                                <li>
                                    <a href=@Url.Action("ShowGGGShutdowns", "Planner")><i class="fas fa-wrench fa-fw"></i>&nbsp;&nbsp;Shutdowns</a>
                                </li>
                            </ul>
                        </li>
                    }
                    if (IsRole_ModuleAll_Admin || IsRole_ModuleEquipments_Admin || IsRole_ModuleEquipments_Technician)
                    {
                        <li>
                            <a href="#EquipmentsSubmenu" data-toggle="collapse" aria-expanded="true"><i class="fas fa-binoculars fa-fw"></i>&nbsp;&nbsp;Equipments</a>
                            <ul class="collapse list-unstyled" id="EquipmentsSubmenu">
                                <li>
                                    <a href="#"><i class="fas fa-search fa-fw "></i>&nbsp;&nbsp;List</a>
                                </li>
                                <li>
                                    <a href="#"><i class="fas fa-cog fa-fw "></i>&nbsp;&nbsp;Settings</a>
                                </li>
                            </ul>
                        </li>
                    }
                    <li>
                        <a href=@Url.Action("LogOut", "Account")><i class="fas fa-sign-out-alt fa-fw"></i>&nbsp;&nbsp;Logout</a>
                    </li>
                }
                else
                {
                    <li>
                        <a href="#PresentationSubmenu" data-toggle="collapse" aria-expanded="true"><i class="fas fa-home fa-fw"></i>&nbsp;&nbsp;Home</a>
                        <ul class="collapse list-unstyled" id="PresentationSubmenu">
                            <li>
                                <a href="#"><i class="fas fa-user fa-fw "></i>&nbsp;&nbsp;Modules</a>
                            </li>
                            <li>
                                <a href="#"><i class="fas fa-cog fa-fw "></i>&nbsp;&nbsp;Contacts</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#LoginSubmenu" data-toggle="collapse" aria-expanded="true" aria-controls="LoginSubmenu"><i class="fas fa-sign-in-alt fa-fw"></i>&nbsp;&nbsp;Login</a>
                        @Html.Partial("~/Views/Account/Login.cshtml", new Techniced.Models.LoginViewModel())
                    </li>
                    <li>
                        <a href="#RegisterSubmenu" data-toggle="collapse" aria-expanded="true"><i class="fas fa-user-plus fa-fw"></i>&nbsp;&nbsp;Register</a>
                        @Html.Partial("~/Views/Account/Register.cshtml", new Techniced.Models.LoginViewModel())
                    </li>
                }
            </ul>
        </nav>
        <div class="overlay"></div>
        <!-- Page Content  -->
        <div id="content">
            <button type="button" id="sidebarCollapse" class="btn btn-info BurgerButtonSize">
                <i class="fa fa-align-justify fa-sm BurgerMenuSize"></i>
            </button>
        </div>
    </div>
    <hr />
</div>

All, I found it manually commenting out the whole CSS file, line after line. Is this property:

right: 0;

When I erase it, all drop downs work normally. To me it looks like a bug: Somehow the click event isn't mapped correctly due to that "right" attribute. I'll create a separate question to ask the community how to make an attribute "right" in these circumstances.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM