I am new jquery mobile. I implemented the table.it is displaying in the browsers correctly. But it is not fitted in the device screen. How to solve this issue? please can anybody help me.
code
< html>
< head>
< meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
table { width:100%; }
table th, td { text-align:left; padding:6px;}
< /head>
< body>
<div data-role="page" id="Calorie_Tracker">
<div data-role="header" data-theme="b" >
<a data-role="button" data-rel="back" data-icon="back">back</a>
<h1>Calorie Tracker</h1>
</div>
<div data-role="content">
<table border="1" >
<tr>
<th>Date</th>
<th>Food_Intake</th>
<th>Calories_Burned</th>
<th>Net</th>
</tr>
<tr>
<td>Dec20</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
< /body>
< /html>
Use
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke"></table>
(Not really an answer, but I can't post comments yet)
I am not sure if this will do for you, but you could try the JQuery Mobile Grid's:
http://jquerymobile.com/demos/1.0rc3/#/demos/1.0rc3/docs/content/content-grids.html
The width will adjust automatically.
I know this is an old post but it looks from the screenshot that the text in the table headers mean that the minimum width is always going to be more than the screen.
You could remove the underscores between words or reduce the font-size to help the text fit but this might be of no use if the text in the data cells expands the table size again.
This is a common issue with mobile devices though - data tables don't play well with responsive designs. A good link with options / workarounds can be found here:
http://css-tricks.com/responsive-data-tables/
Hope this helps anybody with a similar issue.
Use the CSS property word-break: break-all:
table th, td {
text-align:left;
padding:6px;
word-break: break-all;
}
Related
I was using a trial version of kendo grid then after the license expired my employer bought it so i was able to download (they gave access to my account - employer's account is separate)
telerik.kendoui.professional.2016.3.1118.commercial.msi
Now the problem is this is still not working, I have done the following steps to install kendo grid
I have run this installer, and have also manually added to my asp.net-mvc application
js folder under my application's Scripts/kendo folder
css files (styles folder) under my application's Content/kendo folder
My code
#Scripts.Render("~/Scripts/kendo/jquery.min.js")
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
#Scripts.Render("~/Scripts/kendo/kendo.all.min.js")
#Styles.Render("~/Content/kendo/kendo.common.min.css")
#Styles.Render("~/Content/kendo/kendo.default.min.css")
<script type="text/javascript">
//shorter version of document.ready
$(function () {
//kendo.ui.Grid
$("#grid").kendoGrid(
{
sortable: true,
dataSource: {
pageSize: 1
},
pageable:true,
resizable: true,
columnMenu: true,
scrollable:true
}
);
});
</script>
<div id="examplegrid">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
</tbody>
</table>
My browser does not have any errors. But i cannot see a kendo grid there.
get support it says you are not licensed for any products (which is confusing because i downloaded the commercial version from there)
I have also posted this to their forums (from my employer's account) but it takes them at least 3 days to respond!!
Page Source snap shot
I am also adding view source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>About - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script src="/Scripts/kendo/jquery.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.default.min.css" rel="stylesheet"/>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
UPDATE
When i re-opened visual studion it gave me option to update my telerik version which i said yes and it showed me the following screen.
After all this grid is still the same - without kendo-grid skin :S
UPDATE
I read this topic Widgets Are Unavailable or Undefined
So i removed a redundant jquery reference and now the grid looks like the attached image.
Note: this was a separate test appication and i intend to incorporate this grid into my main application. Now the grid looks like this
I found my answer from Bundle of Kendo UI is not working in IIS
So as soon as i renamed the bundle
bundles.Add(new StyleBundle("~/Content/kendo").Include(...));
To
bundles.Add(new StyleBundle("~/Content/kendoui").Include(...));
It worked great!
I'm working on my first app in jQuery Mobile. I'm stuck on a select menu.
I've tried to copy/paste the "Your state" style at http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html and work it into my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CAST</title>
<link rel="stylesheet" href="./custom.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<div data-role="page" data-theme="c" id="home-page" class="type-interior" data-url="home-page">
<div data-role="header" style="background:#AAA">
<h1><img src="/logo.png" width="97" height="50" border="0" /></h1>
</div>
<h2 id="header_title"></h2>
<div id="error" class="error" style="display:none;">Could not connect to the server. Please try again.</div>
<div data-role="content">
<div class="content-primary" id="content">
<div data-role="fieldcontain">
<label for="client" class="select">Client:</label>
<select name="client" id="client" data-native-menu="false">
<option value="1">Option 1</option>
</select>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2013</h4>
</div>
</div>
</body>
</html>
The select menu shows up, but it doesn't look like the custom mobile version on their site? It just looks like a regular select menu.
I don't understand enough jquery.mobile yet to really even know how to ask this question properly... but any help getting this to work would be appreciated!
If you mean the "Your state" example looks like a dialog, showing the contents of the menu alone in the screen, you have to add more options to the select element as it is stated in the page you link:
When it has too many options to show on the device's screen, the framework will automatically create a new "page" populated with a standard listview for the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the label is used as the title for this page.
I modified the jsfiddle provided by Omar to add more options and it looks exactly like in the original site
<Ignore>Code so I can post link to jsfiddle</ignore>
So i am new to the jquerymobile world.
I am trying to put a jquerywrapper around my users pages.
I have most of it working, but i am stuck where the page is wide and does not fit in the width of a mobile device and it seems to be a fixed wide and can not scroll
So i am looking for suggestions on the correct way to do this.
The wide data/page CANNOT be changed.
Thanks for any help
some of the key elements::
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css">
<body class="ui-mobile-viewport ui-overlay-c" >
<div class="pagewithmenu" data-role="page" id="user-home" data-theme="d" data-url="user-home">
<div data-theme="b" data-role="header" style="text-align: center;" data-title="<?=$siteuser->fname?> <?=$siteuser->lname?>">
<?=$siteuser->fname?> <?=$siteuser->lname?>
Home
</div>
<div id="mycontent" data-role="content" >
<div class="article" style="ov">
<!--
***** WIDE PAGE DATA HERE *****
this is user generated code and can be anything
for example this is one i am seeing the problem
-->
<table width="663" cellspacing="0" cellpadding="2" bordercolor="purple" border="5" background="http://www.unitnet.com/sboggs/picts//purple_star.jpg" height="497" class="c3">
<tr>
<td>
some picts
</td>
</tr>
</table>
</div>
</div>
</div>
The fixed header will not stay at the top of the page for me. It sits on top of a page that has several number inputs that were added via javascript. As the user fills out these inputs the header disappears as expected. However, the header will reapear in the middle of the page if the user taps out of the text boxes. The user has to tap twice to get it to move back to the top of the page.
/Edit
Here is another piece of important info. This is happening when I use the next button to move to the next text box as I fill in the information.
I have create a jsfiddle example of my page at http://jsfiddle.net/7PZPy/1/ . It won't show you the bug, but it should give you a good idea of what the page is about.
*/
This is a phonegap application running on iPhones and iPads. I am using JQM 1.3.1.
My research has caused me to try using the jquery full page mode and a fix position via CSS. I have also tried removing everything that was not inside of the h1 tags. Alas, the header moves up and down the page as long as the data position is set to fixed. My html is below. Please help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" href="css/ims-theme.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-migrate.js"></script>
<script type="text/javascript" src="js/jquerymobile.js"></script>
<script type="text/javascript" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/WaitingDialog.js"></script>
<script type="text/javascript" src="js/UniqueIdentifier.js"></script>
<script type="text/javascript" src="js/iti.js"></script>
<title>IMS Field Support</title>
</head>
<body>
<div data-role="page" id="invPage">
<script type="text/javascript" src="js/inventory.js"></script>
<div data-role="header" data-position="fixed">
<h1>Inventory</h1>
<div id="divAlert" style="display:none">
<a href="resolve.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true" class="ui-btn-right" >Alert</a>
</div>
</div>
<div id="inventoryContent" data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> Inventory</li>
<li>Technician</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</body>
</html>
The data-position="fixed" is used to make those smartphone-like headers that disapear with some clicks on body or some other events i dont care,
for what you want, you can just style your header with css with something like:
#myheader{
position: fixed !important;
width:100%;
top: 0px;
}
Works like a charm
PS: The !important overwrites any jquerymobile attempt to change position attribute, it may not be needed
Had you tried to also include the all three attributes to your header?
It works for me with all these specified:
data-position="fixed"
data-tap-toggle="false"
data-update-page-padding ="false"
Here is the code:
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding ="false"> </div>
Hope this help!
In my case, I fixed this bug by removing "top: 0" for my "position: fixed"
And it's fix! Weird I know...
I'm completely new to jQuery Mobile and just trying to get a feel for how it might to work in my environment.
One Page 1 I'm displaying values that come down from the server. What I want to do is go to Page2 to set the values and then pressing "Back" have page 1 show the updated values.
Currently when I hit back, it's showing the original values and I need to do a manual partial or full refresh to get them updated.
How can I tell jQuery Mobile to auto refresh a page on hitting the back button? I'm using data-rel="back".
I guess I'm looking to see if there's a universal setting for this or something. Similar to $.mobile.ajaxEnabled = false; which I needed to turn on in my environment to get things working.
Thanks
UPDATE:
I've added some code here per request. Not sure it will really help. But here's what's going on. I'm trying to use jQuery Mobile in the context of an IBM XPages application. XPages is basically Java Server Faces but it has Dojo 1.8.1 built into it do to certain things like a Partial Refresh of a Div automatically. So for instance on a button I can write server side code - int a Java Managed Bean, get a result, and have it partial refresh a div on the webpage. Cool stuff. But the problem I GUESS is conflicts between jQuery Mobile and the build in Dojo that makes those things work. I don't want to use the mobile portion of Dojo because jQuery seems so much better.
Anyway - I got jQuery Mobile to work by making sure it loaded BEFORE the dojo pieces loaded. The other way around it wouldn't work at all. I'd like to work with individual pages rather then virtual pages in one.
I'm not sure if I care about much caching really as the pages will almost always be changing. I'm working on an inventory application with iPads and barcode scanners. So for instance on page1 I scan an item. Then I might move to page 2 to let the user do something with the item, on hitting the back button I want page 1 to refresh so it's updated with any new information
Thanks for any advice!!!
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/#Da&#Ib&2Tfxsp.css&2TfxspLTR.css&2TfxspSF.css.css">
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.1/dojo/dojo.js" djConfig="locale: 'en-us'"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.en-us/#Iq.js"></script>
<script type="text/javascript">dojo.require('ibm.xsp.widget.layout.xspClientDojo')</script>
<link rel="stylesheet" type="text/css" href="/jqm.nsf/themes/czarnowskiMobile.min.css">
</head>
<body class="xspView tundra">
<form id="view:_id1" method="post" action="/jqm.nsf/home.xsp" class="xspForm" enctype="multipart/form-data">
<div data-role="page" data-theme="b">
<div data-role="header">
<h1><span id="view:_id1:_id2:computedField1" class="xspTextComputedField">Scanner</span></h1></div>
<div data-role="content">
<div id="view:_id1:_id2:callback3">
<ul data-role="listview"><li><a id="view:_id1:_id2:callback3:link2" href="/jqm.nsf/menuFacility.xsp" class="xspLink">Facility Menu</a></li><li><a id="view:_id1:_id2:callback3:link3" href="/jqm.nsf/menuShow.xsp" class="xspLink">Show Menu</a></li></ul><br><div id="view:_id1:_id2:callback3:_id12:timePanel">
<table><tr><td><span id="view:_id1:_id2:callback3:_id12:label1" class="xspTextLabel">viewScope</span></td>
<td><span id="view:_id1:_id2:callback3:_id12:computedField1" class="xspTextComputedField"></span></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button1" id="view:_id1:_id2:callback3:_id12:button1" data-role="none">Update</button></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button3" id="view:_id1:_id2:callback3:_id12:button3" data-role="none">Clear</button></td>
</tr>
<tr><td><span id="view:_id1:_id2:callback3:_id12:label2" class="xspTextLabel">sessionScope</span></td>
<td><span id="view:_id1:_id2:callback3:_id12:computedField2" class="xspTextComputedField"></span></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button2" id="view:_id1:_id2:callback3:_id12:button2" data-role="none">Update</button></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button4" id="view:_id1:_id2:callback3:_id12:button4" data-role="none">Clear</button></td>
</tr>
<tr><td>Current Time</td>
<td><span id="view:_id1:_id2:callback3:_id12:computedField3" class="xspTextComputedField">7:39:40 PM</span></td>
<td></td>
<td></td>
</tr>
<tr><td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button5" id="view:_id1:_id2:callback3:_id12:button5" data-role="none">Partial Refresh</button></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button6" id="view:_id1:_id2:callback3:_id12:button6" data-role="none">Full Refresh</button></td>
<td></td>
<td></td>
</tr>
<tr><td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div id="view:_id1:_id2:callback2">
Footer Test</div>
</div>
</div>
<script> $.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;</script>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!dgljtbhtgw!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
<script type="text/javascript">
XSP.addOnLoad(function() {
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler1", "view:_id1:_id2:callback3:_id12:button1", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler3", "view:_id1:_id2:callback3:_id12:button3", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler2", "view:_id1:_id2:callback3:_id12:button2", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler4", "view:_id1:_id2:callback3:_id12:button4", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:_id32", "view:_id1:_id2:callback3:_id12:button5", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachEvent("view:_id1:_id2:callback3:_id12:_id34", "view:_id1:_id2:callback3:_id12:button6", "onclick", null, true, 2);
});
</script>
</body>
</html>