Search code examples
cssasp.net-mvc

ASP.NET MVC Project Template don't adjust to 100% on Mobile

I can't find out why the default template on a Web .Net MVC project is not adjusting to 100% width in a mobile device.

enter image description here

I use a DataTable on the View:

@model IEnumerable<iziConference.Models.EventAttendee>

<h2>Participantes.</h2>
<br />
<button><a style="text-decoration: none" href='@Url.Action("Create", new { eventId = ViewBag.EventId })'>Criar Participante</a></button>
<button id="at-btn-refresh"> Actualizar</button>
<input id="eventId" type="hidden" value="@ViewBag.EventId">
<table id="at-attendees-list" cellpadding="10" border="1" class="row-border stripe">
    <thead>
        <tr>
            <th>ID</th>
            <th>Tipo</th>
            <th>Nome</th>
            <th>Email</th>
            <th>Estado  </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr id="[email protected]_Id">
                <td style="padding: 5px">
                    @Html.DisplayFor(modelItem => item.Attendee.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.AttendeeType)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Attendee.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Attendee.Email)
                </td>
                <td>
                    @if (item.IsActive)
                    {
                        <button id="[email protected]_Id" class="at-btn-active-state active" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="false" data-show-confirmation-alert="true">Desactivar</button>
                    }
                    else
                    {
                        <button id="[email protected]_Id" class="at-btn-active-state inactive" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="true" data-show-confirmation-alert="true">Activar</button>
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

Loaded by script:

var _atteendeesList = "at-attendees-list";

 $("#" + _atteendeesList).DataTable({
    "paging": false,
    "info": false,
    "language": {
        "search": "Pesquisar:",
        "info": "Participantes inscritos: _PAGES_"
    }
 });

Using the default _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>izigo Conference - Gestor de Conteúdos</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <header>
        <div class="content-wrapper">
            <section id="login">
                @Html.Partial(MVC.Account.Views._LoginPartial)
            </section>
            <div style="padding: 10px;">
                @if (Request.IsAuthenticated)
                {
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", MVC.Home.Index())</li>
                            <li>@Html.ActionLink("Participantes", MVC.Attendee.Index())</li>
                            <li>@Html.ActionLink("Check-in", MVC.Checkin.Index())</li>
                        </ul>
                    </nav>
                }
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer style="padding-left: 25px;">
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - <a href="https://www.izigo.pt/conference" target="_blank">izigo Conference</a> - <i>Powered by</i><a href="https://www.izigo.pt" target="_blank">izigo.pt</a></p>
            </div>
        </div>
    </footer>

    @Scripts.Render("~/bundles/jquery", "~/bundles/iziconference")
    @RenderSection("scripts", required: false)
</body>
</html>
Solution

  • After researching the options of the dataTables library, I was able to find an option to create a responsive solution:

    enter image description here

    I have included the options responsive to the construction of the table and the columnDefs to choose which ones to remain visible in the mobile:

    $("#" + _atteendeesList).DataTable({
"responsive": true,
"columnDefs": [
    { responsivePriority: 1, targets: 0 },
    { responsivePriority: 2, targets: -1 }
    ],
"paging": false,
"info": false,
"language": {
    "search": "Pesquisar:",
    "info": "Participantes inscritos: _PAGES_"
    }
});

    I also had to include in the Bundle the reponsive libraries for js and css of the datatables extensions (download available here: https://datatables.net/download/):

                bundles.Add(new ScriptBundle("~/bundles/iziconference").Include(
                    "~/Content/Scripts/datatables.min.js",
                    "~/Content/Scripts/dataTables.responsive.min.js")); // add-on


            bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/Styles/datatables.min.css",
                    "~/Content/Styles/responsive.dataTables.min.css"));