HTML Styles in forms
Hi all I just wanted to share something I have found to be useful.
I will start with I am not new to Zoho Creator but never have posted.
I find the biggest shortcoming of Creator is its look and feel and the lack of control over it.
I have spent many years writing a creator application that I use to run my companies.
it is a project quoting / project deployment, tracking, and reporting application.
since each project can have many documents associated with it, Quotes, POs, audits, inventory, change orders etc.. I have spent a ton of time writing HTML files that get printed from for-loops inside for-loops that are even sometimes inside for-loops lol. Every time I create an HTML I need to create a header with styles in Deluge it may looks something like this
- Style = "<STYLE TYPE='text/css'>.pagebreak {page-break-before: always}</STYLE>";
- Style += "<style> table {width: 100%;} table, tr { border-collapse: collapse; border: 1px solid #ddd; ;} th, td { text-align: left; padding: 12px; } th{background-color: #f2f2f2;} { background-color: #f2f2f2;}</style>";
- Style += "<style> .grid-container { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-gap: 10px; padding: 10px; width: 55vw}";
- Style += ".item1 { grid-column:1;}";
- Style += ".item2 { grid-column:4;}";
- Style += ".col4-row2 {grid-column: 4; grid-row:2}";
- Style += ".right {text-align: right; margin-right 16px;}";
- Style += "</style>";
- Style += "<style>h3 {font-size: 15px; text-align: right; padding: 16px; }";
- Style += " .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } ";
- Style += " .full-width { width: 100%; } ";
- Style += " h4 { font-size: 15px; text-decoration: overline; text-align: right; padding: 16px; } ";
- Style += " h6 { font-size: 17px; text-align: left;} ";
- Style += " h1 { font-size: 35px; text-align: left;} ";
- Style += "h5 { font-size: 15px; text-align: left; padding: 16px; } @media print {.pagebreak {clear: both; page-break-after: always;}}</style> ";
- Style += "<style> @media print {.pagebreak { page-break-before: always; } }</style>";
but I realized the other day that if I store it in a form I can recall it so I put it into a rich text box first but that double formatted the HTML on recall so I put it in a multiline field and it work flawlessly now the above code looks like this
- Style = styleSheets[name == "style"].styleSheet;
and in the form, I create a simple style sheet I actually created it in VSC because now whitespace does not matter now if I want to change my styles a bit I edit the one form, and the changes are made everywhere that I have called that style sheet ID. another cheat I put the same HTML in a rich text file and call it on templates for my prints and PDF's.
the multiline cell in the style sheet form now looks like this
<STYLE TYPE='text/css'>
.breakhere {
page-break-before: always
}
</STYLE>
<style>
table {
width: 100%;
}
table,
tr {
border-collapse: collapse;
border: 1px solid #ddd;
}
th,
td {
text-align: left;
padding: 12px;
}
th {
background-color: #f2f2f2;
}
/* {
background-color: #f2f2f2;
} */
.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-gap: 10px;
padding: 10px;
width: 55vw
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: 4;
}
.col4-row2 {
grid-column: 4;
grid-row: 2
}
.right {
text-align: right;
margin-right: 16px;
}
h3 {
font-size: 15px;
text-align: right;
padding: 16px;
}
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
h4 {
font-size: 15px;
text-decoration: overline;
text-align: right;
padding: 16px;
}
h6 {
font-size: 17px;
text-align: left;
}
h1 {
font-size: 35px;
text-align: left;
}
h5 {
font-size: 15px;
text-align: left;
padding: 16px;
}
@media print {
.pagebreak {
clear: both;
page-break-after: always;
}
}
</style>
.breakhere {
page-break-before: always
}
</STYLE>
<style>
table {
width: 100%;
}
table,
tr {
border-collapse: collapse;
border: 1px solid #ddd;
}
th,
td {
text-align: left;
padding: 12px;
}
th {
background-color: #f2f2f2;
}
/* {
background-color: #f2f2f2;
} */
.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-gap: 10px;
padding: 10px;
width: 55vw
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: 4;
}
.col4-row2 {
grid-column: 4;
grid-row: 2
}
.right {
text-align: right;
margin-right: 16px;
}
h3 {
font-size: 15px;
text-align: right;
padding: 16px;
}
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
h4 {
font-size: 15px;
text-decoration: overline;
text-align: right;
padding: 16px;
}
h6 {
font-size: 17px;
text-align: left;
}
h1 {
font-size: 35px;
text-align: left;
}
h5 {
font-size: 15px;
text-align: left;
padding: 16px;
}
@media print {
.pagebreak {
clear: both;
page-break-after: always;
}
}
</style>
I think I may try to shoehorn in the bootstrap css and see how that goes
I hope you get something out of this enjoy!