I creating a web page and I placed divs in certain positions. However my problem is I've got a league table to the right and some divs to the left. If i change the box to the left of the table like say for example its height or data inside then the table will move upwards. Which I don't want. I don't want the table to move at all I want it to stay in the same position and height even if I adjust the boxes to the left
<div class="wrap">
<div id="boxInj">
<h1 class="headinj">Injuries</h1>
<p id="arsWriting">
- M. Arteta (Doubt) <br>
- M. Debuchy (Doubt) <br>
- A. Oxlade-Chamberlain (Doubt)
</p>
</div>
<div id="boxSus">
<h1 class="headinj" >Suspensions</h1>
<p id="arsWriting" >
- None
</p>
</div>
</div>
<div id="box">
<h1 id="headinj">Player Statistics (All Competitions)</h1>
<div id ="w"> <p id="arsWriting" class="sepStats"> <b>Top GoalScorers:</b> A. Sanchez (23) | O. Giroud (18) | A. Ramsey (10) | S. Cazorla (8) | D. Welbeck (8) </p> </div>
<div id ="e" > </div>
<div id ="u" >
</div>
<div id ="u" >
</div>
</div>
<div class="Newsbox">
<h1 id="headnews">NewsPaper Articles</h1>
<p id="arsWriting"> Currently Unavailble
</p>
</div>
<div id="sidebar">
<div class="box">
<table class="grid" cellspacing="0" cellpadding="0">
<caption>Premier League 14-15</caption>
<tbody><tr class="title"><td id="TeamNum">#</td><td id="TeamLength" colspan="1">Team</td><td class="stats" >P</td><td class="stats">W</td><td class="stats">D</td><td class="stats">L</td><td class="stats" class="Gdiff">GF</td><td class="stats" class="Gdiff">GA</td> <td class="stats" class="Gdiff">GD</td><td class="stats">Pts</td></tr>
<tr class="champion"><td>1.</td><td style="text-align: left;"><a id="h" href="Chelsea.html"><b>Chelsea</b></a></td><td>37</td><td>25</td><td>9</td><td>3</td><td>70</td><td>31</td><td>39</td><td class="bold">84</td></tr>
<tr class="league_champions"><td>2.</td><td style="text-align: left;"><b> Man City</b></td><td>37</td><td>23</td><td>7</td><td>7</td><td>81</td><td>38</td><td>43</td><td class="bold">76</td></tr>
<tr class="league_champions ArsStand"><td>3.</td><td style="text-align: left;" ><b>Arsenal</b></td><td>37</td><td>21</td><td>7</td><td>7</td><td>67</td><td>35</td><td>32</td><td class="bold">72</td></tr>
<tr class="league_champions ArsStand"><td>4.</td><td style="text-align: left;"><b>Man Utd</b></td><td>37</td><td>20</td><td>9</td><td>8</td><td>62</td><td>37</td><td>25</td><td class="bold">69</td></tr>
<tr class="league_europa"><td>5.</td><td style="text-align: left;"><b>Liverpool</b></td><td>37</td><td>18</td><td>8</td><td>11</td><td>51</td><td>42</td><td>9</td><td class="bold">62</td></tr>
<tr><td>6.</td><td style="text-align: left;"><b>Spurs</b></td><td>37</td><td>18</td><td>7</td><td>12</td><td>57</td><td>53</td><td>4</td><td class="bold">61</td></tr>
<tr><td>7.</td><td style="text-align: left;"><b>Southampton</b></td><td>37</td><td>18</td><td>6</td><td>13</td><td>54</td><td>31</td><td>23</td><td class="bold">60</td></tr>
<tr><td>8.</td><td style="text-align: left;"><b>Swansea</b></td><td>37</td><td>16</td><td>8</td><td>13</td><td>46</td><td>48</td><td>-2</td><td class="bold">56</td></tr>
<tr><td>9.</td><td style="text-align: left;"><b>Stoke</b></td><td>37</td><td>14</td><td>9</td><td>14</td><td>42</td><td>44</td><td>-2</td><td class="bold">51</td></tr>
<tr><td>10.</td><td style="text-align: left;"><b>Everton</b></td><td>37</td><td>12</td><td>11</td><td>14</td><td>48</td><td>49</td><td>-1</td><td class="bold">47</td></tr>
<tr><td>11.</td><td style="text-align: left;"><b>West Ham</b></td><td>37</td><td>12</td><td>11</td><td>14</td><td>44</td><td>45</td><td>-1</td><td class="bold">47</td></tr>
<tr><td>12.</td><td style="text-align: left;"><b>C Palace</b></td><td>37</td><td>12</td><td>9</td><td>16</td><td>46</td><td>51</td><td>-5</td><td class="bold">45</td></tr>
<tr><td>13.</td><td style="text-align: left;"><b>West Brom</b></td><td>37</td><td>11</td><td>11</td><td>15</td><td>37</td><td>47</td><td>-10</td><td class="bold">44</td></tr>
<tr class="dropout"><td>14.</td><td style="text-align: left;"><b>Leicester City</b></td><td>37</td><td>10</td><td>8</td><td>19</td><td>41</td><td>54</td><td>-13</td><td class="bold">38</td></tr>
<tr><td>15.</td><td style="text-align: left;"><b>Sunderland</b></td><td>37</td><td>7</td><td>17</td><td>13</td><td>30</td><td>50</td><td>-20</td><td class="bold">38</td></tr>
<tr><td>16.</td><td style="text-align: left;"><b>Aston Villa</b></td><td>37</td><td>10</td><td>8</td><td>19</td><td>31</td><td>56</td><td>-25</td><td class="bold">38</td></tr>
<tr><td>17.</td><td style="text-align: left;"><b>Newcastle</b></td><td>37</td><td>9</td><td>9</td><td>19</td><td>38</td><td>63</td><td>-25</td><td class="bold">36</td></tr>
<tr><td>18.</td><td style="text-align: left;"><b>Hull City</b></td><td>37</td><td>8</td><td>10</td><td>19</td><td>33</td><td>51</td><td>-18</td><td class="bold">34</td></tr>
<tr class="dropout"><td>19.</td><td style="text-align: left;"><b>Burnley</b></td><td>37</td><td>6</td><td>12</td><td>19</td><td>27</td><td>53</td><td>-26</td><td class="bold">30</td></tr>
<tr class="dropout"><td>20.</td><td style="text-align: left;"><b>QPR</b></td><td>37</td><td>8</td><td>6</td><td>23</td><td>41</td><td>68</td><td>-27</td><td class="bold">30</td></tr>
</tbody></table>
</div>
</div>
Heres my code https://jsfiddle.net/dtdkpfah/ which show that the table is not staying in one positon it moves if I change one box around it.
Related
This is my table:
<table class="table tableOnScroll">
<thead class="mobile-head-table">
<tr>
<td class="mobile-header-product-item-0">
<div class="product-item-image hideImage">
<div class="is-size-7 cross-sell-flag px-2 py-1 new-product-flag">
<p>popular</p>
</div>
<figure class="image is-4by5">
<img src="">
</figure>
</div>
<div class="promotion hidePromo">
<p>15% OFF with Mattress Purchase!</p>
</div>
<p class="product-name">Adjustable Memory Foam Pillow</p>
<div class="product-pricing">
<p>From</p>
<p class="price">79</p>
<div class="content is-flex mt-3">
<a href="" class="button is-fullwidth">
SHOP NOW </a>
</div>
</div>
</td>
<td class="mobile-header-product-item-1">
<div class="product-item-image hideImage">
<div class="is-size-7 cross-sell-flag px-2 py-1 on-sale-flag">
<p>BEST SELLER</p>
</div>
<figure class="image is-4by5">
<img src="">
</figure>
</div>
<div class="promotion hidePromo">
<p>15% OFF with Mattress Purchase!</p>
</div>
<p class="product-name">Cooling Gel Memory Foam Pillow</p>
<div class="product-pricing">
<p>From</p>
<p class="price">89</p>
<div class="content is-flex mt-3">
<a href="" class="button is-fullwidth">
SHOP NOW </a>
</div>
</div>
</td>
</tr>
</thead>
<tbody class="mobile-body-table">
<tr class="summary is-flex-touch is-hidden-desktop">
<td class="side-header is-flex">
<div class="header-text">
<h1>Summary</h1></div>
</td>
<td>
<div class="markdown-wrapper">
An ultra-breathable memory foam pillow with a soft, responsive, cooling design. Over 50,000 sold! </div>
</td><td>
<div class="markdown-wrapper">
Enjoy the support and cushioning of memory foam with next-level cooling. </div>
</td></tr>
<tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Warranty</div><div class="header-summary"><p>Guaranteed worry free sleep with Douglas Pillow</p></div></td><td>
<div class="markdown-wrapper">
<h3>3</h3>
<p>Years</p>
</div>
</td><td>
<div class="markdown-wrapper">
<h3>4</h3>
<p>Years</p>
</div>
</td></tr><tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Free Shipping & Returns</div><div class="header-summary"><p>Your Douglas Pillow will be delivered free of charge</p></div></td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
<p>Included</p>
</div>
</td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
<p>Included</p>
</div>
</td></tr><tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Coolness</div></td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
</div>
</td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
<p>Single action graphic</p>
</div>
</td></tr>
</tbody>
<tfoot class="mobile-footer-table">
<tr>
<td class="side-header">
Other Features </td>
<td>
<p>Adjustable Firmness</p>
<p>Supportive</p>
<p>Fit all pillows</p>
<p>Back Sleepers</p>
<p>Side Sleepers</p>
<p>Cooling Technology</p>
<p>Improved Memory Foam</p>
<p>Improved Memory Foam</p>
</td>
</tr>
</tfoot>
</table>
I tried this css
thead {
position: sticky;
bottom: 0;
z-index: 99;
}
and this did not work at all so I tried this instead
thead {
position: fixed;
bottom: 0;
z-index: 99;
}
and it worked but the only problem is that once the content of the table is completed and when the other sections start coming, the position of the thead remain the same which makes sense.
I either want the table header to be sticky on bottom on scroll and disappear as soon as the other content comes up or with the second css code provided, if it's possible to reset the position again as other sections start coming up.
Any help would be appreciated. Thank you!
add js to element:
const header = document.getElementById("headerid");
onScroll() {
header.style.position = "static"
console.log("Changed Position")
}
Add a id of headerid to the header, than set the onScroll attribute of the element to run the function onScroll(), which changes the position to normal. To do the opposite copy the function and change "static" to "fixed" and add the line header.style.bottom = 0;. Hope this fixes your problem!
I am trying to implement a table in my page. One of the values is rendering too big which looks odd in table cell. Is there any way I can utilize additional width of another <td> for a particular div (I don't want to use colspan for td). SO to achieve this I need to extend the width of that particular DIV. giving a div a width and display absolute property is a bad idea! What else should I do?
MY html-
<table>
<tr>
<th style="width:105px;">
<strong>Sr NO.</strong>
</th>
<th style="width:65px;">
<strong>Type</strong>
</th>
<th style="width:165px;">
<strong>Classification</strong>
</th>
<th style="width:80px;">
<strong>Book No</strong>
</th>
<th>
<strong>Agency</strong>
</th>
<th>
<strong>Date</strong>
</th>
</tr>
<tr ng-repeat="request in msc.minutesData">
<td>
<div class="minutes-subject-container">
<div class="p-t-xs">
{{request.id}}
</div>
<div class="flex-container">
<div class="minutes-info--subrow-subject" style="width:105px">
<label>subject</label>
<div class="minutes-info--subject">
<span>
{{request.subject}}
</span>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="p-t-xs">
{{request.type}}
</div>
</td>
<td>
<div class="minutes-desc-container">
<div class="p-t-xs">
{{request.classification}}
</div>
<div class="flex-container">
<div class="minutes-info--subrow-desc" style="width:165px">
<label>Description</label>
<div class="minutes-info--descriptiopn">
<span>
{{request.description}}
</span>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="p-t-xs">
{{request.bookNo}}
</div>
</td>
<td>
<div class="p-t-xs">
{{request.agency}}
</div>
</td>
<td style="width:110px;">
<div class="minutes-info">
<div class="minutes-info--firstrow">
<div>
<span class="minutes-spanrow">
{{request.date | date: "EEE, d MMM yyyy"}}</span>
</div>
</div>
<div class="flex-container">
<div class="minutes-info--secondrow">
<span class="link-to" ng-click="msc.geturlData(request)">
<img src="img/Doc-Viewer-icon.svg" title="التقرير">
</span>
</div>
</div>
</div>
</td>
</tr>
</table>
Attaching screenshot of my table view to get more insight of my issue. Could someone help me to get solution approach?
Giving width to a container in pixels is a bad idea. It makes it totally absolute and the width won't adjust in different resolutions. You can use percentage. And for your specific problem, you can use try to calculate the percentage that should be applied based on the content. Then using binding allot the percentage width to the containers.
I'm trying to print an content of my html page.
I'm using this angularPrint but the problem im having is that in the page preview i'm getting to pages. the first one has content and the second one is a blank page. I'm trying to get rid of the blank page.
this is my html
<div id="invoice" print-section="" print-only="">
<div class="invoice">
<div class="invoice-company">{{user.store.name}}</div>
<div class="invoice-header">
<div class="invoice-from"><small>from</small>
<address class="m-t-5 m-b-5"><strong>{{user.store.name}}.</strong><br/>{{user.store.address.street}}<br/>{{user.store.address.city}}, {{user.store.address.zipCode}}<br/>Phone: {{user.store.phone}}</address>
</div>
<div class="invoice-date">
<div class="date m-t-5">{{saleDate | date:'MM/dd/yyyy'}}</div>
<div class="invoice-detail"># {{saleId}}<br/>Cashier {{user.firstName}}</div>
</div>
</div>
<div class="invoice-content">
<div class="table-responsive">
<table class="table table-invoice">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sale.items">
<td>{{item.name}} {{item.size}}</td>
<td>{{item.price | currency}}</td>
</tr>
<tr ng-repeat="discount in sale.discounts">
<td>{{discount.name}}</td>
<td>- {{discount.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-price">
<div class="invoice-price-left">
<div class="invoice-price-row">
<div class="sub-price"><small>SUBTOTAL</small>{{sale.subtotal | currency}}</div>
<div class="sub-price"><i class="fa fa-plus"></i></div>
<div class="sub-price"><small>TAX</small>{{sale.tax}}</div>
</div>
</div>
<div class="invoice-price-right"><small>TOTAL</small>{{sale.total | currency}}</div>
</div>
</div>
<div class="invoice-footer text-muted">
<p class="text-center m-b-5">Thank you for coming.<br/>We hope you'll visit again.</p>
</div>
</div>
</div>
this is the directive that trigger the print action
<button type="button" print-btn="">Print</button>
I want a solution it doesn't matter if I have to use plain javascript/jQuery or no directive at all. I just to be able to populate an invoice and print it.
Thank you in advance.
you could add
#invoice:last-child {
page-break-after: auto;
}
to remove the last page
Note: Not supported in IE
I have my table in my html php file inside my i want it to be set the max height and if it reach the max and want to add more it will be scrollable how is this possible? this is for my project thanks
i want this to be scrollable after 500px reached
<div class="container" style="max-height: 500px;width:600px;height:500px border:1px solid black">
<div class="panel panel-default" style= "max-height: 500px;">
<div class="panel-heading" align="center">
<img src="or.png" alt="or" style="width:200px;height:40px;">
</div>
<div class="panel-body" style= "max-height: 500px;">
<table class="table">
<tr>
<th><FONT color="CB7F16">Foodname</FONT></th>
<th><FONT color="CB7F16">Quantity</FONT></th>
<tr>
<?php
while($food=mysql_fetch_assoc($list)) {
echo"<tr>";
echo"<td><FONT color='FA9404'>".$food['food']."</FONT></td>";
echo"<td><FONT color='FA9404'>".$food['quantity']."</FONT></td>";
echo"</tr>";
}
?>
<tr>
<td colspan="2" align="center"><a class="btn" href="acceptorder.php">Accept</a></td>
</tr>
</table>
</div>
</div>
</div>
Add overflow-y:auto; to your respective div.
i want my site to have sliding box like [this site]
I can do this by having a text widget and setting the position attribute to fixed.But it will not slide down.Do I have to use Javascript here?
Thanks
here is my code
<div id="primary" class="widget-area" role="complementary">
<ul class="xoxo">
<li id="text-4" class="widget-container widget_text"> <div class="textwidget"><table border="0">
<tbody>
<tr>
<td>
<p style="text-align: center">
<a href="http://nwfighting.com/files/2013/01/jiujitsuofferclean.png">
<img class="alignright size-full wp-image-4449" title="jiujitsuoffer" src="http://nwfighting.com/files/2013/01/jiujitsuofferclean.png" alt="" width="200" height="165" />
</a>
</p>
<p style="text-align: center"></p>
<p style="text-align: center">
<span style="font-size: 18px;color: #002aff">
<strong>
And Get a 2nd Video "Jiu Jitsu Fitness <BR>Secrets!"
</strong>
</span>
</p>
<p style="text-align: center">
<strong>
<span style="font-size: 16px">
And Ask About Our 30 Days Free Offer!
</span>
</strong>
</p>
<p>
<p>
<p style="text-align: center">
<strong>
<span style="font-size: 18px">
-Enter Your Info Here to Get Your Free Video-
</span>
</strong>
</p>
</p>
</p>
</td>
</tr>
<td>
<script type="text/javascript" src="https://cn112.infusionsoft.com/app/form/iframe/323c5df08af18d52623818df2e915c02"></script>
</td>
</tr>
</tbody>
</table>
</div>
</li> </ul>
</div><!-- #primary .widget-area -->
The site actually uses a plugin that make use of Javascript.You can simply use this Script and get it done
http://wordpress.org/extend/plugins/strx-magic-floating-sidebar-maker/
Hope this would help