Search code examples
javascripthtmlcssasp.net-mvctelerik

Make my @RenderBody child pages conform to browser resize

I have taken over a project for a colleague, and I'm trying to fix the mess. Here is my problem. I am trying to get my child pages to resize when the browser is resized to still fit it all on 1 page. My code I have for the Menu is working, but not on the child pages. I'll show some screen shots and post some code.

This is what it looks like when you load it and haven't resized the web browser. enter image description here

This is what it looks like when you resize the web browser. enter image description here

I'm trying to get the Manage Roles to Align with the Green bar when the web browser window is shrunk.

Here is my code for my Master Page.

<body  onresize="onResize()">
    <div id="masterlayout" class="fixed-top">
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <h1 class="navbar-brand d-flex align-items-center">Div 11</h1>
            <div class="container">
                <ul class="nav navbar-nav">
                    <li></li>
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Home", "Index", "Home")</li>
                    @if (1 == 1)
                    {
                        <li class="nav-item nav-link mx-1">@Html.ActionLink("Site Admin", "RegisterUsers", "SiteAdmin")</li>
                    }
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Promotional", "Promotional", "Promotional")</li>
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Reports", "Contact", "Home")</li>
                </ul>
            </div>
            @Html.Partial("_LoginPartial")
        </nav>
        <div style="background-color: darkgray; width: 100%; height: 10px;">
        </div>

<div id="content1">
        @RenderBody()
    </div>

</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("content1").style.marginTop = height - 1 + 'px';
    });
    $(document).ready(function () {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("menu").style.marginTop = height - 1 + 'px';
    });

    function onResize() {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("content1").style.marginTop = height - 1 + 'px';
    }
    function onResize() {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("menu").style.marginTop = height - 1 + 'px';
    }


</script>

Here is the code for my Child Form.

    Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
<header>

</header>

<body>

        <div  class="sidenav">
            <div id="menu" class="navbar-text">
                @if (1==1)
                {
                    @(Html.Kendo().Menu()
                .Name("Menu")
                .Direction(MenuDirection.Left)
                .Orientation(MenuOrientation.Vertical)
                .Scrollable(true)
                .Items(items =>
                    {
                       items.Add().Text("Register Employees").Action("RegisterUsers", "SiteAdmin").Visible(Request.IsAuthenticated && User.IsInRole("Administrators"));
                       items.Add().Text("Edit Roles").Action("ManageRoles", "SiteAdmin");
                    })
    )
                }
            </div>
        </div>

        <div id="idmain" class="main">
            @RenderBody()
        </div>

This is the final page that it links to.

@{
    ViewBag.Title = "ManageRoles";
    Layout = "~/Views/Shared/_SiteAdminLayout.cshtml";
}
    
        <h2>ManageRoles</h2>

My Result should be that when I make the web browser screen smaller, everything will move down with it.

Solution

  • In order to prevent items in your rendering from taking a place where it doesn't belong (and it will more often be a matter of height), every item should have it's own CSS including the min-width which will allow the item to be resized to a certain limit.

    Exemple, for your "Log in" issue, suppose the carriage return appears when the link width fall under 40 pixels, well the solution is to use style='min-width:40px;'

    This way, the size off that html item is ajustable, it's width will decrease with the resize of the window, but it won't fall under 40 pixels because this is where it's start being problematic.