Как изменить размер тела страницы с помощью HTML-сетки (убегает страница)? - PullRequest
Новая
       2

Как изменить размер тела страницы с помощью HTML-сетки (убегает страница)?

1 голос
/ 21 ноября 2011

У меня есть следующее (снимок экрана ниже) стандартного приложения mvc3. Как показано, html-таблица выходит за пределы тела страницы, если набор данных очень большой.

В: Как я могу изменить размер страницы / тела так, чтобы сетка помещалась в теле страницы?

Это из коробки, так что дайте мне знать, если вы хотите написать код для репро? Thx!

Индексированный вид (стандартный ... сокращенный ...) 

<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>
}

Вид компоновки: 

<!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

Ответы [ 5 ]

1 голос
/ 21 ноября 2011

Хорошо, это в основном проблема CSS.

Содержимое отображается в DIV с классом страницы: 

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

Итак, у нас есть что-то, что составляет 90% окна браузера.

Белый кусок, в котором у вас есть таблица, - это «секция» - HTML5, пока я не обдумал это! - с идентификатором main: 

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

Ключевым битом здесь является заполнение, поэтому белая область занимает 30 пикселей на странице.

По умолчанию нет ограничений на размер таблицы, следовательно, переполнение раздела.

Поэтому для исправления вам нужно поиграть с CSS - то, что вам нужно сделать, будет зависеть от того, как вы хотите, чтобы выглядело исправление (и его поздний выход за пределы моей зоны комфорта).

1 голос
/ 21 ноября 2011

По вашему изображению все строки отображаются рядом друг с другом, так что это нехорошо ... убедитесь, что код такой, как вы его дали, т.е. что элементы tr правильно открыты и закрыты, возможно, есть проблема в части кода, которую вы не дали, которая помешала его закрытию.

На вашем месте я бы постарался сделать все меньше, а лучше сделать так, чтобы мои ряды были такими, какие они есть (меньше столбцов, если необходимо).

Как уже было сказано, вы можете использовать CSS и / или Javascript для своих нужд, я не знаю, как выглядит ваша CSS, но вы можете попробовать следующее:

  1. Добавить таблицу { width :100%; } или { max-width :100%; } к вашему css

  2. попробуйте установить размер с помощью javascript, вам, вероятно, потребуется изменить размер шрифта, чтобы вы могли попробовать что-то вроде этого (при условии, что вы используете jquery, в противном случае вам нужно преобразовать его во все, что вы используете) : 

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

Опять же, это не лучший способ, на мой взгляд, но я надеюсь, что это поможет

1 голос
/ 21 ноября 2011

Возможно, #main в папке Content / Site.css имеет ширину.Удалить это или приспособить к своему удовольствию?

0 голосов
/ 12 января 2018

Вы делаете его класс div "реагирующим на таблицу", например: В этом случае таблица будет прокручиваться в пределах 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>
0 голосов
/ 03 апреля 2013

Одним из решений для этого было бы написать новый стиль, поместите этот стиль в style.css.Это то же самое, что и стиль .page, но больше ширины.

Ширина страницы исходит из _layout.cshtml.Поэтому мы должны заменить ширину, которая существует в классе с именем .page.

Вы собираетесь применить эту ширину к определенным страницам, где у вас есть больше столбцов. 

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

И на странице.cshtml (где должно отображаться больше столбцов).Напишите Jquery для замены .Page на pageWidthForMoreColumns. 

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

Вам необходимо добавить атрибут ID в _Layout.cshtml для тега div, я добавил PageWidth

Как это 

<body>
    <div class="page" id="PageWidth">
        <div id="header">
            <div id="title">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...