I have this definition:
<g:HTMLPanel ui:field="container" styleName="{style.itemcontainer}">
<table style="width:100%" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td width="25px" valign="bottom">
<b:Span ui:field="iconSpan" addStyleNames="{style.icon}"></b:Span>
</td>
<td width="60px">
<span ui:field="valueLabel" class="{style.valueLabel}">0%</span>
</td>
<td width="24px" class="{style.selectedIcon}">
<b:Icon ui:field="selectedIcon" type="BAR_CHART_O" visible="false"></b:Icon>
</td>
</tr>
</table>
</g:HTMLPanel>
I would like to convet the html table in 3 div´s.
Could you help me?
Check out float and box model. You could make this simpler with css.
<div style="float:left">
<b:Span ui:field="iconSpan" addStyleNames="{style.icon}"></b:Span>
</div>
<div style="float:left">
<span ui:field="valueLabel" class="{style.valueLabel}">0%</span>
</div>
<div style="float:left">
<b:Icon ui:field="selectedIcon" type="BAR_CHART_O" visible="false"></b:Icon>
</div>
<br style="clear:left" />
Related
I am making a HTML email that a clients suddenly want to be shown as a one-pager without scrollbars. I have edited the wrapper to 'height:100vh', but it still has scrollbars.
I want to know, how would i go about and make this page appear as a one pager without scrollbars in all different screen heights?
<body>
<table width="100%">
<tbody>
<tr>
<td class="wrapper" width="600" align="center">
<!-- Header image -->
<table class="section header" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column center">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/header2.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="section main" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table style="margin: 0 auto;">
<tbody>
<tr>
<td align="left">
<img src="./media/main-image1.png" alt="picsum" width="600"/>
<br>
<div class="firstparagraph">
<p class="comfortaaquote font40"> You will be OK... </p><br>
<span class="marck"> Sweetheart</span>
</div>
<br>
<br>
<p class="comfortaatext center2">A lady is reassuring her dog everything will be OK in the veterinary hospital in Hanoi, Vietnam while the vet nurse are busy working in the background</p>
<br>
<div class="buttons">
<div class="days-counter">
<img class="steps" src="./media/counter.png" alt="picsum" width="300" />
<div class="text-block"><p>14</p></div>
</div>
<img class="submit" src="./media/submit.png" alt="picsum" width="300" />
<br>
<br>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- bottom part-->
<!-- footer part-->
<table class="section bottom" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/bottom.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
should i be targeting the height:100vh to the body or the wrapper?
thank you
I have a web page which is meant to be printed as a PDF. Everything looks great until I get to a page which shows images. For reasons unknown to me, the width of the images seem fine but the height is too high when appearing in the PDF preview.
The HTML looks like this:
<table width="100%">
<tr>
<td>
<table class="table table-striped table-bordered">
<tr>
<td width="50%" class="centerText">
<span style="font-size:small;text-align: center;">Top Depth Photo</span>
<img src="#utility.TopDepthImageUri" width="512" height="384" />
</td>
<td width="50%" class="centerText">
<span style="font-size:small;text-align: center;">Bottom Depth Photo</span>
<img src="#utility.BottomDepthUri" width="512" height="384" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="table table-striped table-bordered ">
<tr>
<td width="50%" class="centerText">
<span style="font-size:small;text-align: center;">Finish Photo</span>
<img src="#utility.FinishImageUri" width="512" height="384" />
</td>
<td width="50%" class="centerText">
<span style="font-size:small;text-align: center;">Area Photo</span>
<img src="#utility.AreaImageUri" width="512" height="384" />
</td>
</tr>
</table>
</td>
</tr>
</table>
On the web page the images look fine, but when I print the PDF preview looks like this:
You can see that only one row of the table is shown and the images are not scaled as they should be. (The second row was on the following page.)
How can I control the exact height and width of the image in this case?
Try this
<table width="100%">
<tr>
<td>
<table class="table table-striped table-bordered">
<tr>
<td width="50%" class="centerText">
<span style="font-size:small;text-align: center;">Top Depth Photo</span>
<img src="#utility.TopDepthImageUri" style="max-width: 100%; height: auto;" />
</td>
<td width="50%" class="centerText">
<span style="font-size:small;text-align: center;">Bottom Depth Photo</span>
<img src="#utility.BottomDepthUrig" style="max-width: 100%; height: auto;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="table table-striped table-bordered ">
<tr>
<td width="50%" class="centerText">
<span style="font-size:small;text-align: center;">Finish Photo</span>
<img src="#utility.FinishImageUri" style="max-width: 100%; height: auto;" />
</td>
<td width="50%" class="centerText">
<span style="font-size:small;text-align: center;">Area Photo</span>
<img src="#utility.AreaImageUri" style="max-width: 100%; height: auto;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
Not sure why the valign="middle" not working here. Can someone please help me out with what is missing here.
HTML
<table id="my_table" style="width:100%;height:450px" cellpadding="0" cellspacing="0">
<tr>
<td width="5%" valign="middle">
<div id="left_arrow" align="center">
<img src='./button/3.png' id='leftArrow' /
</div>
</td>
<td width="60%" valign="middle" >
<div id="left_table" >
<div id="holder" >
<img src=".images/3.jpg" id="slideshow" />
</div>
</div>
</td>
<td width="5%" valign="middle">
<div id="right_arrow" align="center">
<img src='./button/2.png' id='rightArrow' />
</div>
</td>
</tr>
</table>
You want to take the inline styles out if possible, but here's the full solution.
<table id="my_table" style="width:100%;height:450px" cellpadding="0" cellspacing="0">
<tr>
<td width="5%" style="vertical-align:middle">
<div id="left_arrow" align="center">
<img src='./button/3.png' id='leftArrow' />
</div>
</td>
<td width="60%" style="vertical-align:middle">
<div id="left_table" >
<div id="holder" >
<img src=".images/3.jpg" id="slideshow" />
</div>
</div>
</td>
<td width="5%" style="vertical-align:middle">
<div id="right_arrow" align="center">
<img src='./button/2.png' id='rightArrow' />
</div>
</td>
</tr>
</table>
Click here for live demo
The valign attribute of is not supported in HTML5. Use CSS instead.
CSS syntax: <tr style="vertical-align:middle">
I have a HTML table with each td having a rounded corner image i put the images together and manage to get table with rounded corners .
Here's how it looks,
Here's the HTML for the below along with the css
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" frame="void"
style="width: 100%;">
<tr>
<td width="1%">
<img alt="" src="Images/frame_top_left.jpg" />
</td>
<td class="top_frame">
</td>
<td width="1%" align="right">
<img alt="" src="Images/frame_top_right.jpg" />
</td>
</tr>
<tr>
<td>
<img alt="" src="Images/frame_bottom_left.jpg" />
</td>
<td class="bottom_frame">
</td>
<td align="right">
<img alt="" src="Images/frame_bottom_right.jpg" />
</td>
</tr>
</table>
And heres the css
Now data is placed dynamically in the td with the css class "bottom_frame" whenever there's data placed the whole table gets changed heres how it looks when data is placed
heres the image of the HTML data inserted.
How do i let my table be maintained with any loss to it ????
Thanks & Regards,
Francis P.
You'd better add one more row to your table to put a content in it. Something like this:
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" frame="void"
style="width: 100%;">
<tr>
<td width="1%">
<img alt="" src="Images/frame_top_left.jpg" />
</td>
<td class="top_frame">
</td>
<td width="1%" align="right">
<img alt="" src="Images/frame_top_right.jpg" />
</td>
</tr>
<tr>
<td colspan="3" class="middle_frame">
-- Put your content right here --
</td>
</tr>
<tr>
<td>
<img alt="" src="Images/frame_bottom_left.jpg" />
</td>
<td class="bottom_frame">
</td>
<td align="right">
<img alt="" src="Images/frame_bottom_right.jpg" />
</td>
</tr>
</table>
Why is content in the table appears to start from the center.How to make it to start from where the row starts
<table style="table-layout:fixed;width:100%;" border="1" cellpadding="0" cellspacing="0" class="main_table" id="main_table">
<tr>
<td width="20%" height="70px" align="center" id="plugins" class="step step1 clickable" step="1" onclick="javascript:getresource('1','0');">
<font color="blue">Plugins</font>
</td>
<td rowspan="5" width="80%" height="100%" align="center" ><br>
<div id="status" class="msg" style="display:none"><br></div>
<div id="header_msg" height="100%" align="center"></div>
<div id="contents" height="100%"></div>
</td>
</tr>
</table>
Remove 'align="center"' from both td's and the 2nd div, and if you want the data to start at the top of the cell, add 'valign="top"' to the tr ie:
<table style="table-layout:fixed;width:100%;" border="1" cellpadding="0" cellspacing="0" class="main_table" id="main_table">
<tr valign="top">
<td width="20%" height="70px" id="plugins" class="step step1 clickable" step="1" onclick="javascript:getresource('1','0');">
<font color="blue">Plugins</font>
</td>
<td rowspan="5" width="80%" height="100%"><br>
<div id="status" class="msg" style="display:none"><br></div>
<div id="header_msg" height="100%"></div>
<div id="contents" height="100%"></div>
</td>
</tr>
</table>
Apart from the bloated use of inline CSS, HTML tables for layouts and the not-so-popular -tag, I'd guess it's the..
align="center"
..that centers your content. Try replacing it with "left" instead. Do consider doing it the CSS way though:
text-align: left;
Use vertical-align:top