Unable to modify div height once Layout has been applied

Question

Unable to modify div height once Layout has been applied

On my razor view web page, there is a div element where I dynamically populate data in various ways like lazy loading or looping.

If I do not use a layout, for example:

@{
        Layout = "_Layout";
    }

Then the div will adhere to my specified height and display a scrollbar if necessary with overflow: auto.

However, when I introduce a layout, even an empty one, I find that I am unable to alter the height of the div, causing it to stretch from the layout to the bottom of the screen without any scrolling capability.

What is preventing me from changing the height?

(the div where I load data into has id container)

index.cshtml:

... (Content continued)

_Layout.cshtml:

...

Empty _Layout.cshtml: (also encountering issues with this layout)

...

Generated page (Using the empty layout):

...

Visual representation of current output and desired outcome: (Note: Placeholder representing AJAX call results shown within gray box) https://i.sstatic.net/keeKO.png

Generated code after incorporating @section and @style, excluding redundant elements from layouts:

...

html css razor

Answer 1

Answer №1

It's recommended to utilize sections for managing styles, scripts, and more within the layout. The head and body tags should only be included in the layout page.

Example of an Empty _Layout.cshtml:

<!DOCTYPE html>
<head>
    <style>
        .main-header {
            background: url(/images/bg-header.png) transparent repeat-x 0 0;
        }
    </style>
    @RenderSection("Styles", required: false)
</head>
    <body>
        <div>
            @RenderBody()
        </div>
        @RenderSection("Scripts", required: false)
    </body>
</html>

Sample Index.cshtml:

@{
    Layout = "_Layout";
}
@section Styles {
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 5px;
        text-align: center;
        width: 15%;
    }

    .Good {
        background-color: green
    }

    .Bad {
        background-color: red
    }

    #container {
        background: #eee;
    }
</style>
}

<div>
    <div>
        <h3 id="Progression"></h3>
    </div>
    <div id="container" style="width: 100%; height: 80%; overflow: auto;">

    </div>
    <div id="progress" style="display: none; height: 20%">
        <h4>Loading...</h4>
    </div>
</div>  
@section Scripts {
        <script src="/JQuery/jquery-3.3.1.min.js"></script>
}

UPDATE

A modification is needed as follows:

<div id="container" style="width: 100%;height: 155px;overflow: scroll;display: block;">

Using a percentage for height requires adding position:absolute;. For just the vertical scrollbar, use overflow-y:scroll;.

Answer 2

It's recommended to utilize sections for managing styles, scripts, and more within the layout. The head and body tags should only be included in the layout page.

Example of an Empty _Layout.cshtml:

<!DOCTYPE html>
<head>
    <style>
        .main-header {
            background: url(/images/bg-header.png) transparent repeat-x 0 0;
        }
    </style>
    @RenderSection("Styles", required: false)
</head>
    <body>
        <div>
            @RenderBody()
        </div>
        @RenderSection("Scripts", required: false)
    </body>
</html>

Sample Index.cshtml:

@{
    Layout = "_Layout";
}
@section Styles {
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 5px;
        text-align: center;
        width: 15%;
    }

    .Good {
        background-color: green
    }

    .Bad {
        background-color: red
    }

    #container {
        background: #eee;
    }
</style>
}

<div>
    <div>
        <h3 id="Progression"></h3>
    </div>
    <div id="container" style="width: 100%; height: 80%; overflow: auto;">

    </div>
    <div id="progress" style="display: none; height: 20%">
        <h4>Loading...</h4>
    </div>
</div>  
@section Scripts {
        <script src="/JQuery/jquery-3.3.1.min.js"></script>
}

UPDATE

A modification is needed as follows:

<div id="container" style="width: 100%;height: 155px;overflow: scroll;display: block;">

Using a percentage for height requires adding position:absolute;. For just the vertical scrollbar, use overflow-y:scroll;.

Unable to modify div height once Layout has been applied

Answer №1

Similar questions

jquery does not reset trigger for menu navigation

Separate the selected option in the TEXTAREA by commas to make it easier to

Toggle the visibility of an element with a single button click

I am consistently finding a class in my program, but when I try to locate the same class in the HTML, it seems to be non-existent

Troubleshooting problem with RadEditor rendering (LI)

How to access a separate database's Javascript library in XPages resources

Strategies for creating smooth transitions for elements using CSS transformations

Navigating React Router: Updating the page on back button press

The data model is missing during a postback on Razor view in MVC4

Having trouble with CSS messing up your gridview button display?

Preventing default behavior in a JQuery post request

Tips for choosing a sibling element on hover using CSS

Tips for changing the style ID depending on the variable value

Tips for inserting a button under a div when clicked

Why isn't the image utilizing all the available space?

In what way does Angular incorporate _page-theme.scss assets?

Are you looking to present information through indexing?

Tips for monitoring a field within an angularJS factory

Determine whether the user is scrolling the window or clicking using jQuery

Tips for switching the status of each item as I navigate the page with the tab key