create a clickable table row using jquery mobile - jquery-mobile

I need a clickable "table" in my app.
The closest I have gotten is using listviewer and links in combination with grid.
The example below is what I need (a clickable tablerow and a separate button to the right).
My problem is that I cant line up the "body-columns" with the "header-titles" becuase the button in my "table body" offsets the grid.
http://jsfiddle.net/lokkin/p9M8p/3/
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<ul data-role="listview" data-split-icon="gear" data-inset="true">
<li data-role="list-divider">
<div class="ui-grid-d">
<div class="ui-block-a">TRK</div>
<div class="ui-block-b">STATUS</div>
<div class="ui-block-c">NR</div>
<div class="ui-block-d">PFIX</div>
<div class="ui-block-e">EHNR</div>
</div>
</li>
<li> <a href="#Select" class="ui-grid-d">
<div class="ui-block-a">
TRUCK1
</div>
<div class="ui-block-b">
123
</div>
<div class="ui-block-c">
ABC123
</div>
<div class="ui-block-d">
456
</div>
<div class="ui-block-e">
789
</div>
</a>
Details
</li>
</ul>
</div>
</body>
</html>

Just add right padding to the divider to match the listitems:
.ui-li-divider{
padding-right: 56px !important;
}
Updated FIDDLE

Related

Why is my bootstrap header covering other content? [duplicate]

This question already has answers here:
top nav bar blocking top content of the page
(20 answers)
Closed 6 years ago.
I have a problem using Bootstrap's grid system, what's happening is that my nav bar is seemingly covering up the other content, which is intended to be underneath it!
I'm using ASP.NET MVC in this Project, so all I've done is set up a Layout page like this;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>You Hire it Ltd</title>
<script src="~/scripts/jquery-2.2.4.js"></script>
<script src="~/scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="col-md-8">
<div class="navbar-header">
<a class="navbar-brand" href="#">
You Hire It
</a>
</div>
<ul class="nav nav-pills">
<li class="active">#Html.ActionLink("Home", "Index")</li>
<li>#Html.ActionLink("About", "About")</li>
<li>#Html.ActionLink("T&Cs", "Legal")</li>
<li>#Html.ActionLink("Contact us", "Contact")</li>
</ul>
</div>
<div class="col-md-offset-2"></div>
<div class="col-md-2 pull-right">
<div class="container-fluid">
<div class="ButtonWrapper">
<button class="btn btn-success">Sign up/Login</button>
</div>
</div>
</div>
</nav>
</header>
</div>
</div>
#RenderBody()
</body>
</html>
and the page in question is like this;
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h1>Hello</h1>
</div>
</div>
</div>
I'm not entirely sure what's causing this behavior, any pointers would be greatly appreciated.
Thanks guys :)
You need to add padding to the top. From the Bootstrap docs:
The fixed navbar will overlay your other content, unless you add padding to the top of the body.
So in your style.css you need..
body {
padding-top:70px;
}

jquerymobile panel cross page?

jquerymobile panel cross page
I wanna make a same panel menu for every page.
because the panel menu is the same content for every page.
How do I do? or any suggest?
My sample code is by following
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div data-role="page" id="status">
<div data-role="header" data-theme="b">
<h1>Access Point Status</h1>
<a class="ui-btn" data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-menu">menu</a>
</div>
<div id="left-menu" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
</div>
<div data-role="page" id="A">
<div data-role="header" data-theme="b">
<h1>PAGE A</h1>
<a class="ui-btn " data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-a">menu</a>
</div>
<div id="left-a" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</html>
create a panel in body tag and outside page div like following
<body>
<div data-role="panel" id="myPanel" data-display="overlay" data-position="right" data-theme="b">
<ul data-role="listview">
<li data-icon="false">
<a href="#" data-transition="pop" data-rel="close">
Home
</a>
</li>
<li data-icon="false">
Logout
</li>
</ul>
</div>
<div data-role="page" id="login">
..... page ....
</div>
.... other pages ....
</body>
then in pagecreate event of first page add this
$(document).on("pagecreate", "#firstPage", function () {
$("body>[data-role='panel']").panel().enhanceWithin(); //you can put this in document.ready but its not preferable
}

How to add external panel on jquery mobile

I tried to implement external panel on JQM 1.4.5 but I did'nt success to display it correctly on my web app. JQM 1.4.5 doc about external panel
My code is written below.
Thanks for helping,
Clément
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some content
</div>
</div>
<div data-role="page" id="contact">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some other content
</div>
</div>
<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a">
<div class="ui-panel-inner">
<ul data-role="listview">
<li data-icon="home">
<a id="menu-home" href="index.php#home">Home</a>
</li>
<li data-icon="user">
<a id="menu-account" href="#">Account</a>
</li>
<li data-icon="gear">
<a id="menu-settings" href="#">Settings</a>
</li>
<li data-icon="mail">
<a id="menu-contact" href="#contact">Contact</a>
</li>
</ul>
</div>
</div><!-- /mypanel -->
</body>
</html>
You need to enhance the panel in java-script. In $(document).ready write the following code:
$('#mypanel').enhanceWithin().panel();

jquerymobile. Footer disappears when switching pages quickly

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!

Fixed header hiding content in JQuery Mobile

I am running jquery-mobile alpha 1 and I am creating a list with a fixed header. When I view the page the header is on top of the first list item. The only solution I have found so far is to put a hidden list item with enough space at the top for the header to cover. Is there any other solution?
Here is an initial example:
<!DOCTYPE HTML>
<html>
<head>
<title>JQuery Mobile List test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true" id="list">
<div data-role="header" data-position="fixed">
<h1>This is a header</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> <div>Item 1</div> </li>
<li> <div>Item 2</div> </li>
<li> <div>Item 3</div> </li>
<li> <div>Item 4</div> </li>
<li> <div>Item 5</div> </li>
<li> <div>Item 6</div> </li>
<li> <div>Item 7</div> </li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
For the record the problem was that the header had 'data-fullscreen="true".
<header data-fullscreen="true>
After removing this attribute the list is placed below the header.

Resources