What's new

Welcome to the forum 👋, Visitor

To access the forum content and all our services, you must register or log in to the forum. Becoming a member of the forum is completely free.

How to adjust HTML form size as per the email window

Sachin

New member
Joined
Dec 14, 2020
Messages
1
Reaction score
0
HTML Coins
0
Hello team,

I have designed one form through HTML code , this form is getting input form Power Automate and sending email to the respected user. The issue is when user is receiving form and adjust the size of email window form size does not adjust as per email window. how can i achieve that. Please find my html code


Code:
<!DOCTYPE html>
<table style="height: 100%;" border="5" width="100%" height="100%" bordercolor="#333399">
<tbody >
    <tr>
    <td style="text-align: center; background-color: #2e3692;  width: 500px;"  colspan="4" ><img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/ncr-1220.png" alt="" width="754" height="90"  /></td>
    <td  style="text-align: center; background-color: #2e3692;" colspan="2" > <img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/office-work.gif" alt="" width="213" height="90" /></td>
    </tr>
    
    <tr>
<td style="background-color: #E1F8DA; border: none"><span style="color: #333399; font-family: Calibri'"><strong>NCR Number</strong></span></td>
<td>@{items('Apply_to_each')?['NCRNUMBER']}@{items('Apply_to_each')?['BGNTOEMAIL_CUSTOM']} </td>
<td style="background-color: #E1F8DA; border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Reported Date</strong></span></td>
<td>@{items('Apply_to_each')?['NCRDATE']}</td>
<td style="background-color: #E1F8DA; border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Type</strong></span></td>
<td>@{items('Apply_to_each')?['TYPE']}</td>
</tr>

<tr>
<td style="background-color: #E1F8DA; border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Reported By</strong></span></td>
<td>@{items('Apply_to_each')?['REPORTEDBY']}</td>
<td style="background-color: #E1F8DA; border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Reported By Dept</strong></span></td>
<td>@{items('Apply_to_each')?['REPORTBYDEPARTMENT']}</td>
<td style="background-color: #E1F8DA; border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Reported By Company</strong></span></td>
<td>@{items('Apply_to_each')?['R_COMPANY']}</td>
</tr>

<tr>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Assignee</strong></span></td>
<td>@{items('Apply_to_each')?['ASSIGNEE']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Assignee Dept</strong></span></td>
<td>@{items('Apply_to_each')?['ASSIGNEEDEPARTMENT']}</td>
<td style="background-color: #E1F8DA;border: none"><strong><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'">Assignee Company</span></strong></td>
<td>@{items('Apply_to_each')?['COMPANY']}</td>
</tr>

<tr>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Project id</strong></span></td>
<td>@{items('Apply_to_each')?['PROJID']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Project</strong></span></td>
<td>@{items('Apply_to_each')?['PROJECTNAME']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Client</strong></span></td>
<td>@{items('Apply_to_each')?['CUSTOMER']}</td>
</tr>

<tr>
<td style="vertical-align: middle; background-color: #E1F8DA;"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>NC Details</strong></span></td>
<td style="vertical-align: middle;" colspan="5"><span style="color: #000000;">@{items('Apply_to_each')?['NCDETAILS']}</span></td>
</tr>

<tr>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Correction/Rectification Action</strong></span></td>
<td>@{items('Apply_to_each')?['CORRECTIVEACTION']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Action By</strong></span></td>
<td>@{items('Apply_to_each')?['ACTIONBY']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Date of action</strong></span></td>
<td>@{items('Apply_to_each')?['DATEOFACTION']}</td>
</tr>

<tr>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Material cost</strong></span></td>
<td>@{items('Apply_to_each')?['MATERIALCOST']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Extra Cost</strong></span></td>
<td>@{items('Apply_to_each')?['EXTRACOST']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Idle/Delay</strong></span></td>
<td>@{items('Apply_to_each')?['IDLEDELAY']}</td>
</tr>

<tr>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Lost Time reporter</strong></span></td>
<td>@{items('Apply_to_each')?['LOSTTIME_REPORTER']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Lost Time assignee</strong></span></td>
<td>@{items('Apply_to_each')?['LOSTTIME_ASSIGNEE']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Production/Operation Lost Time</strong></span></td>
<td>@{items('Apply_to_each')?['LOSTTIME_PRODUCTION']}</td>
</tr>

<tr>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Total Cost</strong></span></td>
<td>@{items('Apply_to_each')?['TOTALCOST']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Deduction</strong></span></td>
<td>@{items('Apply_to_each')?['DEDUCTION']}</td>
<td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Status</strong></span></td>
<td>@{items('Apply_to_each')?['NCRSTATUS']}</td>
</tr>

</tbody>
</table>
 

Theme customization system

You can customize some areas of the forum theme from this menu.

  • Wide/Narrow view

    You can control a structure that you can use to use your theme wide or narrow.

    Grid view forum list

    You can control the layout of the forum list in a grid or ordinary listing style structure.

    Picture grid mode

    You can control the structure where you can open/close images in the grid forum list.

    Close sidebar

    You can get rid of the crowded view in the forum by closing the sidebar.

    Fixed sidebar

    You can make it more useful and easier to access by pinning the sidebar.

    Close radius

    You can use the radius at the corners of the blocks according to your taste by closing/opening it.

  • Choose the color combination that reflects your taste
    Background images
    Color gradient backgrounds
Back