I am the admin of a wiki an currently working on an infobox template. It is made up of a simple table with some variables. Nothing special.
The problem is, that I would like to have an if statment so that only the table rows ar visible where the variable has a value. I have looked in to existing templates on other wikis but can't figure out how to adapt the code.
The following is the code for my template:
{|class="wikitable" style="float:right; margin-left: 10px; border: #94bf88 thin solid;"
|+
! colspan="2" style="background-color: #d9ffda; font-weight: bold; font-size: 20px; color: black; border: none;" |Artikelinformationen
|-
| colspan="2" style="border: none" |{{{artikelthumbnail}}}
|-
|-
| colspan="2" style= "text-align: center; border: none; font-size: 15px;"|'''Basisdaten'''
|-
|style="border: none"|'''Artikeltitel:'''
| style="width:200px; border: none;" |{{{artikeltitel}}}
|-
|style="border: none"|'''Veröffentlichung:'''
| style="width:200px; border: none;" |{{{veröffentlichungsdatum}}}
|-
|style="border: none"|'''Herausgeber:'''
| style="width:200px; border: none;" |{{{herausgeber}}}
|-
|style="border: none"|'''Art:'''
| style="width:200px; border: none;" |{{{herausgeberart}}}
|-
|style="border: none"|'''Mediengruppe:'''
| style="width:200px; border: none;" |{{{mediengruppe}}}
|-
|style="border: none"|'''Autoren:'''
| style="width:200px; border: none;" |{{{autoren}}}
|-
| colspan="2" style= " text-align: center; border: none; font-size: 15px;"|'''Details'''
|-
|style="border: none"|'''Absätze:'''
| style="width:200px; border: none;" |{{{absätze}}}
|-
|style="border: none"|'''Sätze:'''
| style="width:200px; border: none;" |{{{sätze}}}
|-
|style="border: none"|'''Wörter:'''
| style="width:200px; border: none;" |{{{wörter}}}
|-
|style="border: none"|'''Zeichen:'''
| style="width:200px; border: none;" |{{{zeichen}}}
|-
| colspan="2" style= " text-align: center; border: none; font-size: 15px;"|'''Links'''
|-
|style="border: none"|'''Herausgeber:'''
| style="width:200px; border: none;" |{{{link_heruasgeber}}}
|-
|style="border: none"|'''Artikel in PDF:'''
| style="width:200px; border: none;" |{{{link_pdf}}}
|-
|style="border: none"|'''Artikel im Archiv:'''
| style="width:200px; border: none;" |{{{link_archiv}}}
|}
So for expample: if the variable {{{artikeltitel}}} is empty, both
|style="border: none"|'''Artikeltitel:'''
| style="width:200px; border: none;" |{{{artikeltitel}}}
|-
are not visable.
Only if {{{artikeltitel}}} is given a value, the line shows up when importing the Template into an article.
Thanks in advance.
You need to put the if statement on the preceding row.
Try this
{|class="wikitable" style="float:right; margin-left: 10px; border: #94bf88 thin solid;"
|+
! colspan="2" style="background-color: #d9ffda; font-weight: bold; font-size: 20px; color: black; border: none;" |Artikelinformationen
|-
| colspan="2" style="border: none" |{{{artikelthumbnail}}}
|-
|-
| colspan="2" style= "text-align: center; border: none; font-size: 15px;"|'''Basisdaten''' {{#if: {{{artikeltitel}}}|
|-
|style="border: none"|'''Artikeltitel:'''
| style="width:200px; border: none;" |{{{artikeltitel}}} }}
|-
|style="border: none"|'''Veröffentlichung:'''
| style="width:200px; border: none;" |{{{veröffentlichungsdatum}}}
|-
|style="border: none"|'''Herausgeber:'''
| style="width:200px; border: none;" |{{{herausgeber}}}
|-
|style="border: none"|'''Art:'''
| style="width:200px; border: none;" |{{{herausgeberart}}}
|-
|style="border: none"|'''Mediengruppe:'''
| style="width:200px; border: none;" |{{{mediengruppe}}}
|-
|style="border: none"|'''Autoren:'''
| style="width:200px; border: none;" |{{{autoren}}}
|-
| colspan="2" style= " text-align: center; border: none; font-size: 15px;"|'''Details'''
|-
|style="border: none"|'''Absätze:'''
| style="width:200px; border: none;" |{{{absätze}}}
|-
|style="border: none"|'''Sätze:'''
| style="width:200px; border: none;" |{{{sätze}}}
|-
|style="border: none"|'''Wörter:'''
| style="width:200px; border: none;" |{{{wörter}}}
|-
|style="border: none"|'''Zeichen:'''
| style="width:200px; border: none;" |{{{zeichen}}}
|-
| colspan="2" style= " text-align: center; border: none; font-size: 15px;"|'''Links'''
|-
|style="border: none"|'''Herausgeber:'''
| style="width:200px; border: none;" |{{{link_heruasgeber}}}
|-
|style="border: none"|'''Artikel in PDF:'''
| style="width:200px; border: none;" |{{{link_pdf}}}
|-
|style="border: none"|'''Artikel im Archiv:'''
| style="width:200px; border: none;" |{{{link_archiv}}}
|}
isolated example:
| colspan="2" style= "text-align: center; border: none; font-size: 15px;"|'''Basisdaten''' {{#if: {{{artikeltitel}}}|
|-
|style="border: none"|'''Artikeltitel:'''
| style="width:200px; border: none;" |{{{artikeltitel}}} }}
Using conditionals in Wikitext in conjunction with table markup is tricky, for two reasons:
The character | has a syntactical meaning in parser functions (as well as on template calls), interferring with the syntactical meaning of the same character in the Wikitext table markup. For this issue, one workaround is to replace occourances of | that are part of the table markup with the magic word {{!}}.
Parser functions strip out leading and trailing spaces of their output, including linebreaks, while the table markup relies on linebreaks. For this issue, one workaround is to insert a self-closing <nowiki /> tag at the beginning of the function's output, which has no visible effect by itself but makes the linebreak after it to not be ignored.
Here is the code, shortened to only include a few rows of the table. The basis of the code is from #Robis Koopmans's answer, just fixed to address the aformentioned issues and other little issues.
{|class="wikitable" style="float:right; margin-left: 10px; border: #94bf88 thin solid;"
|+
! colspan="2" style="background-color: #d9ffda; font-weight: bold; font-size: 20px; color: black; border: none;" |Artikelinformationen {{
#if: {{{artikelthumbnail|}}}|<nowiki />
{{!}}-
{{!}} colspan="2" style="border: none" {{!}} {{{artikelthumbnail}}}
}}
|-
|-
| colspan="2" style= "text-align: center; border: none; font-size: 15px;"|'''Basisdaten''' {{
#if: {{{artikeltitel|}}}|<nowiki />
{{!}}-
{{!}} style="border: none" {{!}} '''Artikeltitel:'''
{{!}} style="width:200px; border: none;" {{!}} {{{artikeltitel}}} }}{{
#if: {{{veröffentlichungsdatum|}}}|<nowiki />
{{!}}-
{{!}} style="border: none" {{!}} '''Veröffentlichung:'''
{{!}} style="width:200px; border: none;" {{!}} {{{veröffentlichungsdatum}}}
}}
|}
Related
I have a XSL sheet embedded with HTML tags, from which I generate a PDF using Java. I'm able to generate the PDF using this XSL stylesheet.
In my XSL i have a model like :
Page 1:
Header
Table
row 1
row 2
row 3
row 4
row 5
Footer
Page 2:
Header
Table
row 6
row 7
row 8
row 9
row 10
Footer
Page 3:
Header
Table
row 11
row 12
row 13
Footer
I should have show table rows 5 per page with Header and Footer. The problem is, I have to show the footer as a static content irrespective of the number of rows in the table.
for example: if the table contains 5 rows or 4 or 3 or 2 or 1, the footer should be at the bottom of the page. Instead, it is displaying dynamically under the table, as the table size changes.
Please find my XSL Stylesheet code below :
<xsl:copy-of select="$Header"/>
<xsl:copy-of select="$OrderRowsHeader"/>
<xsl:for-each select="orders">
<table style=" width: 100%; height: 13mm;">
<tr style="font-size: 10px; border: 0">
<td width="14mm" style="text-align: right; vertical-align: top;"><xsl:value-of select="number" /></td>
<td width="36mm" style=" text-align: left; vertical-align: top;"><xsl:value-of select="code" /></td>
<td width="47mm" style=" text-align: left; vertical-align: top;" ><xsl:value-of select="description" /></td>
<td width="12mm" style=" text-align: left; vertical-align: top;"><xsl:value-of select="units" /></td>
<td width="16mm" style=" text-align: right; vertical-align: top;"><xsl:value-of select="quantity" /></td>
</tr>
</table>
<xsl:if test="(position() mod 5) = 0 and ( position() != last() )">
<xsl:copy-of select="$ReportFooter" />
<div style="page-break-before: always" />
<xsl:copy-of select="$Header"/>
<xsl:copy-of select="$OrderRowsHeader"/>
</xsl:if>
</xsl:for-each>
<xsl:copy-of select="$ReportFooter" />
<xsl:variable name="ReportFooter">
<table style="border: solid thin #c0c0c0; border-collapse: collapse; width: 100%; ">
<tr style="border: solid thin #c0c0c0; border-collapse: collapse;">
<td width="150mm" style="border: solid thin #c0c0c0; border-collapse: collapse; font-size: 8px;">
</td>
Some Text here......
</tr>
</table>
</xsl:variable>
<xsl:variable name="OrderRowsHeader">
<table style="border: solid thin #c0c0c0; border-collapse: collapse; width: 100%;">
<tr style="border: solid thin #c0c0c0; font-size: 9px; border-collapse: collapse;">
<th width="18mm" style="border: solid thin #c0c0c0; border-collapse: collapse;">Line</th>
<th width="45mm" style="border: solid thin #c0c0c0; border-collapse: collapse;">Product code</th>
<th width="63mm" style="border: solid thin #c0c0c0; border-collapse: collapse;">Description</th>
<th width="18mm" style="border: solid thin #c0c0c0; border-collapse: collapse;">Units</th>
<th width="16mm" style="border: solid thin #c0c0c0; border-collapse: collapse;">Qty</th>
</tr>
</table>
</xsl:variable>
Sounds like you are running into a styling issue. Your solution is found in CSS. I won't address any of your code besides what is relevant to the footer.
<xsl:variable name="ReportFooter">
<table style="position: absolute; bottom: 0; border: solid thin #c0c0c0; border-collapse: collapse; width: 100%; ">
<tr style="border: solid thin #c0c0c0; border-collapse: collapse;">
<td width="150mm" style="border: solid thin #c0c0c0; border-collapse: collapse; font-size: 8px;">
</td>
Some Text here......
</tr>
</table>
</xsl:variable>
The properties I've added to add to the table are: position: absolute; bottom: 0;
position: absolute will have the table ignore the flow of the page (meaning it does not flow relative to other elements), and bottom is a measurement of how far it is from the bottom of the page, so bottom: 0 will put it at the bottom of the parent container.
I have to design a template for microsoft outlook email which requires me to place a dynamic image and text from server on an existing static background image. I tried designing it using div's as well as table and also gave inline css and (!important) for the html. I could not find support for tags such as margins, float,positions and my layout always breaks. I found that outlook email does not support those css attributes. Please suggest me a way to design the template without layout breaks.
this is how my template should look.
http://templates.mailchimp.com/resources/email-client-css-support/
Above link
I tried it in two different ways for aligning them:
using div:
<div align="left"><img style="padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="staticimage.png " alt=" ">
<h4 style=" font-family: serif; color: rgb(255, 252, 252);">#Some Text#</h4></div>
<h3 style="font-family: -webkit-body !important;font-style: italic;color: #147C6C; margin-top:-55px">Text</h3>
<img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;
width: 731px;height: 500px; margin-top:-150px;margin-left:25px" src="dynamicimage.png">
using table:
<tr>
<td>
<img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;width: 731px;height: 500px;" src="staticimage.jpg">
</td>
<td align="center">
<span style="margin-left: -1458px;">
<img style=" padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="dynamicimage.png " alt=" ">
<span><h4 style=" font-family: serif; color: rgb(255, 252, 252);margin:0px 0px 0px 0px; ">#some text#</h4></span>
</span>
</td>
<td align="center">
<span style="margin-left: -1253px;">
<img style="width: 350px;height: 225px;margin-top: 44px; " src="dynamictext.png " alt=" ">
</span>
</td>
<td>
<h2 style="margin: -5px 0px -55px -877px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">
<strong>Some text</strong>
</h2>
<h3 style="margin:54px 0px -5px -864px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">Employee name</h3>
</td>
</tr>
Tables usually work with outlook emails but if they are not, if you're trying to get 40px margin, for instance, add a 40px transparent image on the location.
I am trying to get the below tags to be centered however they keep appearing on the left. This is for an email template hence the inline styles.
<tr align="center" style="display:inline-block;">
<td style="font-size: 18px; font-weight:bold; border-right: dotted 1px #9B989E; padding:5px;">*|SECTION|*</td>
<td style="font-size: 18px; font-weight:bold; border-right: dotted 1px #9B989E; padding:5px;"> *|ROW|*</td>
<td style="font-size: 18px; font-weight:bold; padding:5px;">*|SEAT|*</td>
</tr>
I'm having an Angular Js like this
function Ctrl($scope) {
$scope.gardens = [
{garden:'1', trees: ["a", "b", "c", "d"]},
{garden:'2', trees: ["e", "f", "g", "h"]},
{garden:'3', trees: ["i", "k", "l", "m"]}
];
}
Now I want to display it in an html table as follow:
|Garden|Tree|
|1 |
| |a |
| |b |
| |c |
...
|2 |
| |e |
| |f |
| |g |
I can do this manually with DOM but have no solution with AngularJS.
(What I tried on html code:
<table ng-app="" ng-controller="Ctrl">
<tr ng-repeat="garden in gardens">
<td>{{garden.garden}}</td>
</tr>
</table>
)
Please help!
Johnny
You can do like this:
http://jsfiddle.net/ffVeu/
This is a base, just use it to produce a prettier HTML ;)
HTML
<div ng-app>
<table ng-controller="Ctrl">
<tr>
<th>Garden</th>
<th>Tree</th>
</tr>
<tr ng-repeat="garden in gardens">
<td class="firstColumn">{{garden.garden}}</td>
<td>
<table>
<tr ng-repeat="tree in garden.trees"><td>
{{tree}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
CSS (ugly, just to show the result, do not use this...)
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet"
href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js">
</script>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
.firstColumn{
vertical-align: top;
}
table, tr, td {
padding: 2px;
margin: 20px;
text-align: center;
}
th {
background-color: silver;
color: white;
font-weight: bold;
padding: 10px;
}
tr{
border: 1px solid silver;
}
tr tr{
border: none;
}
I am creating a dynamic table generator, and during testing, I found that the following generated HTML gives an unexpected layout in all browsers (Firefox, Chrome, IE)
<table>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
I am expecting a 2x3 table, with top corner merged with the left cell in middle row, and and the middle row right cell merged with the bottom right cell but instead i ended up with a 2X2 grid
side note, even if I provided a height on the css or the row/cell attribute; doesn't change layout of the resulting table.
p/s i don't intend to use this for layouts; i just will like to idiot proof my codes from unintended effects from weird layouts such as this
Edit:
Expected:
|------|-------|
| | |
| | |
| |-------|
| | |
| | |
|------| |
| | |
| | |
|------|-------|
Result:
|------|-------|
| | |
| | |
|------|-------|
| | |
| | |
|------|-------|
Edit 2:
added CSS
table {
border: 2px solid #000000;
padding: 10px;
}
td {
border: 2px solid #FF0000;
height: 100px;
width: 100px;
padding: 10px;
}
tr {
border: 2px solid #00FF00;
padding: 10px
}
I also tried:
<table>
<tr>
<td rowspan="2" style="border: 1px solid #FF0000; height:200px"></td>
<td style="border: 1px solid #FF0000; height:100px"></td>
</tr>
<tr>
<td rowspan="2" style="border: 1px solid #FF0000; height:200px"></td>
</tr>
<tr>
<td style="border: 1px solid #FF0000; height:100px"></td>
</tr>
</table>