I'm working on a web application which uses classical ASP .NET MVC, but with bootstrap. The default page template I use looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#ViewData["Title"] - Gymfed JuryTool</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<!-- Our Custom CSS -->
<link rel="stylesheet" href="~/css/style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/612fd28750.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>The Site</h3>
<strong>JT</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a asp-area="" asp-controller="Home" asp-action="Index">
<i class="fas fa-home"></i>
Start
</a>
</li>
#{
if (User.Identity.IsAuthenticated)
{
if (userMenus != null)
{
foreach (var userMenu in userMenus)
{
// Debug
Debug.WriteLine($"userMenu = {JsonConvert.SerializeObject(userMenu)}");
var controlName = userMenu.MenuName + "SubMenu";
<li>
<a href="##controlName" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
#userMenu.Caption
</a>
<ul class="collapse list-unstyled" id="#controlName">
#foreach (var menuItem in userMenu.MenuElements)
{
// Debug
Debug.WriteLine($"menuItem = {JsonConvert.SerializeObject(menuItem)}");
<li>
<a asp-area=#menuItem.AspArea asp-controller=#menuItem.AspController asp-action=#menuItem.AspAction>#menuItem.ElementName</a>
</li>
}
</ul>
</li>
}
}
}
}
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<partial name="_LoginPartial" />
</li>
</ul>
</div>
</div>
</nav>
#RenderBody()
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - <i>Gymfed</i>
</div>
</footer>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
The CSS files I include primarily are used for the collapsable menus and the likes.
Now the site looks fine, but to show everything on my screen I need to change the zoom to 80%.
I know Boostrap should be doing that for me, but though I follow their examples and everything looks fine when I zoom out to 80%...
I was wondering how I can have this happen automatically? Been looking around, but can't seem to find an actual answer to my question.
Related
I am having some trouble implementing a datepicker for date fields on some of my views. I get an error:
JavaScript runtime error: Object doesn't support property or method 'datepicker'
This is my _Layout code and I can't seem to figure on why this error continues to pop up. Any help would be greatly appreciated.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="#Url.Content("~/Scripts/jquery-2.1.3.js")"
type="text/javascript"></script>\
<script src="#Url.Content("~/Scripts/bootstrap.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/boostrap-datepicker.min.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DatePickerReady.js")"
type="text/javascript"></script>
<script>
$(function () {
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<p class="nav navbar-text navbar-right">Hello, #User.Identity.Name!</p>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
May be the problem is your code is adding jQuery and Bootstrap twice by calling:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
This is a documented cause of issues with jQuery. I get a similar error in this snippet when adding jQuery twice.
<html>
<head>
<title>DatePicker Example</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datep").datepicker();
});
</script>
</head>
<body>
<h3>Click to select a date :</h3>
<input type="text" id="datep" />
<script src="https://code.jquery.com/jquery-1.12.4.js">
</body>
</html>
Uncaught TypeError: $(...).datepicker is not a function
Just remove extra jQuery and any other duplicated library. Also include jQuery UI as suggested by user Shyju.
<html>
<head>
<title>DatePicker Example</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datep").datepicker();
});
</script>
</head>
<body>
<h3>Click to select a date :</h3>
<input type="text" id="datep" />
</body>
</html>
I'm making use if Jquery mobile for its data-transition="slide".
Thats working fine, each page loaded is its own page,not tab data sliders (if that makes any difference)
I'm trying to have some JavaScript trigger after the page has been loaded by the slider transition.
I have a js file that is to set the max height of a control - this works fine if I'm on the page and refresh but if its loaded by the sliding transition, the JavaScript wont fire. I've tried it in pageinit, pageload etc but nothing triggers.
Can anyone point out the issue here.
App.JS
$(document).ready(function () {
var header = document.getElementById('header').offsetHeight;
var footer = document.getElementById('pagefooter').offsetHeight;
var wrapperH = window.innerHeight - header - footer - 50;
document.getElementById('maincontent').style.height = wrapperH + 'px';
});
$(document).on("pageinit", function (event) {
var header = document.getElementById('header').offsetHeight;
var footer = document.getElementById('pagefooter').offsetHeight;
var wrapperH = window.innerHeight - header - footer - 50;
document.getElementById('maincontent').style.height = wrapperH + 'px';
});
$(document).off('pageshow');
$(document).on('pageshow', function (e, ui) {
// generally written in pagechange event.
var header = document.getElementById('header').offsetHeight;
var footer = document.getElementById('pagefooter').offsetHeight;
var wrapperH = window.innerHeight - header - footer - 50;
document.getElementById('maincontent').style.height = wrapperH + 'px';
});
Base mvc layout page
#{
ViewData["Logo"] = "bird.png";
ViewData["Icon"] = "cascade.ico";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="Robots" content="noindex" />
<title>#ViewBag.SiteTitle</title>
<link rel="icon" type="image/x-icon" href="~/img/#ViewBag.Icon" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<environment names="Development">
<!-- Dev uses full file versions for de-bugging -->
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
</environment>
<environment names="Staging,Production">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</environment>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/styles/all/all.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="~/Styles/Mobile/mobile.css" media="only screen and (max-width: 481px)" />
<link rel="stylesheet" type="text/css" href="~/Styles/Desktop/desktop.css" media="only screen and (min-width: 481px)" />
<script type="text/javascript">
</script>
#RenderSection("Scripts", false)
</head>
<body>
<div data-role="page">
<div id = "header" data-role="header" data-id="persistent" data-position="fixed">
<div id="headnav" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-toggle navbar-text" data-toggle="collapse">
<h3 class="title">#ViewBag.Title</h3>
<h5 class="subtitle">#ViewBag.SubTitle</h5>
</div>
<div class="navbar-left" rel="home" href="#" title="#ViewBag.SiteTitle">
<a href="#Url.Action("Index", "App")" title="Home">
<img style="max-width:100px; max-height: 100px; margin-top: 5px"
src="~/img/#ViewBag.Logo">
</a>
</div>
<div class="navbar-collapse collapse navbar-text">
<h3 class="title">#ViewBag.Title</h3>
<h5 class="subtitle">#ViewBag.SubTitle</h5>
</div>
<!-- Logout Box -->
<div class="pull-right">
#await Component.InvokeAsync("Logout")
</div>
</div>
</div>
</div>
<!-- content -->
<div id="maincontent" data-role="content">
#RenderBody()
</div>
<footer id="pagefooter" data-id="persistent" data-position="fixed">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-collapse collapse" id="footer-body">
<ul class="nav navbar-nav">
<li><a data-transition="slide" href="#Url.Action("MyDetails", "App")"><img src="~/img/icons/myrecord.png" />My Record</a></li>
<li><a data-transition="slide" href="#Url.Action("MyTeam", "App")"><img src="~/img/icons/myteam.png" />Team Headcount</a></li>
<li><a data-transition="slide" href="#Url.Action("Holidays", "App")"><img src="~/img/icons/holidays.png" />My Holidays</a></li>
<li><a data-transition="slide" href="#Url.Action("Payslips", "App")"> <img src="~/img/icons/payslips.png" />Payslip</a></li>
<li><a data-transition="slide" href="#Url.Action("Tasks", "App")"><img src="~/img/icons/tasks.png" />Tasks</a></li>
<li><a data-transition="slide" href="#Url.Action("Requests", "App")"><img src="~/img/icons/authorise.png" />Requests</a></li>
</ul>
</div>
#*<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="footer-bar-btns visible-xs">
<li><i class="fa fa-2x fa-clock-o blue-text">Link 1</i></li>
<li><i class="fa fa-2x fa-star yellow-text">Link 2</i></li>
<li><i class="fa fa-2x fa-rss-square orange-text">Link 3</i></li>
</ul>
</div>*#
</div>
</div>
</footer>
</div>
<!-- overriding customer styles -->
<link href="~/styles/customstyles.css" rel="stylesheet" />
<script src="~/app.js"></script>
</body>
</html>
Managed to sort this with CSS in the end.
Knowing the height of the top and bottom menu bars means I could just set the below:
#maincontent {
position: fixed;
top: 120px;
bottom: 70px;
left: 0;
right: 0;
width:100%;
}
Now there is no overlap and I can freely debug my site in a browser and it looks correct on any setting.
I tried to change several times the file but the only thing that I accomplishing every time is to add more invalid expressions
I am not able to see why now I have 6 invalid expression terms ';' in the following code?
This my _layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title - Moran</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootswatch/yeti/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<nav class="navbar navbar-default"></nav>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header ">
#if (User.Identity.IsAuthenticated)
{
<span id="username">#User.Identity.Name</span>
}
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Moran", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a asp-controller="App" asp-action="Index">Home</a></li>
<li><a asp-controller="App" asp-action="ContactUs">Contact Us</a></li>
<li><a asp-controller="App" asp-action="About">About</a></li>
<li><a asp-controller="App" asp-action="Galery">Galery</a></li>
<li><a asp-controller="App" asp-action="Trips">Trips</a></li>
#if (User.Identity.IsAuthenticated)
{
<li><a asp-controller="Auth" asp-action="Logout">Logout</a></li>
}
</ul>
</div>
</div>
</div>
<div id="main" class="container-fluid">
<div>
#RenderBody()
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<p class="text-center text-danger">© #DateTime.Now.Year - Moran Ribadeo S.L.</p>
</div>
</div>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<environment names="Development">
<script type="text/javascript" src="~/jScript/site.js"></script>
</environment>
<environment names="Production,Staging">
<script type="text/javascript" src="~/lib/_app/site.js"></script>
</environment>
#RenderSection("Scripts", false)
</body>
</html>
Could anybody advise?
#model IEnumerable<Moran.Models.Trip>
#{
ViewBag.Title = "Home Page";
}
<div class="row">
<div class="col-md-6">
<h1>Welcome</h1>
<p>This is the welcome page</p>
<a asp-controller="App" asp-action="trips" class="btn btn-lg btn-success">View trips</a>
</div>
</div>
I have built a jQuery Mobile application, but I have one issue I don't understand.
I am using the multi-page functionality, but when you are in a page and you change the screen orientation, it jumps back to the start page. I do not understand how to stay on the current page when changing orientation.
I have tried this:
$(window).bind("orientationchange", function (e, ui)
{
var sPage ="#"+$.mobile.activePage.attr("id");
$.mobile.changePage(sPage);
alert(sPage);
});
The alert() showed the correct page where I want to stay.
Below is an example how is made the multipage. If i select the option 'Instellingen',
This pages showed. But when i change the smartphone orientation, it jumps back to the menu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Mobile</title>
<link rel="stylesheet" href="../css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="../css/jquery.dataTables.css" />
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="../js/DataBase.js"></script>
<script type="text/javascript" src="../js/Webservice.js"></script>
<script type="text/javascript" src="../js/Misc.js"></script>
</head>
<body>
<div id="Menu" data-role="page" data-title="Hoofdmenu">
<div data-role="header">
<h1>Menu</h1>
</div>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Hoofd Menu</li>
<li><a href="#Instellingen"><h3>Instellingen</h3>
<p>Algemene programma instellingen</p></a></li>
</ul>
</div>
<div id="Instellingen" data-role="page" data-title="Instellingen">
<div data-role="header">
<h1>Programma instellingen</h1>
<a data-role="button" data-direction="reverse" data-rel="back" href="#Menu" data-icon="arrow-l" data-iconpos="left" data-theme="b">
Back</a></div>
<div data-role="content" data-theme="b">
<ul data-role="listview" data-inset="true" >
<li><div><h1>WCF adres<input id="Adress" type="url"/></h1> </div>
<div data-role="controlgroup" data-type="horizontal">
<a id="Test" data-role="button">Test</a>
<a id="Opslaan" data-role="button">Opslaan</a>
</div></li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$("#Test").click(function () {
if ($("#Adress").val().length > 0)
CheckWebService($("#Adress").val(), function (Check) { alert(Check); })
else
alert("Geen adres of error")
});
$("#Opslaan").click(function () { saveURL($("#Adress").val()); });
$("#Dummy").click(function () { alert("dummy"); });
$("#ResetDatabase").click(function () { $.mobile.showPageLoadingMsg("b", "Sync"); ResetDatabase(); });
});
</script>
</body>
</html>
I had the exact same issue for months, until today I added the screenSize parameter to the android manifest, as follows:
android:configChanges="orientation|screenSize|keyboardHidden"
Hope that helps!
I Am trying to fill jquery mobile listivew using knockoutjs library, but my problem is the header of the list view(list-divider) is is repeated. I was wondering how to solve this issue,
this is my code and thanks for help.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-bind="foreach:seats" data-theme="b" data-filter="true"
>
<li data-role="list-divider">List </li>
<li>
</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
function Reservation(reservationId, covers) {
var self = this;
self.reservationId = reservationId;
self.covers = covers;
}
function ReservationsViewModel()
{
var self = this;
self.seats = ko.observableArray();
self.fillReservations=function()
{
var mydata={
"result":[
{
"reservationId": "23424574367436523452345",
"covers" : "4"
},
{
"reservationId": "23424574367436523452345",
"covers" : "4"
}
]
};
$.each(mydata.result, function (index, value) {
self.seats.push(new Reservation(this.reservationId,this.covers));
});
}//End fillReservations
self.fillReservations();
}// End ReservationsViewModel
ko.applyBindings(new ReservationsViewModel());
</script>
</body>
</html>
Thanks for help.
I solved my problem by using containerless control flow syntax.
Try Like this :
<ul data-role="listview" id="ListSearch" data-divider-theme="b" data-inset="true" >
<li data-role="list-divider" role="heading">
Criteria Selected
</li>
<!-- ko foreach: Contacts -->
<li data-theme="c">
<a href="#page3" data-transition="slide">
<span data-bind="text: FirstName " ></span>
</a>
</li>
<!-- /ko -->
</ul>