I'm new to jQuery Mobile and I'm trying to render a table with headers in the left column and data on the right column, as demonstraded in jQuery Mobile docs here.
Here's my test code:
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Header</h1>
</div>
<div data-role="content">
<ul class="subheader" data-role="listview" data-divider-theme="d" data-inset="false">
<li data-role="list-divider" role="heading">Section</li>
</ul>
<table data-role="table" data-mode="reflow">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</tbody>
</table>
</div>
</div>
Here's as it's rendered on my desktop (Firefox, Mac OS X) - just as I want:
And here's as it's rendered on my mobile device (PhoneGap, Samsung Galaxy S2):
Ermm, what happens? Shoudn't it render <th>'s on first column and <td>'s on second column? Why it didn't happen? What I've to change to accomplish that? Thank you in advance!
Found the problem: I was missing HTML5 doctype on the document. Without the doctype, tables wasn't getting reflow style on PhoneGap's embedded browser.
Related
been struggling with this issue for a bit now and its really bugging me. Basically I have some email templates that I've been working on, they work fine on all clients (Litmus tests) except for Gmail specifically on iOS, Android works fine. The issue I'm having is that I want all my tables to me 100% width so they're all the same size, however gmail resizes the tables seemingly based off the content inside.
Heres a section of my code:
<tr class="module bg-white" style="background-color:#fff;color:#23282b">
<td>
<table class="container" cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%"
style="margin:0 auto;width:100%!important;max-width:600px!important">
<tr>
<td class="card-wrapper" align="center" valign="top" style="padding:0 15px 10px">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%">
<tr>
<td class="card-content bg-white border-lightgray"
style="padding:30px 20px 20px;background-color:#fff;color:#23282b;border:solid 1px #eee">
<h2
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 20px;font-size:18px;font-weight:700;line-height:22px">
YOUR DELIVERY DETAILS</h2>
<table class="delivery-details" cellpadding="0" cellspacing="0" border="0"
role="presentation" width="100%"
style="width:100%!important;max-width:600px!important">
<tr>
<td style="vertical-align:top;padding-right:8.5px;padding-left:0">
<h3
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 15px;font-size:16px;font-weight:700;line-height:22px">
Delivery Service</h3>
</td>
<td style="vertical-align:top;padding-right:0">
<p
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 10px;font-size:16px;font-weight:400;margin-bottom:15px;line-height:22px">
Next Day</p>
</td>
</tr>
<tr>
<td style="vertical-align:top;padding-right:8.5px;padding-left:0">
<h3
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 15px;font-size:16px;font-weight:700;line-height:22px">
Delivery Address</h3>
</td>
<td style="vertical-align:top;padding-right:0">
<p
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 10px;font-size:16px;font-weight:400;margin-bottom:15px;line-height:22px">
Fake Name <br>Fake House <br>Fake Street
<br>Fake Town <br>UK <br>Fake Postcode</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
On my phone it looks like this:
Email Result on iOS 15 gmail
Is there any way to fix this? On every other client it expands to 100% no issue, thank you!
This sounds like this might be due to this bug, where Gmail adds a .munged class to <table>s and <td>s with a width:auto!important.
A solution would be to add a min-width:100% to each <table> and <td> potentially impacted.
I am creating an code for an email signature. The image is never left align on the email client on my iPhone and I have no idea why.
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding:0;margin:0;height:45px;width:230px;">
<ul style="padding:0;margin:0;height:45px;width:230px;">
<li style="text-align:left;margin:0;padding:0;height:45px;width:230px;">
<a target='_blank' href="https://www.mypage.com" style="margin:0;padding:0;width:230px;height:45px;">
<img style="padding:0;margin:0;" height="45px" width="230px" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
</a>
</li>
</ul>
</td> ......
The problem is visualized on the image below:
Is there something I can do?
Thanks for helping me.
Best regards,
Yab86
If the linked <img> is the only thing in that <td>, can you remove the <ul>? Or is there another reason the list is there?
Email clients do weird things to margin and padding of block level elements like <ul> and<li>, sometimes even if they're reset with inline CSS. If you don't need a list here, why introduce the complexity?
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td height="45" width="230" align="left" style="padding:0;">
<a target='_blank' href="https://www.mypage.com">
<img align="left" style="display: block; margin:0;" height="45" width="230" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
</a>
</td>
</tr>
</table>
I am using geb spoke. For the below html structure I am not able to get the text from specified location:
Below is the html structure:
<div class="tab-pane ng-scope active" uib-tab-content-transclude="tab" ng-class="{active: tab.active}" ng-repeat="tab in tabs">
<div id="algemeen-tab-header" class="ng-tab-hdr ng-scope"></div>
<div id="algemeen-tab-body" class="ng-tab-bdy table-view ng-scope">
<table class="ng-tbl valign-top">
<tbody class="esuite-table-body">
<tr>
<td class="tp-label">
<label class="ng-binding">
Reference:
</label>
</td>
<td class="tp-field ng-binding">
I-5006-2015
</td>
<td class="tp-label ng-hide" ng-show="!zaak.anoniem"></td>
<td class="tp-field ng-binding ng-hide" ng-show="!zaak.anoniem"></td>
<td class="tp-label" ng-show="zaak.anoniem"></td>
<td class="tp-field ng-binding" ng-show="zaak.anoniem"></td>
<td class="tp-label"></td>
<td class="tp-field ng-binding"></td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
I wanted to verify the text "I-5006-2015". I am not able to do it. Also, second scenario is that, I just wanted to assert that initial word is "I" from that location. How I can do that.
I have tried below variable to get the location but got failed:
referenceNumberText(wait:true){$("td", class: contains("tp-field ng-binding"))}
Please help me on this. Thanks!
Since you use html ids rather rarely, the selector for you text would be:
$("#algemeen-tab-body > table > tbody > tr:nth-child(1) > td:nth-child(2)").text()
Did you consider naming <td>'s? Example:
<td id="referenceNumber" class="tp-field ng-binding">
I-5006-2015
</td>
So your selector would be as easy as $("#referenceNumber").text()...
I can't get a select menu to work in a jquery mobile app, and thought I'd post the problem here, but I can't even get the thing to display properly in fiddle. Thought I'd solve the fiddle problem first.
Here is my fiddle, which contains the following code:
html
<div data-role='content'>
<table class='my-tables'>
<caption style='text-align: left;'>Table A</caption>
<thead>
<TR>
<TH align='left'>Type</TH>
<TH align='left'>Amount</TH>
<th colspan='4' scope='col'>
<label for='selmenu'></label>
<select id='selmenu' class='sel' data-native-menu='false' style='width: 100px'>
<option class='type1' value='type1'>type1</option>
<option class='type2' value='type2'>type2</option>
<option class='type3' value='type3'>type3</option>
<option class='type4' value='type4'>type4</option>
</select>
</TR>
<TR>
<TH align=l eft>Cars</TH>
<TD>5,000</TD>
<TD class='exhaust type1'>7000</TD>
<TD class='exhaust type2'>6000</TD>
<TD class='exhaust type3'>5000</TD>
<TD class='exhaust type4'>4000</TD>
</TR>
<TR>
<TH align=l eft>Trucks</TH>
<TD>45672</TD>
<TD class='exhaust type1'>154</TD>
<TD class='exhaust type2'>1.1</TD>
<TD class='exhaust type3'>3.7</TD>
<TD class='exhaust type4'>55.2</TD>
</TR>
<TH align=l eft>Motorcycles</TH>
<TD>224455</TD>
<TD class='exhaust type1'>88</TD>
<TD class='exhaust type2'>99</TD>
<TD class='exhaust type3'>77</TD>
<TD class='exhaust type4'>55</TD>
</TR>
</TABLE>
<div data-role='footer'>
<h4>my footer</h4>
</div>
<!-- /footer -->
jquery
$(document).ready(function () {
$('.exhaust').hide();
$('.type1').show();
$('.sel').change(function () {
$('.exhaust').hide();
$('.' + this.value).show();
$('.sel').val(this.value);
});
});
Why won't my fiddle even display the jqm styles? I researched similar problems in stackoverflow, found this question on the same thing, but my fiddle page doesn't show the options that are available in the example given in that question.
What am I missing?
Two things:
Use jQuery 1.8.3 library. Included external resource JQM 1.2.0 will not work with later versions.
Load external resources with HTTPS:
https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
After that, your fiddle should work.
UPDATE:
Besides all above, once you choose jQuery 1.8.3 version, fiddle will offer you JQM library below the framework selection menu. So, no need for including external files.
i am having the same problem as in this thread
jQuery unexpected sortable behaviour
my system is doing identically the same thing. the only difference between my code and his code is that my code is 100% generated by ajax on the fly, and im inserting tables into each of the LI, but alas the results are the same. here is the html im inserting for each of my master list entries.
here is the blank list thats in my html
<ul id=\"questionList\">
</ul>
this is generated by javascript and ajax calls on the fly
<li id="liName-11" class="ui-state-default">
<table width="600" border=".5" cellspacing="2" cellpadding="2" class="singleBorder">
<tr>
<td width="386" align="left" valign="top">
<span id="quesEditText-11">Does Default Work
</span>
<table>
<tr>
<td>
<span id="quesEditSpan-11" onclick="setEditField('ques', 11)">Edit
</edit>
</td>
<td>
<span id="quesUpdateSpan-11" onclick="updateQuestionCall('ques', 11)">Update
</edit>
</td>
<td>
<span id="deleteSpan-11" onclick="deleteQuestionAjax(11)">Delete
</edit>
</td>
</tr>
</table>
</td>
<td width="200">
<input type="text" id="answerBox11">
<br>
<a href="#" onclick="insertAnswer(11, 'answerBox11')">Insert Answer
</a>
<ul id="answerList-11">
<li id="17">
<span id="answEditText-17">lets try this answer
</span>
<table>
<tr>
<td>
<span id="answEditSpan-17" onclick="setEditField('answ', 17)">Edit
</edit>
</td>
<td>
<span id="answUpdateSpan-17" onclick="updateQuestionCall('answ', 17)" style="display:none;">Update
</edit>
</td>
<td>
<span id="deleteSpan-17" onclick="deleteAnswerAjax(17)">Delete
</edit>
</td>
</tr>
</table>
</li>
<li id="13">
<span id="answEditText-13">yet another question
</span>
<table>
<tr>
<td>
<span id="answEditSpan-13" onclick="setEditField('answ', 13)">Edit
</edit>
</td>
<td>
<span id="answUpdateSpan-13" onclick="updateQuestionCall('answ', 13)" style="display:none;">Update
</edit>
</td>
<td>
<span id="deleteSpan-13" onclick="deleteAnswerAjax(13)">Delete
</edit>
</td>
</tr>
</table>
</li>
</ul>
</td>
</tr>
</table>
</li>
folling the suggestion in the above thread, ive modified his suggestion into this
$("ul.list").live("mousedown", function(e){
e.stopPropagation();
});
but it has zero effect. works perfectly in chrome and firefox, but screws up in IE. trust me im about to just put in a script where if they see the site in IE that it will forward them to firefox and tell them to download a real browser but my boss doesn't like that idea. you guys have any idea?
Make sure your html is valid: you are closing your <span> elements with </edit>
Your script applies to a ul element with a list class which you don't define anywhere in your html.
http://api.jquery.com/event.stopPropagation/
You'll notice on this page that live() handles an event after it's already propagated up to the top of the document, so you'll need to use bind() instead of live().