CODEWITHSUNDEEP
htmlasp.net-mvc-3
genxgeek
genxgeek

Reputation: 13357

How to resize page body with html grid (runs off page)?

I have the following (screen shot below) of a stock/out of the box mvc3 application. As illustrated the html table runs off the page body if the data set is very large.

Q: How can I resize the page/body so that the grid fits within the page body?

This is out of box stuff so let me know if you anymore code to repro? Thx!

Indexed View (standard...abridged...)

<table>
    <tr>
        <th>
            Name
        </th>
        ...
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        ....

        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.PersonId }) |
            @Html.ActionLink("Details", "Details", new { id=item.PersonId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.PersonId })
        </td>
    </tr>
}

Layout View:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

enter image description here

Upvotes: 1

Views: 3760

Answers (5)

rakshithnrr
rakshithnrr

Reputation: 53

You make its div class as "table-responsive" like : In that case, the table will be scrollable within the div

<div class="table-responsive" style="width:100%;">
    <table class="table" style="width:100%" >
    <tr>
        <th>
            Name
        </th>
         ...
    </tr>

    @foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        ....

        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.PersonId }) |
            @Html.ActionLink("Details", "Details",new { id=item.PersonId })|
            @Html.ActionLink("Delete", "Delete", new { id=item.PersonId })
        </td>
    </tr>
    }
    </table>
</div>

Upvotes: 0

idanzalz
idanzalz

Reputation: 1760

From you image it looks like all the rows are displayed alongside each other, so that is not good... make sure the code is like you gave it, i.e. that the tr elements are properly open and closed, maybe there is a problem in some of the code you didn't give that prevented it from closing.

If I were you, I would try to make everything smaller, but rather try to make my rows fit as they are (less columns if needed).

That been said, you can use css and/or javascript for you needs, I don't know what you css looks like, but you can try the following:

  1. Add table { width :100%; } or { max-width :100%; } to your css

  2. try to set the size with javascript, you will probably need to change the font size, so you can try something like this (assuming your are using jquery, otherwise you need to convert it to whatever you are using):

    $(function() {
    var factor = $('table').width()/window.innerWidth
    if (factor > 1)
        $('table').css('font-size' function(ind, value) { return value / factor; })
})

Again, this is not the best way to go in my opinion, but I hope that helps

Upvotes: 1

Hari Gillala
Hari Gillala

Reputation: 11916

One solution for this would be write a new style, place this style in style.css. It is exactly same as .page style but more width.

Page width is coming from _layout.cshtml. So we have to replace width which exist in class called .page.

You are going to apply this width to specific pages where you have more columns.

.pageWidthForMoreColumns
{
    width: 135%;
    margin-left: auto;
    margin-right: auto;
}

And in the page.cshtml(where more columns should be displayed). Write a Jquery to replace .Page to pageWidthForMoreColumns.

 <script language="javascript" type="text/javascript">
    $("#PageWidth").removeClass("page").addClass("pageForAdvancedSearchResults");
</script>

You need to add an ID attribute to _Layout.cshtml for div tag, I have added PageWidth

Like this

<body>
    <div class="page" id="PageWidth">
        <div id="header">
            <div id="title">

Upvotes: 0

Murph
Murph

Reputation: 10190

Ok, this is basically a CSS problem.

The content is rendered in a DIV with a class of page:

.page {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

So we've got something that's 90% of the browser window.

The white bit that you have the table in is a "section" - HTML5, not got my head round this yet! - with an ID of main:

#main {
    padding: 30px 30px 15px 30px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
 }

Key bit here is the padding, so the white area sits 30px within the page.

By default there are no constraints on the size of the table, hence the overflow of the section.

To fix therefore you need to play with the CSS - exactly what you need to do will depend on how you want the fix to look (and its late and way outside my comfort zone).

Upvotes: 1

bperreault
bperreault

Reputation: 994

Maybe #main in the Content/Site.css folder has a width on it. Remove that or adjust to your pleasure?

Upvotes: 1

Related Questions