I have a long table which I want to print it. I need to repeat <th> on beging of every page so I use <thead>:
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr><td>x</td></tr>
<tr><td>x</td></tr>
<!-- more rows -->
</tbody>
</table>
I search the web for repeating <thead> on each page and I found this css:
thead { display:table-header-group; }
tfoot { display:table-footer-group; }
so when I click print in firefox, I see the header on each page correctly, but when I open the document in Android and want to print it the header is not shown. Is there any solution or alternative way?
edit: this picture show my problem better:
Related
In my HTML UI I wanted users to be able to select multiple countries, because there are far too many countries to allow the complete list to be displayed I initiate the HTML page so it has two lists: The second list has just those that have been selected, the first contain all countries (except ones already selected and add to the 2nd list), the user transfer between these two lists using an Add and Remove button
I display 15 rows for each select box by setting size attribute.
<tr>
<td>
<select id="preferred_countries_all" size="15" style="width:200px" multiple="multiple">
<option value=" AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>..
</select>
</td>
<td>
<button style="width:100px" type="button" id="preferred_countries_add" onclick="add_preferred_countries();">
Add
</button>
<br>
<button style="width:100px" type="button" id="preferred_countries_remove" onclick="remove_preferred_countries();">
Remove
</button>
</td>
<td>
<select id="preferred_countries_selected" name="preferred_countries_selected" size="15" style="width:200px" multiple="multiple">
</select>
</td>
</tr>
However when I view on an iPad or Phone it only displays one row so you have to click to even see what has already been selected so it no longer works. I can understand why it might do this since space is limited on these devices, and perhaps my use of two select boxes for one option is non-standard but this doesn't work for me as a UI.
What do I use instead of two multiselect boxes in HTM: so works on Android phone or iPad as well as desktop
I had an idea of having one select box that the user could select additional countries, and a disabled text field that shows what has already been selected which is updated as user selects more countries, but how would they unselect values, what is the standard way to do this ?
Edit
This is what I have so far
<tr>
<td>
<label title="Potential Releases from these countries get their score boosted">
Preferred Release Countries
</label>
</td>
<td>
<input disabled="disabled" name="preferredCountries" id="preferredCountries" type="text" value="" class="readonlytextinfo">
</td>
</tr>
<tr>
<td class="indentedmultiselect" colspan="2">
<select id="preferred_countries_select" name="preferred_countries_select" multiple="multiple" onchange="getSelectValues(preferred_countries_select, preferredCountries)">
<option value=" AF">Afghanistan</option><option value="ZW">Zimbabwe</option>
</select>
</td>
</tr>
<script>
function getSelectValues(select, readonlylist) {
var result = [];
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.text);
}
}
readonlylist.value =result.toString();
if(readonlylist.value.length>230)
{
readonlylist.value=readonlylist.value.substring(0,230) + '...';
}
return result;
}
</script>
How each solution works on mobile you have to test yourself. In the chrome dev tools (f12) you can simulate mobile but in the end nothing beats a real phone. How most mobile jquery components work is by acting on a real select item by hiding it and showing a different DOM, updating the select in the background, thereby making it compatible with forms or other code expecting a select. Some overlay the original to get the proper mobile select response but a different view.
What you are asking for cannot be done natively with select boxes. The Mobile browsers will do as they please. I suggest you take a good google for free good components that solve your problem instead.
Such as:
Chosen
multiselect.js
or other depending on your choice of library/framework. if you give us more information on you library stack we might guide you better.
You could do this with two lists of checkboxes.
It's much easier to style that way, and you have pretty much the same amount of control.
I'm having trouble getting all the html code under the tags. Here is my current code:
Document document = Jsoup.connect("http://stackoverflow.com/questions/2971155/what-is-the-fastest-way-to-scrape-html-webpage-in-android").get();
Elements desc = document.select("tr");
System.out.println(desc.toString());
It's for that question, and I'm trying to get the text from the question's description. But I'm getting not getting certain tr or td tags like the ones for the question. Here is td tag I'm trying to get:
<td class="postcell">
Under that tag is the actual post. Now when I print out what I'm actually getting, I'm getting a ton of empty td tags and some comments, but not the actual post.
<tr id="comment-37956942" class="comment ">
<td>
<table>
<tbody>
<tr>
<td class=" comment-score"> </td>
<td> </td>
</tr>
</tbody>
</table> </td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">You shouldn't parse HTML with regexes: blog.codinghorror.com/parsing-html-the-cthulhu-way</span> –
﹕ motobói
And it keeps on going with empty td and tr tags. I can't find the actual question. Anyone know why this is happening?
Essentially, I just want the text from the question's post, and I don't know how to get it, so it would be nice if someone could show me how to get the text.
Jsoup is a parser. That means that it can't execute any javascript code, that could generate html. When you encounter this problem the only way to retrieve that content is through a headless browser, that includes a javascript engine. A popular library is selenium webdriver.
In order to determine if the content you are trying to parse is generated in the server (static content) or in the client (dynamic content-javascript generated) you can do the following:
Visit the page you want to parse
Press Ctrl + U
The steps above will open a new tab that contains the content that jsoup receives. If the content you need is not there, then it's generated by javascript.
Follow the steps and search for the content. If it's there, but jsoup still has problems, then most probably the case is that the site considers you a bot or a mobile device. Try setting the userAgent of a desktop browser and see what happens.
Document document = Jsoup.connect("http://stackoverflow.com/questions/2971155/what-is-the-fastest-way-to-scrape-html-webpage-in-android").userAgent("USER_AGENT_HERE").get();
Most importantly, when the site exposes and API for the users to extract information programmatically then it's better to just use that.
Stackoverflow has an API available
input box not taking any field while it is surrounded in ngrepeat . in browser it is working perfectly but giving error while running in android as web view .
<div ng-repeat="teleOrderDetail in teleOrderDetails">
<table style="text-align:center;font-size:13px;width:98%;height:9%;">
<tr>
<td style="color:grey;width:33.34%;"><input type="tel" name="quantity" ng-model="teleOrderDetail.quantity" class="inputtd"></td>
</tr>
</table>
</div>
input type 'tel' appears to only be supported by Safari. This might be your problem with it displaying properly. Could you perhaps provide a little more information about the error if this isn't the problem?
See here: http://www.w3schools.com/html/html_form_input_types.asp
I am new to Android Development and on my Android app, I want to retrieve HTML table values from website. I will use the values (in the background) which I'll get from the HTML table.
I want to get (td) values.
HTML table is like this.
<table width="482" height="187" cellspacing="1" cellpadding="1" border="1">
<tbody>
<tr>
<td> </td>
<td colspan="3" style="text-align:center;>
<strong>"UKOME KARARI</strong>
</td>
</tr>
<tr>
<td>Elektronik Bilet</td>
.....
</table>
Can I use the Jsoup? How?
You can use jsoup library inside your android application to achieve HTML table from web site.
Using this libray you can parse html page in Android.
Download jsoup library" from http://jsoup.org/download link.
Happy Coding...
I am generating an email from a mobile app that can be run on IOS or Android. Why does the "create email" dialogue on the device which is trigger have the body correctly html formatted for IOS but on my Nexus 7 device (in gmail) the HTML is not formatted (i.e. there is no table rendered, just the text).
HTML:
<head>
</head>
<body>
<table border="1">
<tbody>
<tr>
<th>Table header</th>
<th>Table header</th>
</tr>
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td>
<td>Table cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Background: Code is Corona SDK code, and is below.
local centerX = display.contentCenterX
local centerY = display.contentCenterY
local _W = display.contentWidth
local _H = display.contentHeight
-- Require the widget library
local widget = require( "widget" )
local emailImage = display.newImage( "email.png", centerX, 156 )
local function onSendEmail( event )
local options =
{
to = { },
cc = { },
subject = "Test",
isBodyHtml = true,
body = [[
<html>
<head>
</head>
<body>
<table border="1">
<tbody>
<tr>
<th>Table header</th>
<th>Table header</th>
</tr>
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td>
<td>Table cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
]],
}
local result = native.showPopup("mail", options)
end
local sendEmail = widget.newButton
{
left = 0,
top = 0,
width = 298,
height = 56,
label = "Compose Email",
onRelease = onSendEmail
}
-- center horizontally on the screen
sendEmail.x = centerX
sendEmail.y = _H - 156
API: http://docs.coronalabs.com/daily/api/library/native/showPopup.html
PS. I should not on IOS where it works it is the Apple email client that is triggered and holds the draft email. On Android it is the Gmail app that is triggered and holds the incorrectly formatted email
I send a ton of emails with table tags in the mobile version and they render fine in every mobile client.
Android GMail is weird though in that it's very specific. You need a width on your table tag, and on your widest table or element you need to set style="min-width:XXXpx;" on that.
You may not see it 'laying out' correctly because gmail mobile is using its 'auto-resize feature' to fit to your viewport, hence the needed min-width styling.
as John said those TH tags may be an issue as well.
It could be that the table is rendering, just your borders are not. try adding style="border:1px solid #000000;" to the outer table. It might help to add awidth=""` value there also.
Seems like the table tag is not be supported Use Table tag in Android Email
Perhaps just load as a HTML file attachment I guess.