I have an iframe that I need to refresh every five minutes. I have the below, but it only refreshes the on time. I need it to refresh every five minutes.
<table class="auto-style7">
<tr>
<td class="auto-style4">
</td>
</tr>
<tr>
<td class="auto-style2">
<p class="auto-style13" style="text-align: center; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-indent: 0px; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
Map does not auto-refresh. To update map you will need to manual refresh the page. (Click on warnings to get full details)</p>
<iframe width="1850" src="website url" class="auto-style8" height="650">
<script type="text/javascript">
function refreshiframe()
{
parent.frame1.location.href ="website url"
setTimeout("refreshiframe()",3000);
}
</script>
<body onload="refreshiframe();">
</iframe>
<br />
</td>
</tr>
</table>
<br />```
I found the solution. By putting correct script before the iframe and giving the iframe an id:
<script>
function reload() {
document.getElementById("ifr").src = "website url"
}
setInterval(reload, 60000)
</script>
<table class="auto-style7">
<tr>
<td class="auto-style4">
</td>
</tr>
<tr>
<td class="auto-style2">
<p class="auto-style13" style="text-align: center; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-indent: 0px; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
Map auto-refreshes every 5 minutes. Warnings update every minute (Click on warnings to get full details).</p>
<iframe width="1850" src="website url" class="auto-style8" height="650" id="ifr"></iframe>
<br />
</td>
</tr>
</table>
<br />```
Related
We are using Springboot 2.1.x version
PDF is being generated using HTML/CSS/ThymeLeaf
If user is entering very large text i.e. if text is larger than page of the size than doesn't appear at all, ideally it should be broken into 2 pages.
Here is the piece of code for generating the PDF Object, we are unable to identify the property which is missing, any help is much appreciated.
<table style="width: 100%;border-collapse: collapse;border-spacing: 0;" th:fragment="SingleLine(obj)">
<tr>
<td style="color: #170e0e; font-size: 11px; padding: 8px 10px 5px 0px; font-weight: 1000;width:150px;">
<b th:text="${obj.lableName}"></b>
</td>
</tr>
<tr>
<td style="padding: 0px 10px 8px 0px;color: #2c3032; font-size: 11px; padding-right: 10px;">
<span th:each="val,iterationStatus :${obj.value}">
<span style="display: inline-block;margin-right: 5px;font-size:11px;"
th:text="${#strings.defaultString(val,'-')}"></span>
</span>
</td>
</tr>
</table> ```
I am having a hard time with inline styling two links that are nested inside a table. Please note this HTML is an email that is going out and I have been told that I must accomplish my styling task using inline styling. Here is the code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 22px; border-collapse: collapse; border-radius: 1em; overflow: hidden; padding: 1.5em; background: #f6f6f6;" align="center"><p style="margin: 0; font-size: 16px; line-height:22px; mso-height-rule: exactly; color: #000; font-weight:400;"><strong>Hello:</strong></p>
<strong>Registration fee total: </strong><p>
Invoice #: </p>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Pay Online using Credit or Debit Card</td>
<td>Pay Cash at YouPayMeNow!® Location</td>
</tr>
</table></td>
</tr>
</table>
Here is how the email renders (I've experimented with multiple browsers and devices and it is the same everywhere):
See how the links are smushed together without any padding/border between them? I need them spaced apart, but still centered inside the gray box they dwell inside of. And I need the blue boxes around both links to be the same size as each other, with the text horizontally- and vertically-centered inside their respective boxes. How can I accomplish this?
The table attributes you use are now deprecated - though they do still work on some browsers.
It is recommended that CSS be used instead. This snippet uses border-spacing to make a gap between the two cells with links. It also puts the background color onto the cells themselves rather than the anchor elements within them.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 22px; border-collapse: collapse; border-radius: 1em; overflow: hidden; padding: 1.5em; background: #f6f6f6;" align="center">
<p style="margin: 0; font-size: 16px; line-height:22px; mso-height-rule: exactly; color: #000; font-weight:400;"><strong>Hello:</strong></p>
<strong>Registration fee total: </strong>
<p>
Invoice #: </p>
<table style="border-collapse: separate; border-spacing: 1em 0;">
<tr>
<td style=" background-color: #0b5584; padding: 10px; text-align: center;">Pay Online using Credit or Debit Card</td>
<td style=" background-color: #0b5584; padding: 10px; text-align: center;">Pay Cash at YouPayMeNow!® Location</td>
</tr>
</table>
</td>
</tr>
</table>
I am trying so solve a problem that causes me and my colleagues a splitting headache. Even though we've been provided a painkiller each we continue to be baffled by the way Google Chrome renders a checkbox in a container that has a font-size of 10pt.
The problem
Google Chrome seems to render some extra space around a checkbox element that I cannot seem to get rid of. The checkbox and its parent element must be 15 pixels tall. Setting the font-size of the parent element to 10pt causes that parent element to be 16 pixels in height.
An example
Take a look at the snippet below.
I have yet to find out (or understand) what causes the checkbox element to render as 15 pixels tall but effectively making its parent element 16 pixels tall.
td,
th
{
padding: 0;
font-size: 10pt;
}
input[type=checkbox]
{
height: 15px;
border: none;
padding: 0;
margin: 0;
}
<table width="100%" class="data">
<tr>
<th>Label 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Checkbox 2</th>
<td><input type="checkbox" disabled="disabled" /></td>
</tr>
<tr>
<th>Label 3</th>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
</table>
Exchanging the table for a div, a p or any other container also results in an incorrect height for that container.
Possible solution?
Setting the checkbox height to 14px makes the parent row 15 pixels tall. But then the checkbox itself does not meet the designer's requirements and thus this solution will not be accepted. Any workarounds?
input has default font property:
font: 13.3333px Arial
If you ensure that both the input and text in adjacent cells are the same font it should remove differences in line-height (I think).
Also, add display: block to input
td,
th {
padding: 0;
font-size: 10pt;
font-family: sans-serif;
}
input[type=checkbox] {
height: 15px;
border: none;
padding: 0;
margin: 0;
display: block;
}
<table width="100%" class="data">
<tr>
<th>Label 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Checkbox 2</th>
<td><input type="checkbox" disabled="disabled" /></td>
</tr>
<tr>
<th>Label 3</th>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
</table>
Another solution:
First, add display: block; to the input.
You can change the parent behaviour with the box-sizing property.
td {
box-sizing: content-box;
}
should fix your problem.
td,
th {
padding: 0;
font-size: 10pt;
}
tr {
box-sizing: content-box;
}
input[type=checkbox]{
display: block;
height: 15px;
border: none;
padding: 0;
margin: 0;
}
<table width="100%" class="data">
<tr>
<th>Label 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Checkbox 2</th>
<td><input type="checkbox" disabled="disabled" /></td>
</tr>
<tr>
<th>Label 3</th>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
</table>
I also had this problem in 2020, on Chrome and Firefox, and none of the solutions here worked. This is what worked for me
input[type=checkbox] {
height: 21px;
vertical-align: top;
position:relative;
top:-5px;
}
.checkboxcontainer{
max-height: 16px;
}
In my case we had a structure
<div>
<div data-x="lots of these" />
<div data-x="lots of these" />
<div data-x="lots of these" />
<div>
<div class="checkboxcontainer">
<input type="checkbox" ...>
And the outer div was being given a huge top margin. Deleting the checkbox in f12 confirms that the checkbox was the culprit, and the css provided seemed to work ok
I saw several questions on this forum related to my problem but neither of them were helpful, so am posting here.
I have a table where a style is applied at table level(.tblSignal) and td level (.tdSignalName). Here is jsfiddler link
My problem is, when I hover on the table, all the text should turn to white color. But since there is a style applied on .tdSignalName as "#0072c6", it does not override the color to white. I tried "!important" but it did not work. Please advise !
.tblSignal{
/* border-width:1px; */
border-style:solid;
}
.tblSignal:hover{
background-color:#0072c6;
color:#FFFFFF !important;
font-size:initial;
}
.tdSignalName{
font-weight:bold;
height:30px;
font-size:16px;
color:#0072c6;
}
/* .tdSignalName:hover{
color:#FFFFFF !important;
} */
.tdSignalDescription{
}
.tdSigButton{
text-align:center;
vertical-align:middle;
}
<table class="tblSignal" width="500px">
<tr >
<td class="tdSignalName" width="400px">
<div>Title</div>
</td>
<td rowspan="2" class="tdSigButton" width="100px">
<div id="divButton">
<button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button>
</div>
</td>
</tr>
<tr>
<td class="tdSignalDescription" width="400px">
<!-- _#=ctx.RenderBody(ctx)=#_ -->
<div><i>SignalDescription </i></div>
</td>
</tr>
</table>
You need to also override the .tdSignalName colour declaration when the parent is hovered...
.tblSignal:hover .tdSignalName {
color:#FFFFFF;
}
Example...
.tblSignal {
border-style: solid;
}
.tblSignal:hover {
background-color: #0072c6;
color: #FFFFFF !important;
font-size: initial;
}
.tdSignalName {
font-weight: bold;
height: 30px;
font-size: 16px;
color: #0072c6;
}
.tblSignal:hover .tdSignalName {
color: #FFFFFF;
}
.tdSigButton {
text-align: center;
vertical-align: middle;
}
<table class="tblSignal" width="500px">
<tr>
<td class="tdSignalName" width="400px">
<div>Title</div>
</td>
<td rowspan="2" class="tdSigButton" width="100px">
<div id="divButton">
<button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button>
</div>
</td>
</tr>
<tr>
<td class="tdSignalDescription" width="400px">
<!-- _#=ctx.RenderBody(ctx)=#_ -->
<div><i>SignalDescription </i></div>
</td>
</tr>
</table>
I have a gwt project that has a panel where I added a style name to called "dock". When I open my application in Firefox everything is fine but in Chrome, Safari and IE the background isn't complete. This is my css code:
.dock {
background: #e3e8f3 url(img/hborder.png) repeat-x 0px -1000px;
padding: 4px 4px 4px 8px;
width: 100%;
margin: 0;
position: relative;
}
This is how it looks in Firefox (it should look like this) Screenshot
And this is how it looks in the other browsers like chrome: Screenshot
Any ideas how to correct this?
Thanks in advance.
[EDIT:]
This is the html code generated by gwt:
<table cellspacing="0" cellpadding="0" class="dock" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<button type="button" class="gwt-Button gwt-Button-helpButton" title="Zoek hulp"></button>
</td>
<td align="left" style="vertical-align: top;">
<button type="button" class="gwt-Button gwt-Button-browseButton" title="Blader door de database."></button>
</td>
<td align="left" style="vertical-align: top;">
<button type="button" class="gwt-Button gwt-Button-statButton" title="Laat populaire boeken zien"></button>
</td>
<td align="left" style="vertical-align: top;">
<button type="button" class="gwt-Button gwt-Button-search" title="Zoek een boek"></button>
</td>
<td align="left" style="vertical-align: top;">
<input type="text" class="gwt-TextBox gwt-TextBox-searchQuery">
</td>
</tr>
</tbody>
</table>
I noticed with firebug the panel also has got this css markup (this markup is automatically added when compiling in gwt).
element.style {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
try adding a fixed height to your .dock, which is same as background image height, i.e.
.dock { height: 100px }
Put the url in quotes:
background: #e3e8f3 url("img/hborder.png") repeat-x 0px -1000px;
Last time I checked that was the correct format.
Edit: Ah, your problem seems to be that tables aren't responding for some strange reason. Try this.
background: url("img/hborder.png") repeat-x 0px -1000px;
background-color: #e3e8f3;