I'm displaying a percentage in my website like 44%. Both value and subscript are of different font. The subscript is not coming correctly.
I'm sharing the code below:
<table>
<tr>
<td>
<b>
<div style='display:block;'>
<span style='font-size: 220px;line-height: 200px;'>44
<span style='font-size:20px;display: inline-block;vertical-align: top;'><sup>%</sup>
</span>
</span>
</div>
</b>
</td>
</tr>
</table>
I want the percentage symbol just above and very close to the value. Now there is lot of space between the value and % symbol. Can anyone help me to fix this?
Thanks in advance.
Consider adding line-height to the <sup> as well.
<table>
<tr>
<td>
<b>
<div style='display:block;'>
<span><span style='font-size: 220px;line-height: 200px;'>
44<sup style='vertical-align:top;font-size:20px;line-height: 50px;'>%</sup></span>
</span>
</div>
</b>
</td>
</tr>
</table>
Related
I'm new in odoo and HTML&css, all I want is to add a stamp to my qutation so theu user won't need to put a stamp in every single quotation...can anyone help me and guide me to a road to fix that problem
thanks for your help.
<table class="table3">
<tr>
<td style="width:45%;border-style:none;">
<table style="width:60%;">
<tr>
<td style="font-size:14px;margin-left:4px; margin-right:auto;border: 2px"><br/>Bon pour accord le <br/><br/><br/> <br/><br/><br/>Nom, Qualité et signature ou cachet du client<br/><br/></td>
</tr>
</table>
</td>
<td>
<table id="t01">
<tr>
<td style="width:30%;font-size:12px"><b>Total DA HT</b></td>
<td>225,00</td>
</tr>
<tr>
<td style="width:30%; font-size:12px"><b>Total TVA</b></td>
<td>55.10</td>
</tr>
<tr>
<td style="width:30%;font-size:12px"><b>Droit de timbre</b></td>
<td>0.0</td>
</tr>
<tr>
<td style="width:30%;font-size:12px"><b>Total DA TTC</b></td>
<td>350</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="footer">
<br/><br/>
<div style="text-align:center">
<hr style="border: 1px solid #73ad20">
<p style="font-family:KacstFarsi; color:green; font-size:9px">N° R.C.: 1003703 -10 B /00/16//N.I.F.: 001016100370377</p>
<p style="font-family:KacstFarsi; color:green; font-size:9px">AGB BANQUE RIB: 03200001500720120844Dely-Brahim /N° Article 16500743415</p>
<small>
<span>Page</span>
<span class="page" />
/
<span class="topage" />
</small>
</div>
</div>
You could extend res.users with a field for the signature image (fields.binary) and extend the settings view (right corner "login" settings). So every user can set his own signature image. Little hint: res.users is a bit special. You need to implement that field as user-writeable field (Odoo example). In my example the field is called sign_image.
After this you can use this new field in your QWeb report, like:
<t t-if="o.user_id.sign_image">
<div t-field="o.user_id.sign_image" t-field-options='{"widget": "image"}'/>
</t>
Where o is the actual record (quotation) which is printed and o.user_id is the salesman on that. If you want to use the user who is printing instead of the salesman use o.env.user.sign_image.
I put a link in a table cell, and it didn't work. I tried it with a javascript function to open a window, which I would prefer, but that didn't work either. So I looked around for info and found this SO page: How can I make a link from a <td> table cell.
I tried every method there that seemed applicable, plus some variations on those methods, but none of them worked at all; although I did get a simple demo to work. The suggestion made to me on that page is that something else in my code is causing the problem, which seems likely to me.
I'm putting the code below, and maybe someone can help? I don't care what kind of link it is --- whether the entire cell, or just the words -- as long as it takes me to the desired page.
<table style = "width: 100%; margin-top: 20px">
<tr>
<td>
<a class = "headscript"> Your Communications</a>
<p class = "nextscript"> There is a lot of correspondence blah, blah...
<ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
<li>Item 1 text stuff </li>
<li>Item 2 more text </li>
<p style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; "> </p>
<li>Item 3 yet more text</li>
</ul>
</p>
</td>
<td style = "padding-left:20px;">
<a class = "headscript"> Your Cost </a>
<p class = "nextscript"> some text here</p>
<table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
<tr>
<td> <b> Your annual revenue</b></td>
<td> <b>Your costs </b> </td>
</tr>
<tr>
<td> Up to $50</td>
<td> $whatever </td>
</tr>
Here is where I want the link -- the code shown is one of the suggestions, but it doesn't work for me:
<tr>
<td style = "padding: 0"> additional charges
<a href="overcharges.cfm">
<div style="height:100%;width:100%"> more info
</div>
</a>
</td>
<td> lots of text here, so this cell is much longer than the one with the desired link
</td
</tr>
(Hoping the above code is correct. Small errors in the tr and td tags don't seem to make a difference, but could be misleading.)
Error is related to element structure. 'P' element can not be child of 'ul'. Others are due to similar tag and scope mismatch.
Just refined the code. It's working here
Blockquote
<body>
<table style = "width: 100%; margin-top: 20px">
<tr>
<td>
<a class = "headscript"> Your Communications</a>
<div class = "nextscript"> There is a lot of correspondence blah, blah...
<ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
<li>Item 1 text stuff </li>
<li>Item 2 more text </li>
<li style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; ">Item 3 yet more text</li>
</ul>
</div>
</td>
<td style = "padding-left:20px;">
<a class = "headscript"> Your Cost </a>
<p class = "nextscript"> some text here</p>
<table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
<tr>
<td> <b> Your annual revenue</b></td>
<td> <b>Your costs </b> </td>
</tr>
<tr>
<td> Up to $50</td>
<td> $whatever </td>
</tr>
<tr>
<td style = "padding: 0"> additional charges
<a href="overcharges.cfm">
<div style="height:100%;width:100%"> more info
</div>
</a>
</td>
<td> lots of text here, so this cell is much longer than the one with the desired link
</td>
</tr>
</table>
</td>
</tr>
</table>
working example here
https://jsfiddle.net/aman9753/jya5L1t5/
I'm trying to get the social media sprites in this HTML table at https://www.alexcurriemedia.com/video/ to press up flush with the image above it. Cannot figure out a way to do this.
Can't add another table above it because the upper image is a wordpress shortcode that doesn't seem to work within the table.
Here is the code:
<table><center>[wds id="3"]
<td nowrap><a href="http://www.facebook.com/alexcurriemedia" target="_blank">
<div class='sprite Facebook1' width="100"></div></a></td>
<td nowrap><a href="http://www.twitter.com/alexcurriemedia" target="_blank">
<div class='sprite Twitter1'></div></a></td>
<td nowrap><a href="http://www.flickr.com/alexcurrie" target="_blank">
<div class='sprite Flickr1'></div></a></td>
<td nowrap><a href="http://www.alexcurriemedia.tumblr.com" target="_blank">
<div class='sprite Tumblr1'></div></a></td>
<td nowrap><a href="http://www.instagram.com/alex.currie" target="_blank">
<div class='sprite Instagram1'></div></a></td><td></td>
</center></table>
Thanks so much!!
The stray <p> tags that you see are likely a result of Wordpress automatically inserting them through the text editor. You should not place a <div> inside of an <a> tag if at all possible. While technically valid, I've seen it cause problems with things such as Wordpress's text editor. If you look at the source code in your browser, you will notice that the link is actually being rendered twice, like so:
<td nowrap="">
<a href="http://www.twitter.com/alexcurriemedia" target="_blank"><p></p>
<div class="sprite Twitter1"></div>
</a>
<p>
</p>
</td>
The following code should work better:
<table>
<tbody><tr>
<td nowrap>
</td>
<td nowrap>
<a class="sprite Twitter1" href="http://www.twitter.com/alexcurriemedia" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Flickr1" href="http://www.flickr.com/alexcurrie" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Tumblr1" href="http://www.alexcurriemedia.tumblr.com" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Instagram1" href="http://www.instagram.com/alex.currie" target="_blank"></a>
</td>
</tr>
</tbody>
</table>
Once you change that, simply add the following to your CSS:
.sprite {
display: block;
}
This will cause the content in each <td> to align at the top, rather than in the center as they are doing currently.
If you still have trouble with the <p> tags being automatically inserted, you may look into this function.
End result:
I am trying to select an i element as follows:
//div[contains(text(), "daddsadas#lol.com")]//parent//i[contains(#class, "fa fa-pencil")]
From the following HTML:
<td ng-class="{true:'disable'}[contact.status=='deactive']">
<div class="email ng-binding">daddsadas#lol.com</div>
<div class="name">
<table>
<tbody>
<tr>
<td class="ng-binding">
Test Last
</td>
<td>
<i class="fa fa-pencil" ng-click="display_edit_contact_form(contact)"></i>
<i class="fa fa-trash" ng-click="delete_contact(contact)"></i>
</td>
</tr>
</tbody>
</table>
</div>
</td>
I cannot seem to get it to work. Any help would be great.
You can actually avoid traversing the tree, going up and down by using following:
//div[. = "daddsadas#lol.com"]/following::i[contains(#class, "fa-pencil")]
Managed to solve this by treating xpath queries the same as a file system:
//div[contains(text(), "daddsadas#lol.com")]/..//i[contains(#class, "fa-pencil")]
I've the below HTML Code.
<div class="main">
<div class="para">
<a name="I1-87A"></a><span class="phrase">I1/87A</span> <span class="font-style-bold">Punitive costs</span>—Proceedings which are an abuse of process in that they
are scandalous or vexacious or have been initiated maliciously or for an ulterior
motive may not only be struck out, the petitioner may also face an order to pay
costs on an indemnity basis (<span class="font-style-italic">Re Tang Hong Yuen, ex p.
Leung Yee Cheung</span> [2004] H.K.E.C. 972 <span class="font-style-italic">Bank of
China (Hong Kong) Ltd v. Lee Lin Heung</span> [2002] 1 H.K.L.R.D. A3 and
<span class="font-style-italic">Choy Yee Chun v. Bond Star Development Ltd</span>
[1997] H.K.L.R.D. 1327). This provides a salutory reminder to practitioners that
the bankruptcy jurisdiction should not be lightly invoked nor looked to for the
determination of disputes between parties.
</div>
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="3">
<colgroup>
<col class="colname-c1 colwidth-8.80%"></col>
<col class="colname-c2 colwidth-12.68%"></col>
<col class="colname-c3 colwidth-59.33%"></col>
<col class="colname-c3 colwidth-19.19%"></col>
</colgroup>
<tbody>
<tr>
<td class="null"><div class="para"><a name="I1-89"></a>
<span class="phrase">I1/89</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Stages of a voluntary arrangement</span>
</div>
</td>
<td rowspan="align-center">
<div class="para">
<span class="font-style-bold">Procedures</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">of the Bankruptcy Ordinance (BO)/Rule of the Bankruptcy Rules (BR)/Form in the Bankruptcy (Forms) Rules (BFR)</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"><a name="I1-89A"></a>
<span class="phrase">I1/89A</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Debtor prepares proposal</span>
</div>
</td>
<td>
<div class="para">The proposal should include:</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">BR 122B and C</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"><a name="I1-89B"></a>
<span class="phrase">I1/89B</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Notice to intended nominee</span>
</div>
</td>
<td>
<div class="para">Written notice of the debtor’s proposal and a copy of the proposal is passed to the intended nominee or a person authorised to take delivery on his behalf (BR 122D (1) and (2)). If the nominee agrees to act, he shall cause a copy of the notice to be endorsed to the effect that it has been received by him on a specified date (BR 122D(3)). The copy of the notice shall be returned by the intended nominee to the debtor (BR 122D(4)).</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">BR 122D BFR 167 </span>
<span class="font-style-italic">[Notice to Intended Nominee]</span>
</div>
</td>
</tr>
<tr>
<td class="auto-style1">
<div class="para">
<a name="I1-89C"></a>
<span class="phrase">I1/89C</span>
</div>
</td>
<td class="auto-style1">
<div class="para">
<span class="font-style-bold">Application for an interim order</span>
</div>
</td>
<td class="auto-style1">
<div class="para">An application for an interim order may be made when the debtor intends to make a proposal and the proposal must provide for a nominee to act in relation to the voluntary arrangement for the purposes of supervising its implementation (BO 20A). Two or more persons can be appointed as joint nominees in a voluntary arrangement. The court normally will not object to any proposal to appoint solicitors and certified public accountants provided such persons are able to demonstrate sufficient experience and knowledge in dealing with insolvency matters. For persons not coming from these two professions, a more cautious approach will be taken (see <span class="font-style-italic">Re Ng Hing Kwong</span> [2003] 3 H.K.L.R.D. 230).</div>
</td>
<td class="auto-style1">
<div class="para">
<span class="font-style-bold">BO 20A BFR 165 </span>
<span class="font-style-italic">[Application for Interim Order]</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"></div>
</td>
<td class="null"><div class="para"></div>
</td>
<td>
<div class="para">An application for an interim order may be made by:</div>
</td>
<td class="null"><div class="para"></div>
</td>
</tr>
</tbody>
</table>
</div>
here, i want to hide the first cell by using a css attribute and set the number in table first cell equal to the number in the para above. please refer the below screenshot.
There is a gap between the number start and also there is an extra cell(for which i gave class as 'null'), it should be hidden please refer to my second screen shot. please let me know how i can do this.
JsFiddle is here
you can modifie your css like this :
.main{
margin-left: 5.0em;
margin-right: 0.2em;
}
table.frame-all{
width: 97%;
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
padding: 10px 10px 10px 10px;
}
.frame-all td {
border: 0.080em solid;
padding-right: 0.4em;
padding: 7px 7px 7px 7px;
}
td.null {
border:none; !important
}
.para span.phrase {
text-indent: 0em;
font-weight: bold;
}
you may need some "adjustment", but it seems to be what you need.
Padding properties caused the gap between first row, and dates, also, i used "border : none;" on this first column to hide the border around the date. (it exist but you don't see it)
I Hope it may help you,
Best regards