I have created a full calendar page in sales force. Now I would like to append a div when hover on an event. Iit is working but hidden div come below another event and I want to show it on all above.
eventMouseover: function(calEvent, domEvent) {
console.log(calEvent.id);
console.log(domEvent);
$(this).append('<div id="events-layer" style="background-color:white;z-index:99999; overflow-auto;background-repeat: no-repeat;background-position: center;position: absolute;">'+'<table class="tableContent" cellpadding="5"> <tr class="tablerow"> <td class="tablerdata">Event Detail:</td> <td class="tablerdata"> <button type="button" onclick="myFunction()">Delete</button> <button type="button">edit</button> </td> <td> </td> </tr> <tr class="tablerow"> <td class="tablerdata">Assigned To </td> <td class="MiddleCol">fffffffffffffffffff</td> <td class="MiddleCol">Griffin</td> </tr> <tr class="tablerow"> <td class="tablerdata">Subject</td> <td class="MiddleCol">Griffin</td> <td class="MiddleCol">Griffin</td> </tr> <tr class="tablerow"> <td class="tablerdata">Start </td> <td class="MiddleCol">Griffin</td> <td class="MiddleCol">Griffin</td> </tr> <tr class="tablerow"> <td class="tablerdata">End </td> <td class="MiddleCol">Griffin</td> <td class="MiddleCol">Griffffffffin</td> </tr> <tr class="tablerow"> <td class="tablerdata">Related To </td> <td class="MiddleCol">Griffin</td> <td class="MiddleCol">Griffin</td> </tr> <tr class="tablerow"> <td class="tablerdata">Name </td> <td class="MiddleCol">Griffin</td> <td class="MiddleCol">Griffin</td> </tr> </table>'+'</div>');
}
Try making the position of the containing element "relative"
Related
Can anyone help me to find the right XPath to retrieve the Average Win and Loss value (36.68 pips and -38.56 pips) from this web page:
https://www.myfxbook.com/members/babatrader/ic-markets-live/2595252
Here the portion of the HTML
<table class="maxWidth" cellspacing="0" id="trades">
<tbody><tr>
<td valign="top">
<table cellspacing="0" class="advanced border0L">
<tbody><tr class="bg1">
<td>Trades:</td>
<td class="alignR">2885</td>
</tr>
<tr>
<td>Profitability:</td>
<td align="right" class="pointer">
<span id="wonTip" class="Won 1619 out of 2885 trades, which represents 56%.<br/>Lost 1266 out of 2885 trades, which represents 44%."><div class="blockHolder">
<div class="greenBlock floatLeft" style="width:56px"></div>
<div class="redBlock floatLeft" style="width:44px"></div>
</div></span>
</td>
</tr>
<tr class="bg1">
<td>Pips:</td>
<td class="alignR">10571.7</td>
</tr>
<tr>
<td>Average Win:</td>
<td class="alignR">36.68 pips / €3.31</td>
</tr>
<tr class="bg1">
<td>Average Loss:</td>
<td class="alignR">-38.56 pips / -€3.56</td>
</tr>
<tr>
<td> Lots:</td>
<td class="alignR">38.94</td>
</tr>
<tr class="bg1">
<td>Commissions:</td>
<td class="alignR">-€226.56</td>
</tr>
</tbody></table>
</td>
<td valign="top">
<table cellspacing="0" class="advanced border0R border0L">
<tbody><tr>
<td>Longs Won:</td>
<td align="right">
<span class="gray">(687/1247) </span> 55%
</td>
</tr>
<tr class="bg1">
<td>Shorts Won:</td>
<td align="right">
<span class="gray">(932/1638) </span> 56%
</td>
</tr>
<tr>
<td>Best Trade(€):</td>
<td class="alignR"> <span class="gray">(Jul 20)</span> 17.93
</td>
</tr>
<tr class="bg1">
<td> Worst Trade(€):</td>
<td class="alignR"> <span class="gray">(Jul 19)</span> -32.08
</td>
</tr>
<tr>
<td>Best Trade (Pips):</td>
<td class="alignR"> <span class="gray">(Sep 07)</span> 177.5
</td>
</tr>
<tr class="bg1">
<td>Worst Trade (Pips):</td>
<td class="alignR"> <span class="gray">(Sep 06)</span> -190.0
</td>
</tr>
<tr>
<td>Avg. Trade Length:</td>
<td class="alignR">
22h 45m
</td>
</tr>
</tbody></table>
</td>
<td>
<table cellspacing="0" class="advanced border0R">
<tbody><tr class="bg1">
<td><span class="dotted" id="pfTip">Profit Factor:</span></td>
<td class="alignR">
1.19
</td>
</tr>
<tr>
<td><span class="dotted" id="sdTip">Standard Deviation:</span></td>
<td class="alignR">€4.30</td>
</tr>
<tr class="bg1">
<td><span class="dotted" id="sharpTip">Sharpe Ratio:</span></td>
<td class="alignR">
0.00
</td>
</tr>
<tr>
<td><span class="dotted" id="zTip">Z-Score (Probability):</span></td>
<td class="alignR">
-31.21 (99.99%)
</td>
</tr>
<tr class="bg1">
<td><span class="dotted" id="expTip">Expectancy:</span></td>
<td class="alignR">3.7 Pips / €0.30</td>
</tr>
<tr>
<td><span class="dotted" id="ahprTip">AHPR:</span></td>
<td class="alignR">0.01%</td>
</tr>
<tr class="bg1">
<td><span class="dotted" id="ghprTip">GHPR:</span></td>
<td class="alignR">0.01%</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I've tried without succeed: The below is the one I have tried it.
//*[#id="trades"]/tbody/tr/td[1]/table/tbody/tr[5]/td[2]
//*[#id="trades"]/tr/td[1]/table/tbody/tr[5]/td[2]
and many others.. ;-)
This XPath,
substring-before(//table[#id="trades"]
//td[.="Average Win:"]/following-sibling::td[1], " /")
will select
36.68 pips
as requested, and you should find it to be more robust than many alternatives. For example, the table structure can change substantially, and as long as the label and the relative positions of the two table cells remain the same, this XPath will continue to function.
i had to remove both "tbody"
//*[#id='trades']/tr/td/table/tr[4]/td[2]
I am dynamically creating elements (student bills) on a web page which I want to print.
I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.
But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.
How can I force this element (one student's bill) to take exactly half of the height of the page?
<div class="col-md-6">
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
<div id="customer-title">
<table>
<tbody>
<tr>
<td style="text-align:center">
12017 </td>
<td style="text-align:center">
dfsdgf sdgsdg sdgsdg </td>
<td style="text-align:center">
1st </td>
</tr>
<tr>
<td style="text-align:center">
32817 </td>
<td style="text-align:center">
Sarika Godara </td>
<td style="text-align:center">
3rd </td>
</tr>
</tbody>
</table>
</div>
<table id="meta">
<tbody>
<tr>
<td class="meta-head">Bill #</td>
<td>149</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td id="date">11-08-2017</td>
</tr>
<!--tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">Rs.</div></td>
</tr-->
</tbody>
</table>
</div>
<table id="items">
<tbody>
<tr>
<th colspan="1">Sr.No.</th>
<th colspan="4">Description</th>
<th colspan="1">Detail</th>
<th colspan="1">Sub-total</th>
</tr>
<tr>
<td colspan="1">1
</td>
<td colspan="4"> Tuition Fees(upto September)
</td>
<td colspan="1">2600 + 2750
</td>
<td colspan="1">5350
</td>
</tr>
<tr>
<td colspan="1">2
</td>
<td colspan="4"> AC
</td>
<td colspan="1">2450 + 2450
</td>
<td colspan="1">4900
</td>
</tr>
<tr>
<td colspan="1">3
</td>
<td colspan="4"> Transport Fees(upto September)
</td>
<td colspan="1">1650
</td>
<td colspan="1">1650
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Grand Total</td>
<td class="total-value">
<div id="total">Rs. 11900</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Amount Paid</td>
<td class="total-value">Rs. 0</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">Rs. 11900</div>
</td>
</tr>
</tbody>
</table>
<div id="terms">
<h5>Please Note</h5> आपने अपने बच्चे की फीस पेमेंट में बहुत देर कर दी है. कृपया जल्दी से जल्दी भुगतान करें.
</div>
</div>
</div>
Try this
add a div after every 2nd elements with page-break-after property
<div style="page-break-after:always"></div>
page-break-after property sets whether a page break should occur AFTER a specified element
DEMO
I have the following table in HTML, but the columns don't line up at all well, you can see it here:
http://purepremier.com/#/teams
Is there any reason why this might be?
<table class="league">
<thead>
<tr>
<th>Pos</th>
<th>Team</th>
<th>P</th>
<th>F</th>
<th>A</th>
<th>GD</th>
<th>Pts</th>
</tr>
</thead>
<tbody>
<td class="ng-binding">1</td>
<td class="teams">
<a href="#/teams/65" ng-click="hidePrefs()" class="ng-binding">
Manchester City
</a>
</td>
<td class="ng-binding">4</td>
<td class="ng-binding">10</td>
<td class="ng-binding">0</td>
<td class="ng-binding">10</td>
<td class="ng-binding">12</td>
</tr>
<tr ng-repeat="team in teamsList.standing" class="ng-scope">
<td class="ng-binding">2</td>
<td class="teams">
<a href="#/teams/354" ng-click="hidePrefs()" class="ng-binding">
Crystal Palace
</a>
</td>
<td class="ng-binding">4</td>
<td class="ng-binding">8</td>
<td class="ng-binding">5</td>
<td class="ng-binding">3</td>
<td class="ng-binding">9</td>
</tr>
............
</tbody>
</table>
The below should fix the issue
In app.css line 921 change the display:inline-block; to display:table-cell;
display:table-cell; is the default behaviour of the <td> element
I am weak in CSS, and I am trying to put a table in my html page, it has two rows and five columns per row(of course it is simplified), and it should look like this (the table is a hand-drawing table, it does not come so precise, I`m sorry for that.):
But mine looks like this:
This is my code:
<table border="1">
<tr>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:25px"> </td>
</tr>
<tr>
<td style="width:25px"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
</tr>
</table>
Code in jsfiddle is here.
NOTE:Any styles could be added, but structure of table could not be changed.
My problem is not the border style of table, but the width of cells, it seems that cells has a erratic width, I hope the right-border of first cell in second row could reach to the middle of bottom-border of first cell in first row, and the right-border of first cell in first row could reach to the middle of top-border of second cell in second row, so is others.
I have tried my best, but it still does not work. How could I do to match the requirement? Any suggestion will be appreciated. Thanks in advance.
You can use a <colgroup> element to achieve this:
<table border="1">
<colgroup>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
</colgroup>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
It will tell the table that there are 9 columns and each row will span the columns as you originally had.
There are other non-table ways to acheive what you are looking for. Here is one quick example:
<div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
div.row
{
clear:both;
}
div div div
{
width: 50px;
border-width: 1px;
border-style: solid;
border-color: black;
display: inline-block;
float: left;
margin: -1px;
}
div div:nth-child(2n+1) div:first-child,
div div:nth-child(2n) div:last-child
{
width: 25px;
}
Use tables within tables..
<table>
<tr>
<td>
<table border="1">
<tr>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:25px"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td style="width:25px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
</tr>
</table>
</td>
</tr>
</table>
This way you will never have that problem...
For this to work, you need to have at least one row that defines the width of individual cells (ones that are not using cellspans):
http://jsfiddle.net/cR2qd/7/1
HTML:
<body>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
</body>
CSS:
td {
width: 25px;
}
I want to create a normal table. But I need to put two fields in one row.
So, I used rowspan and expected to have a two row table, but with a space of fourth.
But, it's showed in only one line.
I revised, and look for something wrong, but I dont unerstaing.
When I remove the rowspan, everything looks normal, but I need the rowspan.
Why is render in one row?
<table class="table table-bordered">
<tbody>
<tr class="warning" >
<td rowspan="2" >100</td>
<td rowspan="2">87</td>
<td rowspan="2">FERNANDO RODRIGUEZ</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Monterrey </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/100" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr class="warning" >
<td rowspan="2" >101</td>
<td rowspan="2">82</td>
<td rowspan="2">IVAN CORTES</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Nissan Mexico </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/101" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
</tbody>
</table>
This is a picture of my app in action, and the reason of my question.
https://www.dropbox.com/s/1luaxgg4yesm8re/result.png
Replace the rowspans with colspans. For example:
<td colspan="2">
(...)
</td>
EDIT:
Still not 100% sure what you're trying to achieve but as far as I believe you might want to:
remove rowspan from all the td's that are meant to be two-rowed.
add and additional <tr></tr> after each tr and fill it with a number of tds equal to number of cells with rowspan.
I just had a similar problem, try adding an empty Row at the end of the missbehaving Row something like this:
<table class="table table-bordered">
<tbody>
<tr class="warning" >
<td rowspan="2" >100</td>
<td rowspan="2">87</td>
<td rowspan="2">FERNANDO RODRIGUEZ</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Monterrey </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/100" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr /> <!--magic goes here-->
<tr class="warning" >
<td rowspan="2" >101</td>
<td rowspan="2">82</td>
<td rowspan="2">IVAN CORTES</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Nissan Mexico </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/101" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr /> <!--magic goes here-->
</tbody>
</table>
It worked for me :)