Menu
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: 
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?
923
A "navbar" is an area on a page that contains navigation components (links, buttons, etc) for getting to other pages of the website. A "nav" is an HTML element that is normally used to enclose other elements related to navigation.
Set the navbar fixed to the top, add class . navbar-fixed-top to the . navbar class.
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
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
