i have mobile web app uses bootstrap. looks fine on desktop; however, when pull pages on iphone 4s, nav bar narrower should be. both of pages have behavior have tables, may have it.
screenshot: 
my shared _layout razor view looks 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 body of 1 of views displaying incorrectly looks 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 doing wrong here?
in bootstrap 3 should wrap table tag .table-responsive div.
<div class="table-responsive"> <table class="table"> </table> </div> 
Comments
Post a Comment