I have an infobox in a template, where I'd like to add a table.
I added it, but could not obtain a good result.
An example of infobox is:
But I want the table in "composition" section to be as large as the rest of infobox.
Here the source code (I cut for the interesting parts):
{| style="float:right;border:1px solid gold"
! colspan="2" style="background:gold;width:200px;font-size:10pt" | {{#external_value:common_name}}
|-
| colspan="2" style="text-align:center;font-size:10pt" | [http://m.muninn.land/coins/{{#external_value:obverse_image}}]<br />
|-
| colspan="2" style="background:gold;text-align:center;font-size:9pt" | Description
|-
| style="font-size:9pt" | Currency: || style="font-size:9pt" | {{#external_value:currency_name}}
|-
Cut 8<
| style="font-size:9pt" | Form factor: || style="font-size:9pt" | {{#external_value:form_factor}}
|-
| colspan="2" style="background:gold;text-align:center;font-size:9pt" | Composition
|-
| colspan="2" style="font-size:9pt;text-align:left" | {{coin composition|id={{{id|2}}}}}
|}
Where the table in template "coin composition" is:
{| class="wikitable"
! Material:
! Percentage: {{#for_external_table:<nowiki/>
{{!}}-
{{!}} {{{composition}}}
{{!}} {{{percentage}}}
}}
|}
I tried to adjust column width:
https://www.mediawiki.org/wiki/Help:Tables#Column_width
but not with good results...
How can I enlarge the table in the infobox?
For example, a page of the site, in beta, is online at http://en.muninn.land/index.php/1000_lire_Capital_Rome_1970
for full source code.
Add style="width: 100%" to the table.
{| class="wikitable" style="width: 100%"
! Material:
! Percentage: {{#for_external_table:<nowiki/>
{{!}}-
{{!}} {{{composition}}}
{{!}} {{{percentage}}}
}}
|}
But a better solution would be to integrate composition into the main infobox (the template Coin details).
Rewrite the Coin composition template thus:
|-
| style="font-size:9pt" | Material: || style="font-size:9pt" | Percentage:
{{#get_db_data:
db=munin
|from=geo.v_coin_composition
|where=comp_coin_id={{{id|1}}}
|data=comp_coin_id=comp_coin_id,composition=composition,percentage=percentage
}}
{{#for_external_table:<nowiki/>
{{!}}-
{{!}} style="font-size:9pt" {{!}} {{{composition}}}
{{!}} style="font-size:9pt" {{!}} {{{percentage}}}
}}
|}
Invoke it from a new line and remove the preceding
|-
| colspan="2" style="font-size:9pt;text-align:left" |
Or simply replace its invocation with its new source code.
Related
I have table and I want to use show more/ show less text pos.report. currently when I click show more for one <td> it show more for all <td> in the table.
.Html
<tbody>
<tr *ngFor="let pos of procedureOrderList; let i = index">
<td>{{pos.investigationName}}</td>
<td>{{pos.investigationDate | date: 'dd-MM-yyyy'}}</td>
<td>{{pos.released_DT | date: 'dd-MM-yyyy'}}</td>
<td> <ng-container *ngIf="pos.report">
{{(show) ? pos.report : pos.report | slice:0:50}}
<a *ngIf="pos.report.length > 0;" (click)="show = !show" > ...{{ show ? '[Show less]': '[Show More]' }}</a>
</ng-container>
</td>
</tr>
</tbody>
.ts
show = false;
Working Demo in this Stackblitz Link
Basically you need to assign index i value to your show property and according to show and i value you can display show more or show less only for clicked td element only.
<table>
<tbody>
<tr *ngFor="let pos of procedureOrderList; let i = index">
<td>{{pos.investigationName}}</td>
<td>{{pos.investigationDate | date: 'dd-MM-yyyy'}}</td>
<td>{{pos.released_DT | date: 'dd-MM-yyyy'}}</td>
<td>
<ng-container *ngIf="pos.report">
{{(show) ? pos.report : pos.report | slice:0:50}}
<a *ngIf="pos.report.length > 0;" (click)="((show = i ))">
...{{ (( show === i)) ? '[Show less]': '[Show More]' }}</a>
</ng-container>
</td>
</tr>
</tbody>
</table>
As an alternative to GaurangDhorda's method, you could also extend the model you're using to include 'show' as a property.
So assuming that pos is of type Pos, defined something like this:
interface Pos {
investigationName: string;
investigationDate: date;
release_DT: date;
report: string;
}
... then what you can do is extend this interface (or class) and provide it with the 'show' property like this:
interface ShowablePos extends Pos {
show: boolean;
}
Then the trick is that when you get your Pos instances (for example, from an API), you use a map call to transform them into ShowablePos instances:
posApi.getProcedureOrderList()
.pipe(map( posList => {
// each pos is show=false by default
return posList.map(pos => ({ ...pos, show: false }))
}))
.subscribe(...)
Then the only change you need to make to your HTML is to refer to pos.show instead of a global show.
<td>{{pos.investigationName}}</td>
<td>{{pos.investigationDate | date: 'dd-MM-yyyy'}}</td>
<td>{{pos.released_DT | date: 'dd-MM-yyyy'}}</td>
<td>
<ng-container *ngIf="pos.report">
{{(pos.show) ? pos.report : pos.report | slice:0:50}}
<a *ngIf="pos.report.length > 0;" (click)="pos.show = !pos.show" > ...{{ pos.show ? '[Show less]': '[Show More]' }}</a>
</ng-container>
</td>
On my wiki I am trying to create a conditional table template.
Here is the template code:
{| class="wikitable"
{{#if:{{{bazikade1|}}}{{{bazikade2|}}}|
{{!}}-
! بازیکده
{{!}} {{{bazikade1}}}
{{!}} {{{bazikade2}}}
}}{{#if:{{{bazinovin1|}}}{{{bazinovin2|}}}|
{{!}}-
! بازی نوین
{{!}} {{{bazinovin1}}}
{{!}} {{{bazinovin2}}}
}}{{#if:{{{boardboard1|}}}{{{boardboard2|}}}|
{{!}}-
! بردبرد
{{!}} {{{boardboard1}}}
{{!}} {{{boardboard2}}}
}}{{#if:{{{boardgamecenter1|}}}{{{boardgamecenter2|}}}|
{{!}}-
! بوردگیم سنتر
{{!}} {{{boardgamecenter1}}}
{{!}} {{{boardgamecenter2}}}
}}{{#if:{{{boardgameclub1|}}}{{{boardgameclub2|}}}|
{{!}}-
! بوردگیم کلاب
{{!}} {{{boardgameclub1}}}
{{!}} {{{boardgameclub2}}}
}}{{#if:{{{doozshop1|}}}{{{doozshop2|}}}|
{{!}}-
! دوزشاپ
{{!}} {{{doozshop1}}}
{{!}} {{{doozshop2}}}
}}{{#if:{{{baziplanet1|}}}{{{baziplanet2|}}}|
{{!}}-
! سیاره بازی
{{!}} {{{baziplanet1}}}
{{!}} {{{baziplanet2}}}
}}{{#if:{{{synapsi1|}}}{{{synapsi2|}}}|
{{!}}-
! سیناپسی
{{!}} {{{synapsi1}}}
{{!}} {{{synapsi2}}}
}}{{#if:{{{fekrofun1|}}}{{{fekrofun2|}}}|
{{!}}-
! فکروفان
{{!}} {{{fekrofun1}}}
{{!}} {{{fekrofun2}}}
}}{{#if:{{{goldendice1|}}}{{{goldendice2|}}}|
{{!}}-
! گلدن دایس
{{!}} {{{goldendice1}}}
{{!}} {{{goldendice2}}}
}}{{#if:{{{gamestore1|}}}{{{gamestore2|}}}|
{{!}}-
! گیم استور
{{!}} {{{gamestore1}}}
{{!}} {{{gamestore2}}}
}}{{#if:{{{vestagame1|}}}{{{vestagame2|}}}|
{{!}}-
! وستاگیم
{{!}} {{{vestagame1}}}
{{!}} {{{vestagame2}}}
}}{{#if:{{{madamak1|}}}{{{madamak2|}}}|
{{!}}-
! مادمک
{{!}} {{{madamak1}}}
{{!}} {{{madamak2}}}
}}
|}
If I use both rows it looks good. As here:
But if I use one of them, it looks weired, as here:
How can I fix it? Isn't it because of unicode characters I am using within the code? I tried to debug it by shortening the code but no success yet.
Your template seems broken in a different way from your examples. The whole table will be displayed in one row because {{!}}- is not really on a new string and will not be recognised by the parser as new row command. This happens because all parser function (including {{if:}}) parametres are trimmed.
If you add <nowiki /> at the end of every line containing {{if:, you will correct this.
After doing this, in my wiki (left-to-right) the template worked as expected.
righ now my code in html looks like this and it dont print the things i wanna print
<tr ng-repeat="i in info | filter:search | orderBy: order">
<td >{{$index + 1}}</td>
<td>{{i.username}}</td>
<td>{{i.price}}{{i.edit_able}}</td>
<td>{{i.min_amount}}-{{i.max_amount}}</td>
<td>View</td>
</tr>
my angular code for edit able is
if(edit_able != false){
$scope.info[i].edit_able = [{html:'Edit price'}];
}else{
$scope.info[i].edit_able = '';
}
i wanna print out this in html and not as a html escape string
If you pass HTML this way it has to be added to view by ng-bind-html and before it has to be sanitised with $sce but your problem is trivial really, you can just use ngIf to display the a tag only when necessary
<tr ng-repeat="i in info | filter:search | orderBy: order">
<td >{{$index + 1}}</td>
<td>{{i.username}}</td>
<td>{{i.price}}<a ng-if="i.edit_able" href="#" ng-click="editorEnabled=!editorEnabled">Edit price</a></td>
<td>{{i.min_amount}}-{{i.max_amount}}</td>
<td>View</td>
</tr>
I'm using a display:table to view some report data on a jsp page. I want to use it to exploit the csv/excel export of display table tag. I need to add over the columns header with column name another header, that connect logically the column under it. This is an example:
+--------------------------------------------+
| File || Record |
+--------------------------------------------+
+-------------------------------------------------------+
| Sort id ||Col1 || col2 || ... || Coln||col1||coln |
+------------------------------------+------------------+
I tried to use a display:caption with the following code as first object into display table node:
<display:caption>
<tr class="header">
<th style="background: white" colspan="1"></th>
<th class="header" colspan="8">File</th>
<th class="header" colspan="1">Record</th>
</tr>
</display:caption>
It add the column, but under the column name thead :( :
+-------------------------------------------------------+
| Sort id |Col1 || col2 || ... | Coln||col1||coln |
+------------------------------------+------------------+
+--------------------------------------------+
| File || Record |
+--------------------------------------------+
Somebody know if is possible to inject into thead automatically generated by display table tag html code to insert a thead over, or insert in some other way a row over the columns row name header?
I find a solution. Adding in display caption the header that i want enclosed into thead node, it add over column display thead:
<display:caption>
**<thead>**
<tr class="header">
<th style="background: white" colspan="1"></th>
<th class="header" colspan="8">File</th>
<th class="header" colspan="1">Record</th>
</tr>
**</thead>**
</display:caption>
I do not love this solution, but it works!
<html>
<body>
<TABLE border="1" ">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2"> Average
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
<TH>height</TH><TH>weight</TH>
</TR>
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR>
<TD>1.7<TD>0.002<TD>43%</TD>
</TR>
</TABLE>
</body>
</html>
I'm getting the output with first element of header as blank
A test table with merged cells
/-----------------------------------------\
| | Average | Red |
| |-------------------| eyes |
| | height | weight | |
|-----------------------------------------|
| 1.9 | 0.003 | 40% | |
|-----------------------------------------|
| 1.7 | 0.002 | 43% | |
\-----------------------------------------/
Expected output
A test table with merged cells
/----------------------------- \
| Average | Red |
|-------------------| eyes |
| height | weight | |
|------------------------------|
| 1.9 | 0.003 | 40% |
|------------------------------|
| 1.7 | 0.002 | 43% |
\------------------------------/
Remove the extra TH in your code
http://jsfiddle.net/yqQsP/
<html>
<body>
<TABLE border="1" >
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
<TH>height</TH><TH>weight</TH>
</TR>
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR>
<TD>1.7<TD>0.002<TD>43%</TD>
</TR>
</TABLE>
</body>
</html>
While nauphal has already addressed your problem, I just wanted to make some suggestions regarding your HTML structure.
First, upper-case isn't mandatory (HTML's case-insensitive), though should you ever switch to XHTML lower-case is mandatory (and, frankly, looks a little nicer too).
Second, because a tbody element is always inserted by the browser (I'm not sure about all clients, but certainly visual web-clients) if there isn't one present already, it's usually best to wrap those elements that represent the 'body' of the table in a tbody yourself, that way you can assign the th element-rows to a thead, which increases semantics a little (I'm not sure how useful that is, but every little helps).
Third, remember to close your tags:
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
Should, really, be:
<TR>
<TD>1.9</TD><TD>0.003</TD><TD>40%</TD>
</TR>
Again, it's not mandatory (in HTML 4, I believe), but it reduces the scope for errors introduced by having extra, un-closed, start-tags around your mark-up.
Fourth, and this is just nit-picking, possibly, if you're wanting to style the whole of the caption as emphasized text it's easier to avoid inserting extra mark-up and just style the caption directly.
That said, here's my version of your table and some CSS:
<table>
<caption>A test table with merged cells</caption>
<theader>
<tr>
<th colspan="2">Average</th>
<th rowspan="2">Red Eyes</th>
</tr>
<tr>
<th>height</th>
<th>weight</th>
</tr>
</theader>
<tbody>
<tr>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</tbody>
</table>
CSS:
caption {
font-style: italic;
}
td,
th {
border: 1px solid #000;
padding: 0.2em;
}
JS Fiddle.
Change First Row
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
It will solve the problem