CODEWITHSUNDEEP
htmlioscsstwitter-bootstrap
Douglas Barbin
Douglas Barbin

Reputation: 3615

Bootstrap nav bar is too short on pages with table

I have a mobile web app that uses Bootstrap. Everything looks fine on a desktop; however, when I pull up certain pages on an iPhone 4S, the nav bar is much narrower than it should be. Both of the pages that have this behavior have tables, so that may have something to do with it.

Screenshot: here

My shared _Layout Razor view looks like this:

@using FCTech.Quotes.Helpers
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Styles.Render("~/Content/bootstrap")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @RenderSection("Styles", false)

</head>

<body>
    <header>
        <div class="content-wrapper">
            <div>
                <nav class="navbar navbar-default col-xs-12">
                    <div class="container-fluid">
                        <div class="navbar-header float-left">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navLinks" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            @Html.ActionLink("Home", "Index", new { controller = "Home" }, new { @class = "logo navbar-brand" })
                        </div>

                        <div class="collapse navbar-collapse" id="navLinks">
                            <ul class="nav navbar-nav">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                @if (HttpContext.Current.User.Identity.IsAuthenticated)
                                {
                                    <li>@Html.ActionLink("Quotes", "Index", new {controller = "Quotes", salesPerson = AccountHelper.GetCurrentUserFullName()})</li>
                                    <li>@Html.ActionLink("Orders", "Index", new {controller = "Orders", salesPerson = AccountHelper.GetCurrentUserFullName()})</li>
                                }

                                @if (HttpContext.Current.User.Identity.IsAuthenticated && AccountHelper.AuthorizeAdmin())
                                {
                                    <li>@Html.ActionLink("Shipments", "ShipmentSummary", new { controller = "Admin", salesPerson = AccountHelper.GetCurrentUserFullName() })</li>
                                    <li>@Html.ActionLink("Bookings", "BookingSummary", new { controller = "Admin", salesPerson = AccountHelper.GetCurrentUserFullName() })</li>
                                }

                                <li>
                                    @if (Request.IsAuthenticated)
                                    {
                                        @Html.ActionLink("Log Off", "LogOff", "Account")
                                    }
                                    else
                                    {
                                        @Html.ActionLink("Log in", "Login", "Account")
                                    }

                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </header>
    <div id="body" class="content">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-right">
                <p>v @typeof(FCTech.Quotes.MvcApplication).Assembly.GetName().Version</p>
            </div>
        </div>
    </footer>


    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("Scripts", required: false)

</body>
</html>

And the body of one of the views that is displaying incorrectly looks like this:

@using System.Linq

@model IEnumerable<FCTech.Quotes.Models.OpenQuoteModel>
@{
    ViewBag.Title = "Open Quotes";
}

<head>
    <title>
        Open Quotes
    </title>
</head>

<fieldset>
    <legend>
        Open Quotes
    </legend>

    @if (Model != null && Model.Any())
    {
        <table id="OpenQuotesTable" class="table table-responsive table-bordered table-condensed table-striped tablesorter">
            <thead>
                <tr class="header">
                    <th>
                        @Html.DisplayNameFor(model => model.QuoteNumber)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.QuoteDate)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Customer)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.City)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.State)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.EndUser)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Product)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.TotalValue)
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr class="@(item.QuoteDate < DateTime.Today.AddDays(-30) ? "red" : string.Empty ) ">
                        <td>
                            @Html.ActionLink(item.QuoteNumber.ToString(), "Detail", new { quoteNumber = item.QuoteNumber, productLine = item.Product, salesRep = item.SalesRep })
                        </td>
                        <td style="text-align: right;">
                            @Html.DisplayFor(model => item.QuoteDate)
                        </td>
                        <td>
                            @Html.DisplayFor(model => item.Customer)
                        </td>
                        <td>
                            @Html.DisplayFor(model => item.City)
                        </td>
                        <td>
                            @Html.DisplayFor(model => item.State)
                        </td>
                        <td>
                            @Html.DisplayFor(model => item.EndUser)
                        </td>
                        <td>
                            @Html.DisplayFor(model => item.Product)
                        </td>
                        <td style="text-align: right;">
                            @Html.DisplayFor(model => item.TotalValue)
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }



</fieldset>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

What am I doing wrong here?

Upvotes: 12

Views: 2535

Answers (2)

JDupont
JDupont

Reputation: 1352

To expand on Samuel's answer,

This looks to be simply happening because Bootstrap's media query at that mobile level has a max-width on it with no hidden overflow while the table content exceeds this width. Mobile tables are always a pain for front-end devs.

Other than the solution Samuel provided, you can always make your own custom media query to display the data in a cleaner way.

Personally, I suggest using jQuery DataTables for your display formatting. DataTables provides handling for smaller devices. DataTables Responsive example

After having adding DataTables plugin and datatables responsive to your project, initialize it with this property turned on like this:

$(document).ready(function() {

    $('#OpenQuotesTable').DataTable( {

        responsive: true

    } );

} );

Upvotes: 4

Samuel Tesler
Samuel Tesler

Reputation: 455

In Bootstrap 3 you should wrap your table tag into a .table-responsive div.

<div class="table-responsive">
  <table class="table">
  </table>
</div>

http://getbootstrap.com/css/#tables-responsive

Upvotes: 15

Related Questions