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?
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
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
} );
} );
Related
I have a dark background on my webpage, so when I implement DataTables into my project, the search bar is barely visible. I import the scripts instead of directly having the source code for DataTables in my project, so I can't change the color of the search bar there.
How might I change the color from black to white? This is what it looks like at the moment:
Here is my code, I'm using Razor Pages
#page
#model CustomerPageTest.Pages.Customer.ListModel
#{
ViewData["Title"] = "List";
}
#section Scripts
{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').dataTable({
"paging": false,
columnDefs: [{
targets: -1,
className: 'dt-head-center'
}]
});
});
</script>
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<h1 align="center" style="color:yellowgreen">1) Select/Add Customer</h1>
<br />
<div>
<p align="center">
<a class="btn btn-dark"
asp-page="/Index"><i class="glyphicon glyphicon-arrow-left"></i> Back</a>
<a class="btn btn-dark"
asp-page="./AddCustomer"><i class="glyphicon glyphicon-plus"></i> Add New Customer</a>
<a class="btn btn-dark"
asp-page="./ListAssessments"><i class="glyphicon glyphicon-plus"></i> Use Existing Assessment</a>
</p>
</div>
<table id="myTable" class="display cell-border stripe" role="grid" style="background-color: #dbdbdb; text-align:center; width: 100%">
<thead class="text-light">
<tr class="text-dark">
<th style="text-align: center"><strong>Customer</strong></th>
<th style="text-align: center"><strong>Notes</strong></th>
<th style="text-align: center"><strong>New Assessment</strong></th>
</tr>
</thead>
<tbody style="background-color: #dbdbdb;">
#foreach (var customer in Model.Customers)
{
<tr class="text-dark">
<td style="padding-top: 15px">#customer.name</td>
<td style="padding-top: 15px">#customer.notes</td>
<td>
<a class="btn btn-dark"
asp-page="/Assessment/AddAssessment" asp-route-customerId="#customer.customer_id">
<i class="glyphicon glyphicon-plus"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
Edit: Found the class and id that links to the search bar, added new definitions into the CSS to try and overwrite it, but no new results...
Here is a screenshot of the Inspect:
And the CSS code I have added:
/*Change Search Bar to White*/
.myTable_filter {
color: white;
}
#dataTables_filter {
color: white;
}
Any thoughts?
That search-box on dataTable seems to be generated by the package script.
So you can change the background color of input tag by overriding the css style only.
Based on inspect screenshot, this will work.
#myTable_wrapper .dataTables_filter input {
background-color: white;
}
I am developing a spring boot web application. In the view for products list, when I want to delete one of the rows after clicking on "Yes" when the pop up appears, the row delete is always the first in the table, not the chosen row. I think I have an issue with my loop. I am using Bootstrap with thymeleaf
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymleaf/layout">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Product Management</title>
</head>
<body>
<header>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a th:href="#{/}">Products list</a></li>
<li><a th:href="#{/new}">Add a product</a></li>
</ul>
</div>
</div>
</header>
<div align="center">
<br /> <br />
<h2>
<b><p class="bg-danger">PRODUCTS LIST</p></b>
</h2>
<br /> <br />
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Manufacturer</th>
<th>Country</th>
<th>Price</th>
<th>Designation</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${listProducts}">
<td th:text="${product.id}">Product ID</td>
<td th:text="${product.name}">Model name</td>
<td th:text="${product.brand}">Manufacturer</td>
<td th:text="${product.madein}">Country</td>
<td th:text="${product.price}">Price</td>
<td th:text="${product.price}">Designation</td>
<td><a class="btn btn-primary" role="button"
th:href="#{'/edit/' + ${product.id}}">Edit</a>
<a class="btn btn-danger" role="button"
data-toggle="modal" data-target="#myModal">Delete</a> <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>Are you sure to delete this products ?</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" role="button"
th:href="#{'/delete/' + ${product.id}}">Yes</a>
<button type="button" class="btn btn-default"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div></td>
</tr>
</tbody>
</table>
</div>
<br /> <br /> <a class="btn btn-success" href="new" role="button">Create
a new product</a> <br /> <br /> <br /> <br />
<!-- Footer -->
<footer class="page-footer font-small blue fixed-bottom">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">
© 2020 Copyright: www.sample.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
</html>
ProductController :
package com.gestion.products.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import com.gestion.products.entity.Product;
import com.gestion.products.service.ProductService;
#Controller
#RequestMapping(name = "/all")
public class ProductController {
#Autowired
private ProductService service;
#RequestMapping("/")
public String viewHomePage(Model model) {
List<Product> listProducts = service.listAll();
model.addAttribute("listProducts", listProducts);
return "index";
}
#RequestMapping("/new")
public String showNewProductForm(Model model) {
Product product = new Product();
model.addAttribute("product",product);
return "new_product";
}
#RequestMapping(value = "/save", method = RequestMethod.POST)
public String saveProduct(#ModelAttribute("product") Product product) {
service.save(product);
return "redirect:/";
}
#RequestMapping("/edit/{id}")
public ModelAndView showEditProductForm(#PathVariable(name = "id") Long id) {
ModelAndView mav = new ModelAndView("edit_product");
Product product = service.get(id);
mav.addObject("product", product);
return mav;
}
#RequestMapping("/delete/{id}")
public String deleteProduct(#PathVariable(name = "id") Long id) {
service.delete(id);
return "redirect:/";
}
}
I faced the same issue yesterday and I found another way to solve it.
So I was using modal too and the problem comes from it.
I recommend you to use bootstrap confirmation plugin instead of modal then it will be easier for the controller to get the id of the chosen row.
Using a modal makes the controller choose a random id instead of the chosen one.
I have an MVC application that has roughly 10 different views. The footer acts the way I'd expect it to on every page but one. This view in particular displays a table that contains SQL data. I believe the problem might have something to do with the footer ignoring or not "seeing" this table.
Layout Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Pay Data</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
#Html.ActionLink("MyPay Data", "Index", "Dashboard", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Pay Period", "PayPeriod", "Dashboard")</li>
<li>#Html.ActionLink("Internal Job Postings", "JobPostings", "Dashboard")</li>
<li>#Html.ActionLink("View Paycheck", "ViewPayCheck", "Dashboard")</li>
<li>#Html.ActionLink("LOGOUT", "Logout", "Dashboard", new { #class = "log-button" })</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<footer>
<div class="footer-wrapper">
<div class="footer-content">
<div class="copyright-left">
Copyright © #DateTime.Now.Year All Rights Reserved.
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
View:
#model MyPayTC.Models.ServiceGroupConglom
#{
Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
if (Session["userID"] == null)
{
Response.Redirect("~/Home/Login");
}
}
<body>
<div class="paycheck-table-container">
#using (Html.BeginForm("ViewPayCheck", "Dashboard", FormMethod.Post))
{
<table id="paycheck-table">
#foreach (var item in Model.ListOfServiceGroups)
{
<thead>
<tr>
<td id="service-name" colspan="4">
#item.service
</td>
</tr>
<tr>
<td id="service-duration">
<b>Duration: </b>#item.duration
</td>
<td id="service-rate">
<b>Rate: </b>$#item.rate
</td>
</tr>
</thead>
<tbody>
#foreach (var service in item.ListOfServices)
{
<tr>
<td>
#service.serviceDate.ToShortDateString()
</td>
<td>
#service.units
</td>
</tr>
}
<tr>
<td>
<u><b>Total Units: </b>$#item.TotalUnits</u>
</td>
</tr>
</tbody>
}
<tfoot>
<tr>
<td colspan="4">
<b>Your Pay Before Deductions: #Model.TotalPayBeforeDeductions</b>
</td>
</tr>
</tfoot>
</table>
}
</div>
</body>
StyleSheet:
.footer-wrapper {
height: 100px;
background-color: rgb(20, 20, 23);
width:100vw;
left:0px;
position:absolute;
min-width:600px;
}
.footer-content {
width: 100%;
line-height:100px;
padding-left: 15px;
padding-right: 15px;
margin-right: auto;
margin-left: auto;
color:rgba(255,255,255,0.2);
}
When a field value is too long in my bootstrap table, the table will extend to the length of the parameter even if its past the container. The only way I was able to somewhat prevent this is by using responsive-table, however then a scroll bar shows up on the bottom and you have to scroll all the way to the right to see the table data. How can I make it so when my table reaches the length of the container, the row data will wrap?
Here is an image of what is going on: http://i.stack.imgur.com/Bo1dO.jpg
Here is a portion of my view, the CSS and example can be seen here: https://jsfiddle.net/bsxtpoqd/
<div class="container">
<div class="row tab-content">
<div class="row">
<h3>Assigned Games</h3>
<p>Please enter a search string in the textbox to search for users</p>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="tableSearch" placeholder="Enter search term...">
</div>
</form>
<div class="table">
<table id="userTable" class="table">
<thead>
<tr>
<th>UserName</th>
<th>Alternate</th>
<th>Email</th>
<th>Assigned Games</th>
<th>Unassigned Games</th>
</tr>
</thead>
<tbody>
#foreach (var user in Model)
{
<tr>
<td>#Html.ActionLink(user.UserName, "_GameAssigner", "Admin", new { insUserId = user.InstitutionUserId }, new { #class = "modal-link" })</td>
<td>
#user.AlternateId
</td>
<td>#user.Email</td>
<td>
#if (user.Assigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Assigned){<div>#gameName</div>}">
#user.Assigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
<td>
#if (user.Unassigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Unassigned) {<div>#gameName</div>}">
#user.Unassigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
You need to break up the long word.
<td style="word-break:break-all">
This is you need:
<style>
td
{
word-break: normal;
}
</style>
I am trying to display some images in a table in actual sizes. I resized the original into 3 large medium and thumbnail. I am trying to use styles, but currently it is distorting the images, making them very blurry.
How do manipulate the style or whatever to correctly size these without distortion. I know the sizes in px.
Large is 1900 x 1406
Medium is 400 x 296
Small is 100 x 100
I provide two samples below First I want to display the medium one but shrink it a little.
second I want to show all three in actual size.
<div class="row">
#{
foreach (var item in Model.OrderBy(x => x.DisplayOrder))
{
<div class="col-sm-6 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="data:image/jpg;base64,#(Convert.ToBase64String(item.OrderedImages[0].LargeImage))" onclick="javascript:window.open('#item.OrderedImages[0].FilePathLarge');" alt="#item.OrderedImages[0].Name" />
<div class="caption">
<h2>#Html.DisplayFor(modelItem => item.ProductName)</h2>
<p>
#(Html.Kendo().DatePicker().Name("datepicker" + #item.ID))
#if (HttpContext.Current.User.IsInRole("admin"))
{
Edit Item
}
Add to Cart
More Info
</p>
</div>
</div>
</div>
}
}
</div>
#model IEnumerable<MVC.CFC.Domain.Models.ProductImage>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.DisplayOrder)
</th>
<th>
#Html.DisplayNameFor(model => model.Description)
</th>
<th>
#Html.DisplayNameFor(model => model.LargeImage)
</th>
<th>
#Html.DisplayNameFor(model => model.MediumImage)
</th>
<th>
#Html.DisplayNameFor(model => model.ThumbImage)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.DisplayOrder)
</td>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
<div style="overflow:hidden;width:1900px;height:auto">
<img src="data:image/jpg;base64,#(Convert.ToBase64String(item.LargeImage))" alt="#item.Name" style="width: 50%; height: auto;" />
</div>
<td>
<td>
<div>
<img class="img-rounded" src="data:image/jpg;base64,#(Convert.ToBase64String(item.MediumImage))" alt="#item.Name" />
</div>
<td>
<td>
<div>
<img class="img-rounded" src="data:image/jpg;base64,#(Convert.ToBase64String(item.ThumbImage))" alt="#item.Name" />
</div>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
#Html.ActionLink("Details", "Details", new { id = item.ID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.ID })
</td>
</tr>
}
</table>
You can explicitly add the size in the html of your image tag.
<img src="data:image/jpg;base64,#(Convert.ToBase64String(item.OrderedImages[0].LargeImage))"
onclick="javascript:window.open('#item.OrderedImages[0].FilePathLarge');"
alt="#item.OrderedImages[0].Name" height="#item.OrderedImages[0].height"
width="#item.OrderedImages[0].width"/>