I am developing a tizen web application using html, js, tau and jquery.
I need a context menu when user click on a specific position.
Is it possible to do that ?
I tried,
$("#myContextMenu").popup('open');
it shows
TypeError: $(...).popupwindow is not a function
Any help will be appreciated.
You need to add TAU library. TAU has different types of Context menu.
Try like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css">
<meta name="description" content="Tizen Mobile Application"/>
<title>Hello Tizen</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/main.js"></script>
<script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
</head>
<body>
<div class="ui-page" id="list-styles-page">
<div class="ui-header" data-position="fixed">
<h1>Home</h1>
</div>
<div class="ui-content">
<ul class="ui-listview">
<li class="ui-group-index">Horizontal Style</li>
<li class="ui-li-anchor">Horizontal Basic</li>
<li class="ui-li-anchor">Horizontal Scroll</li>
<li class="ui-li-anchor">Horizontal 2line</li>
<li class="ui-group-index">Vertical Style</li>
<li class="ui-li-anchor">Vertical Basic</li>
</ul>
<div id="ctxpopup_horizontal_basic" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
</ul>
</div>
<div id="ctxpopup_horizontal_scroll" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
<li class="ui-li-anchor">Clipboard</li>
<li class="ui-li-anchor">Close</li>
</ul>
</div>
<div id="ctxpopup_horizontal_2line" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Select All</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Paste</li>
</ul>
<ul class="ui-listview">
<li class="ui-li-anchor">Clipboard</li>
<li class="ui-li-anchor">Dictionary</li>
<li class="ui-li-anchor">Translate</li>
<li class="ui-li-anchor">Share via</li>
</ul>
</div>
<div id="ctxpopup_vertical_basic" class="ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
<li class="ui-li-anchor">Clipboard</li>
</ul>
</div>
</div>
</div>
</html>
here is a demo of vertical style (basic)
Please see Tizen Online Sample 'TAUUIComponents' for TAU examples
Related
Navbar Toggle is not working with Bootstrap 5.2. The hamburger button shows correctly when screen is small but when I click on button the nav items don't appare. Any suggestion?
`
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
Tech Blog
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"/>
</body>
`
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
Tech Blog
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
just change script to this
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
I'm in the process of learning JS and have made a collapsable navbar. I got the menu to
open upon clicking the button, but it will not close. I've searched this site for
answers but anything I've found refers to Bootstrap. This is just pure JS. I've also
looked over my code for hours trying to spot a syntax error or anything that could be
going wrong. Any help would be greatly appreciated!
I am working on the latest version of bootstrap which 5.1 and facing this problem.
I am not able to resolve this. Navbar toggler is not closing after opening.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto ">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
Help me regarding this issue.
I have included js bootstrap already.
Solution -
comment out Separate Popper and Bootstrap JS
Navbar code structure modified as per bootstrap site
Ref URLs -
https://getbootstrap.com/docs/5.1/components/navbar/#external-content
https://getbootstrap.com/docs/5.1/getting-started/introduction/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="collapse" id="navbarTogglerDemo01">
<ul class="bg-dark p-4">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!-- <script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script> -->
</body>
</html>
<!doctype html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="collapse" id="navbarTogglerDemo01">
<ul class="bg-dark p-4">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!-- <script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script> -->
</body>
</html>
you must remove bootstrap bundle library,then run again
I'm using Bootstrap 4 to build my personal website. I'm CDN Bootstrap and FontAwesome. All of the icons are showing in the page but are not clickable. The code in my <head> is as follow...
<head>
<meta charset="UTF-8">
<!--Bootstrap CSS-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="
{{site.baseurl}}/css/main.css">
<title>Gilberto Diaz</title>
</head>
The structure of the navbar is as follow...
<!--Navbar Image & Social Icons-->
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<a class="navbar-brand" href="{{site.baseurl}}"><img class="img-fluid" src="{{site.baseurl}}/images/profile_img_bw.png"
alt="Gilberto Diaz Profile Picture"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="brand-text" href="{{site.baseurl}}">Gilberto Diaz <span class="sr-only">(current)</span></a>
</li>
</ul>
<a class="nav-link" href="mailto:{{site.author.email}}?subject=feedback" title="Email me">
<i class="fa fa-envelope"></i>
</a>
<a class="nav-link" href="https://twitter.com/{{ site.twitter_username }}" title="Twitter">
<i class="fa fa-twitter-square"></i>
</a>
<a class="nav-link" href="https://www.linkedin.com/in/{{ site.linkedin_username }}" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a>
</div>
</nav>
<!--End of Navbar Image & Social Icons-->
_config.yml is as follow...
twitter_username: diazgilberto
github_username: diazgilberto
google_plus_username: +GilbertDiazCasanas
linkedin_username: diazgilberto
Two things:
When I hover cursor should change automatically with anchor tags in bootstrap and is not doing that.
Nothing happens when you click in the social icon
i am trying to show the Layout page content in normal razor view but it is not working. in plain html page it's working fine.
But if i want to implement this in asp.net mvc then the Layout page content is not showing
i am not sure where i am getting wrong.
This is my plain html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Focus / Seçkin Bütün</title>
<link href="Asset/Style/Bootstrap.css" rel="stylesheet" />
<link href="Asset/Style/Bootstrap-Theme.css" rel="stylesheet" />
<link href="Asset/Font/FontAwesome.css" rel="stylesheet" />
<link href="Asset/Style/Style.css" rel="stylesheet" />
<link href="Asset/Style/Style-Responsive.css" rel="stylesheet" />
<link href="Asset/Style/Print.css" rel="stylesheet" media="print" />
<link href="Favicon.ico" rel="shortcut icon" />
<script src="Asset/Script/jQuery.js" type="text/javascript"></script>
<script src="Asset/Script/Angular.js" type="text/javascript"></script>
<script src="Asset/Script/Bootstrap.js" type="text/javascript"></script>
<script src="Asset/Script/Spin.js" type="text/javascript"></script>
<script src="Asset/Script/Design.js" type="text/javascript"></script>
<script src="Asset/Script/Script.js" type="text/javascript"></script>
</head>
<body>
<span id="ToastBox"></span>
<section id="container">
<header class="navbar navbar-default navbar-static-top clearfix Header" id="Header" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="Asset/Image/Logo_Focus.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav NavMenuSide">
<li><a class="fa fa-bars ButtonCircle" id="btnSideMenu" href="javascript:;"></a></li>
</ul>
<ul class="nav navbar-nav navbar-right NavMenuRest">
<li class="dropdown NavSubMenuUser">
<span class="caret"></span> Seçkin Bütün
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-bell-o"></i> Notifications</li>
<li><i class="fa fa-cog"></i> Profile</li>
<li><i class="fa fa-key"></i> Logout</li>
</ul>
</li>
<li class="dropdown NavSubMenuNotification">
<ul class="dropdown-menu" role="menu">
<li>• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et lorem lectus. Vestibulum vel felis enim. Nullam egestas justo at nunc semper</li>
</ul>
</li>
<li class="NavSubMenuLock"><a class="fa fa-lock ButtonCircle" id="btnLock" href="#"></a></li>
</ul>
</div>
</div>
</header>
<aside id="SideMenu" class="SideMenu">
<div class="SideNavigation">
<ul class="Side-Accordion" id="Side-Accordion">
<li><i class="fa fa-dashboard"></i><span>Dashboard</span></li>
<li class="Sub-Accordion">
<i class="fa fa-tasks"></i><span>Operation</span>
<ul class="Sub-AccordionList Active">
<li>Cost</li>
<li>Customer</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-building-o"></i><span>Definition</span>
<ul class="Sub-AccordionList">
<li>Brand</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-bar-chart-o"></i><span>Report</span>
<ul class="Sub-AccordionList">
<li>Factory</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-gears"></i><span>Administration</span>
<ul class="Sub-AccordionList">
<li>Configuration</li>
</ul>
</li>
</ul>
</div>
</aside>
<section class="container-fluid MainContent">
<div class="row">
<div class="col-sm-12">
<div class="page-header FocusHeader">
<h1>Profile</h1>
</div>
</div>
</div>
</section>
</section>
<script src="Asset/Script/Complete.js" type="text/javascript"></script>
</body>
</html>
and this is my Layout page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Focus / Seçkin Bütün</title>
<meta name="author" content="Magnifo / http://www.magnifo.com" />
#Scripts.Render("~/bundles/AssetScripts")
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Bootstrap-Theme.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Bootstrap.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Markup.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Print.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Style-Responsive.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Style.css")" />
</head>
<body>
<div>
<span id="ToastBox"></span>
<section id="container">
<header class="navbar navbar-default navbar-static-top clearfix Header" id="Header" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="Asset/Image/Logo_Focus.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav NavMenuSide">
<li><a class="fa fa-bars ButtonCircle" id="btnSideMenu" href="javascript:;"></a></li>
</ul>
<ul class="nav navbar-nav navbar-right NavMenuRest">
<li class="dropdown NavSubMenuUser">
<span class="caret"></span> Seçkin Bütün
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-bell-o"></i> Notifications</li>
</ul>
</li>
<li class="dropdown NavSubMenuNotification">
<ul class="dropdown-menu" role="menu">
<li>• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et lorem lectus. Vestibulum vel felis enim. Nullam egestas justo at nunc semper</li>
</ul>
</li>
<li class="NavSubMenuLock"><a class="fa fa-lock ButtonCircle" id="btnLock" href="#"></a></li>
</ul>
</div>
</div>
</header>
<aside id="SideMenu" class="SideMenu">
<div class="SideNavigation">
<ul class="Side-Accordion" id="Side-Accordion">
<li><i class="fa fa-dashboard"></i><span>Dashboard</span></li>
<li class="Sub-Accordion">
<i class="fa fa-tasks"></i><span>Operation</span>
<ul class="Sub-AccordionList Active">
<li>Cost</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-building-o"></i><span>Definition</span>
<ul class="Sub-AccordionList">
<li>Brand</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-bar-chart-o"></i><span>Report</span>
<ul class="Sub-AccordionList">
<li>Factory</li>
</ul>
</li>
<li class="Sub-Accordion">
<i class="fa fa-gears"></i><span>Administration</span>
<ul class="Sub-AccordionList">
<li>Configuration</li>
</ul>
</li>
</ul>
</div>
</aside>
<section class="container-fluid MainContent">
<div class="row">
<div class="col-sm-12">
#RenderSection("featured", required: false)
#RenderBody()
</div>
</div>
</section>
</section>
</div>
</body>
</html>
razor view page
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Test</h2>
I resolve the problem. it was the css of print.
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Asset/Style/Print.css")" />
it will be
<link href="#Url.Content("~/Asset/Style/Print.css")" rel="stylesheet" media="print" />
There is no need to mention layout file path in Test view if you have set this path in _ViewStart.cshtml file. Please verify that, does this path exists in the _Viewstart.cshtml file or not.
I have just started using jquery mobile and got a weird thing happening. When I click the navigation bar quickly(on different item each time) my footer disappears on one of these pages.
Here is my code (that's the main file but all other files are identical with the exception of ui-active class on the nav bar item)
<!DOCTYPE html>
<html>
<head>
<title>Page Title in head</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="js/lib/jquery.mobile-1.0b1.css" />
<script type="text/javascript" src="js/lib/jquery-1.6.1.js"></script>
<script type="text/javascript" src="js/lib/jquery.mobile-1.0b1.js"></script>
<script>
$.mobile.defaultPageTransition='none';
//$.mobile.useFastClick='false';
</script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<h1>Friends</h1>
Home
</div>
<div data-role="content">
<p>
This is the test
</p>
<ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">
<li data-role="list-divider">
A
</li>
<li>
Adam Kinkaid
</li>
<li data-role="list-divider">
B
</li>
<li>
Bob Cabot
</li>
<li data-role="list-divider">
C
</li>
<li>
Caleb Booth
</li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-id="footer" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
<div data-role="navbar">
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</div><!-- /navbar -->
</div><!-- /page -->
</body>
</html>
Should I just stop using jquerymobile footers or does anyone know a workaround?
Thank you!