I have set both the header and the footer to fixed but still cannot get the content to adjust in IPhone.
Here is my layout code
<body>
<div data-role="page" #(Page.Id == null ? string.Empty : "id=" + Page.Id) data-fullscreen="false">
#* #RenderSection("MoreCode", false)*#
#if (IsSectionDefined("Header"))
{
<div data-role="header" data-position="fixed">
#RenderSection("Header", false)
</div><!-- /header -->
}
<div data-role="content">
#RenderBody()
</div><!-- /content -->
<div data-role="footer" data-tap-toggle="false" data-position="fixed">
<div class="center-wrapper">
<table border="0">
<tr>
<td>
<label for="basic">
Place Of Interest
</label>
</td>
</tr>
<tr>
<td>
<table border="0">
<tr>
<td>
Terms of Use
</td>
<td>
<label for="basic">
|
</label>
</td>
<td>
Privacy Policy
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
Here is my View
<h3 style='color:#4FA600; font-weight:bold;'>#ViewBag.Number</h3>
<table border="1" width="100%">
<tr>
<td align="center" valign=middle style=' font-weight:bold; color:#FFFFFF; background:#4FA600; '>
<label for="basic">Available Documents</label>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%">
<tr>
<td align="left" valign="middle" style=' font-weight:bold;'>
Type
</td>
<td align="center" valign="middle" style=' font-weight:bold;'>
Description
</td>
</tr>
#{
foreach(var row in Model)
{
<tr>
<td align="left" valign="middle">
#row.DocType
</td>
<td align="center" valign="middle">
#row.Description
</td>
</tr>
}
}
</table>
</td>
</tr>
</table>
Isnt jquerymobile suppose to manually adjust? It renders fine in firefox. What can I do to make the content fully display?
\The issue was I had this in my css:
[data-role=page]{height: 100% !important; position:relative !important;}
I got this code from use theme roller not sure why this messed it up. Maybe someone can clarify would be appreciated
Related
Problem with rowspan and page break in DomPDF (nesting loop), this is my code
How to make nesting array with rowspan for column number and good page break?
I can't seem to find anything in the documentation
//Problem with rowspan and page break in DomPDF (nesting array), this is my code
How to make nesting array with rowspan for column number and good page break?
I can't seem to find anything in the documentation
Problem with rowspan and page break in DomPDF (nesting array), this is my code
How to make nesting array with rowspan for column number and good page break?
I can't seem to find anything in the documentation//
<table class="table" style="table-layout: fixed; width: 100%;" >
<tbody>
<tr>
<td class="text-center" style="width:5%;">
<h6>III.</h6>
</td>
<td colspan="2">
<h6>INFORMASI TENTANG KUALIFIKASI DAN HASIL YANG DICAPAI</h6>
<h6 class="font-italic font-weight-bold">INFORMATION OF QUALIFICATION AND LEARNING OUTCOME
</h6>
</td>
</tr>
<tr>
<td class="text-center" rowspan="10">
<p>3.1</p>
</td>
<td colspan="2">
<p class=" font-weight-bold">Capaian Pembelajaran</p>
<p class="font-italic font-weight-bold">Learning Outcomes</p>
</td>
</tr>
<tr>
<td class="text-center" style="width:50%;">
<p class=" font-weight-bold">Bahasa Indonesia</p>
</td>
<td class="text-center" style="width:50%;">
<p class="font-weight-bold">Bahasa Inggris</p>
</td>
</tr>
#foreach($kcs as $kc)
<tr>
<td class="text-center" style="width:50%;">
<p class=" font-weight-bold">{{$kc->kategori_id}}</p>
</td>
<td class="text-center" style="width:50%;">
<p class="font-weight-bold font-italic">{{$kc->kategori_en}}</p>
</td>
</tr>
#foreach($cps as $cp)
#if($cp->id_ps==$data->id_ps && $kc->id==$cp->id_kategori)
<tr>
<td class="text-center" style="width:50%;">
{!! $cp->cpl_id!!}
</td>
<td class="text-center font-italic" style="width:50%;">
{!! $cp->cpl_en!!}
</td>
</tr>
#endif
#endforeach
#endforeach
</tbody>
</table>
I am creating a friends component that lists users friends based on a response from an endpoint.
I want to render the responses into rows of a table as part of this I would like to use the bootstrap striped-table class
https://getbootstrap.com/docs/4.0/content/tables/#striped-rows
when I do a v-for the table renders correctly but the rows are only showing one background color
This is my template code
<template>
<div>
<h5 class="mb-4">Friends</h5>
<table class="table table-borderless table-striped ">
<tbody>
<div v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</div>
</tbody>
</table>
<div v-if="!UserStore.friends">
<h6>You don't have any friends :(</h6>
Lets solve that Right now!
</div>
</div>
</template>
You should use a template element to render these rows. .table-striped works with sibling rows and in your code the rows are not siblings because they each have a div parent, so each row is seen as the first row.
<tbody>
<template v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</template>
</tbody>
This is how it looks in GMail mobile app when sent from Outlook:
How can I avoid those big gaps?
My code is as follows:
<table id="sig" width='320' cellspacing='0' cellpadding='0' border-spacing='0' style="width:320px;margin:0;padding:0;">
<tr>
<td valign='top' width="120" height="48" style="width:120px;height:48px;margin:0;padding:0;vertical-align:top;">
<a style="border:none;text-decoration:none;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/logo.jpg" alt="Crisalix" width='120' height='48' style="border:none;width:120px;height:48px;display:block;">
</a>
</td>
</tr>
<tr>
<td>
<table id="sig1" cellspacing='0' width='320' cellpadding='0' border-spacing='0' style="padding:0;margin:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;mso-line-height-rule:exactly;line-height:11px;color:#b0b0b0;border-collapse:collapse;-webkit-text-size-adjust:none;width:320px;">
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-weight:600;line-height:1.6;font-size:13px;">
<span style="color:#137191">Jaime</span>
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-size:12px;line-height:1">
<span style="color:#555555">Chief Executive Officer</span>
</td>
</tr>
<tr>
<td valign='top' width="27" height='21' style="width:27px;height:1px;margin:0;padding:0;vertical-align:top;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/separator.jpg" alt="Crisalix" width='27' height='21' style="border:none;width:27px;height:21px;display:block;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-size:12px;line-height:1.4;">
<div><span style="color:#137191;font-weight:bold">P / </span><span style="color:#555555;"></span></div>
<div><span style="color:#137191;font-weight:bold">A / </span><span style="color:#555555">Parc Scientifique (PSE-A) - EPFL1015</span></div>
<div> <span style="color:#555555"> Lausanne | Switzerland </span></div>
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-weight:600;line-height:1.6;font-size:13px;width:320px;">
<span style="color:#137191;border:none;text-decoration:none!important;color:#137191;">www.crisalix.com</span>
</td>
</tr>
<tr>
<td valign='top' width="27" height='21' style="width:27px;height:1px;margin:0;padding:0;vertical-align:top;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/separator.jpg" alt="Crisalix" width='27' height='21' style="border:none;width:27px;height:21px;display:block;">
</td>
</tr>
</td>
</table>
</tr>
<tr>
<td valign='top' width="230" height="225" style="width:230px;height:225px;margin:0;padding:0;vertical-align:top;">
<a href='http://www.crisalix.com' title="Crisalix" style="border:none;text-decoration:none;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/signature-banner.jpg" alt="Crisalix" width='230' height='225' style="border:none;width:230px;height:225px;display:block;">
</a>
</td>
</tr>
</table>
I wish to parse through a epinions.com page to gather some statistics about a few companies. Epinions have almost no id's or classes, so it's quite difficult to parse the site.
I need to loop through all <tr bgcolor="white"> objects. I have put in 2 samples of this.
From the sample 1, I need to extract:
The alt on this line:
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
The href this line:
CHUMBO ROCKS!
The author at this line:
<span class="rgr">by whitey436, Jan 18, 2006
Here is sample 1:
<tr bgcolor="white">
<td style="padding:10px 5px" align="right" valign="top" height="100%">
<table cellspacing="4" cellpadding="0" border="0" width=100% height="100%">
<tr valign="top">
<td class="rkr" nowrap>Overall Rating:</td>
<td width=80>
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
</td>
</tr>
<span class="rgr">
<tr>
<td class="rgr" nowrap>Ease of Ordering:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
<tr>
<td class="rgr" nowrap>Customer Service:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
<tr>
<td class="rgr" nowrap>Selection:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
<tr>
<td class="rgr" nowrap>On-Time Delivery:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
</span>
<tr valign="bottom" height="100%">
<td class="rkb" colspan="2">
<div align="center"> </div>
<div align="center"> </div>
</td>
</tr>
</table>
</td>
<td style="padding:10px;" colspan=2 width="100%" align="left" valign="top">
<h2 style="font-family:arial,helvetica,sans-serif; font-size:87%; color:#000000; font-weight:bold; margin-bottom:0px;">
CHUMBO ROCKS!
</h2>
<span style="line-height:110%">
<span class="rgr">by whitey436, Jan 18, 2006
Rated a <span style="color:#000;">Very Helpful Review</span> by the Epinions community</span>
</span>
<span class="rkr">
<div style="padding:5px 0px"> Its just this simple, I tried buying this receiver from another online supplier who had the lowest price only to find they didnt have any of these units and they wanted to sell me extra warranty then tried to sell a different model in stock from Yamaha ...</div>
<b>
Read the full review
</b>
</span>
</td>
</tr>
From the sample 2, I need to extract:
The alt on this line:
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
The href on this line:
Read more
The author at this line:
<span class="rgr">by whitey436, Jan 18, 2006
Rated a <span style="color:#000;">Very Helpful Review</span> by the Epinions community</span>
Here is sample 2:
<tr bgcolor="white">
<td style="padding:10px 5px" align="right" valign="top">
<table cellspacing="4" cellpadding="0" border="0" width=100%>
<tr>
<td class="rkr" nowrap>Overall Rating:</td>
<td width=80>
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
</td>
</tr>
<tr>
<td class='rgr' > </td>
<td>
<img src='http://img.epinions.com/images/epi_images/spacer.gif' width=80 height=11>
</td>
</tr>
</table>
</td>
<td style="padding:10px;" colspan=2 width="100%" align="left" valign="top">
<span class="rgr">Mar 27, 2006 <br>(Not Yet Rated)</span><br>
<span class="rkr"> Very helpful in giving me the information I needed to make a purchase.<br><b>
Read more
</b></span>
</td>
</tr>
Here is some Nokogiri code to print out the information you want using XPath:
xml.xpath("//tr[#bgcolor='white']").each do |el|
# Get the "Overall rating" tr block from the first td and get (first) img alt
puts el.at_xpath("td[1]//tr[td/text()='Overall Rating:']//img/#alt")
# Get the first link from the second td that contains "content" and get href
puts el.at_xpath("td[2]//a[contains(#href, '/content')][1]/#href")
# Get the (first) link that has an itemprop author value and get the href
puts el.at_xpath("td[2]//a[#itemprop='author']/#href")
end
use Nokogiri will be ok.
to get alt, get back all the image tags and keep the img tag with the specified src
imgs = doc.css('img[src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif"]')
to get back the href
links = doc.css('a[href*="/content"]')
to get back the author
links = doc.css('a[href*="/user"]')
<fieldset class="attachmentTable large"><legend>SMF</legend>
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td>
<a href="
/aems/file/test.html">
</a>
</td>
<td>
foo
</td>
</tr>
</table>
</fieldset>
<fieldset class="attachmentTable large"><legend>tax</legend>
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td>
<a href="
/relf/file/test.html">
</a>
</td>
<td>
foo
</td>
</tr>
</table>
</fieldset>
I have an html source from a webpage,part of which are given above.Now I want to get the HREF values only when <legend>tax</legend>? So could you guys help me here for the same?
I would do:
page.search('legend[text()="tax"] + table a').each do |a|
puts a[:href]
end