CODEWITHSUNDEEP
javascriptjquerycsscordovajquery-mobile
Mahdi
Mahdi

Reputation: 153

Make table fit on screen? (JQueryMobile/Cordova)

My javascript function basically creates a dynamic page and displays the data fetched from the database, however when the data is displayed it overflows past the mobile screen width.

Can someone tell me what I can use to ensure that table fits within the screen or if there is another way I can go about fitting my data in.

JavaScript table:

var formElements = "<table><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr>";
 for (var i = 0; i < response.rows.length; i++) {
formElements += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location +"</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date +"</td><td>" + response.rows.item(i).Description + "</td></tr>";
                            }

Upvotes: 1

Views: 715

Answers (2)

user4278933
user4278933

Reputation:

Is there a reason why you don't set a table width? By setting it to 95% you reduce the chance of having a scroll bar.

<table width="95%">

Upvotes: 0

jcarrera
jcarrera

Reputation: 1068

You can use jQM's data-role table attribute: w3schools

var formElements = "<table id='yourTableID' data-role='table' data-mode='reflow' class='ui-responsive table-stroke table-stripe'><thead><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr></thead><tbody>";
 for (var i = 0; i < response.rows.length; i++) {
    formElements += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location +"</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date +"</td><td>" + response.rows.item(i).Description + "</td></tr>";
 }

 formElements+="</tbody></table>";

And after adding the table to the DOM refresh it:

$("#yourTableID").table("refresh");

You could take a look also to Responsive Tables.

Upvotes: 1

Related Questions