Test page: Difference between revisions
No edit summary |
|||
(18 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
Table w/ background color | === Preformatted <code><nowiki><pre></nowiki></code> right margin overflow === | ||
preformatted text shows find on regular view, but overflows to the right using Edge browser in Read Mode.<pre> | |||
Lorem ipsum odor amet, consectetuer adipiscing elit. Primis auctor ornare posuere dapibus ultrices montes velit eros turpis. Et faucibus sit semper porttitor leo primis scelerisque. Varius viverra natoque egestas viverra sem mollis nec. Platea eros suspendisse egestas quis sapien. Quisque sed tristique; maecenas dignissim luctus hac. Elit sodales commodo ad lorem posuere nostra. Lacus velit pretium quam rutrum arcu enim. Feugiat felis etiam pharetra; sagittis etiam habitant. Nulla nunc at duis netus parturient consectetur lacinia porta. | |||
</pre> | |||
== Table w/ background color == | |||
{| class="wikitable" | {| class="wikitable" | ||
!asdfd | !asdfd | ||
Line 38: | Line 43: | ||
| colspan="2" | | | colspan="2" | | ||
|} | |} | ||
== Responsive table == | |||
{{Div col|colwidth=30em}} | |||
* Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. | |||
* At elementum eu facilisis sed odio morbi. Quisque id diam vel quam elementum pulvinar etiam. Risus at ultrices mi tempus. Proin nibh nisl condimentum id venenatis. | |||
* Rhoncus urna neque viverra justo nec ultrices. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Erat imperdiet sed euismod nisi porta lorem. | |||
{{Div col end}} | |||
{{Div col|colwidth=20em}} | |||
* <span style="color: blue;">Blue item</span> | |||
* <span style="color: green;">Green item</span> | |||
* <span style="color: red;">Red item</span> | |||
{{Div col end}} | |||
=== this one works === | |||
<div style="display: flex; flex-wrap: wrap;"> | |||
<div style="flex: 1; max-width: 35%; padding: 1em;"> | |||
Lorem ipsum dolor sit amet | |||
</div> | |||
<div style="flex: 1; min-width: 20em; max-width: 35%;padding: 1em;"> | |||
At elementum eu facilisis sed odio | |||
</div> | |||
</div> | |||
<pre> | |||
<div style="display: flex; flex-wrap: wrap;"> | |||
<div style="flex: 1; max-width: 15%; padding: 1em;"> | |||
* Lorem ipsum dolor sit amet | |||
</div> | |||
<div style="flex: 1; min-width: 20em; max-width: 15%;padding: 1em;"> | |||
* At elementum eu facilisis sed odio | |||
</div> | |||
<!-- Add more columns as needed --> | |||
</pre> | |||
=== uses template "Div col" ==== | |||
* bloody mess bc needs a css file | |||
{{Div col}} | |||
* Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. | |||
* At elementum eu facilisis sed odio morbi. Quisque id diam vel quam elementum pulvinar etiam. Risus at ultrices mi tempus. Proin nibh nisl condimentum id venenatis. | |||
* Rhoncus urna neque viverra justo nec ultrices. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Erat imperdiet sed euismod nisi porta lorem. | |||
{{Div col end}} | |||
== table with different widths == | |||
* seems that wrapping just happens according to the width of the column | |||
{| cellspacing="0" cellpadding="5" border="1" | |||
|+ Caption text | |||
|- ! width="200" | <center>Col 0</center> | |||
! width="300" | <center>Col 1</center> | |||
! width="100" | <center>Col 2</center> | |||
! width="60" | <center>Col 3</center> | |||
! width="60" | <center>Col 4</center> | |||
! width="60" | <center>Col 5</center> | |||
! width="120" | <center>Col 6</center> | |||
|- | |||
| Example || Example || Example || Example || Example || Very long text in Col 6 | |||
|- | |||
|} | |||
== flex table using wikitable class (per bingbot) == | |||
to center table add <nowiki>style="margin:auto;</nowiki> | |||
{| class="wikitable" style="border-collapse: collapse; border: 1px solid #ccc;" | |||
|+ My Flexbox Table with Bold Header Row | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold;" | Header 1 | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold;" | Header 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 1, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 1, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 2, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 2, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 3, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 3, Column 2 | |||
|} | |||
<pre> | |||
{| class="wikitable" style="border-collapse: collapse; border: 1px solid #ccc;" | |||
|+ My Flexbox Table with Bold Header Row | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold;" | Header 1 | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold;" | Header 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 1, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 1, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 2, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 2, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 3, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px;" | Row 3, Column 2 | |||
|} | |||
</pre> | |||
=== responsive table w/ collapsing columns into 1 on mobile === | |||
{| class="wikitable" style="border-collapse: collapse; border: 1px solid #ccc; width: 100%;" | |||
|+ My Responsive Flexbox Table with Bold Header Row | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 1 | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 2 | |||
|} | |||
<pre> | |||
{| class="wikitable" style="border-collapse: collapse; border: 1px solid #ccc; width: 100%;" | |||
|+ My Responsive Flexbox Table with Bold Header Row | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 1 | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 2 | |||
|} | |||
</pre> | |||
== Timeline mermaid graph== | |||
{{#mermaid: graph | |||
Title: Historical Events | |||
section 1920-1929 | |||
One: 1929 | |||
}} | |||
{{#mermaid: | |||
gantt | |||
Title: Historical Events | |||
section 1920-1929 | |||
One: 1929 | |||
}} | |||
== Cargo Queries test == | |||
for | |||
* Template:Terms | |||
* Form:DataEntry | |||
* Template:DataEntryHandlre | |||
{{#cargo_query: | |||
table=Terms | |||
| field1, field2, field3 | |||
| limit=100 | |||
| format=table | |||
}} | |||
== mixed numbered and bulleted list == | |||
<ol><li>Name A</li> | |||
<ul><li>level 1<li> | |||
<li>level 2</li> | |||
</ul> | |||
<li>Name B.</li> | |||
<ul><li>level 1<li> | |||
<li>level 2</li> | |||
</ul> | |||
</ol> |
Latest revision as of 14:16, 27 September 2024
Preformatted <pre>
right margin overflow
preformatted text shows find on regular view, but overflows to the right using Edge browser in Read Mode.
Lorem ipsum odor amet, consectetuer adipiscing elit. Primis auctor ornare posuere dapibus ultrices montes velit eros turpis. Et faucibus sit semper porttitor leo primis scelerisque. Varius viverra natoque egestas viverra sem mollis nec. Platea eros suspendisse egestas quis sapien. Quisque sed tristique; maecenas dignissim luctus hac. Elit sodales commodo ad lorem posuere nostra. Lacus velit pretium quam rutrum arcu enim. Feugiat felis etiam pharetra; sagittis etiam habitant. Nulla nunc at duis netus parturient consectetur lacinia porta.
Table w/ background color
asdfd | asdfadsf | adfd | adfd |
---|---|---|---|
asdf | asdf | asdfd | |
asdf | |||
asdfasdf |
use page for testing articles, formats, templates, etc.
Table with single divided cell
subtable | or split the cells? | |
Responsive table
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus.
- At elementum eu facilisis sed odio morbi. Quisque id diam vel quam elementum pulvinar etiam. Risus at ultrices mi tempus. Proin nibh nisl condimentum id venenatis.
- Rhoncus urna neque viverra justo nec ultrices. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Erat imperdiet sed euismod nisi porta lorem.
- Blue item
- Green item
- Red item
this one works
Lorem ipsum dolor sit amet
At elementum eu facilisis sed odio
<div style="display: flex; flex-wrap: wrap;"> <div style="flex: 1; max-width: 15%; padding: 1em;"> * Lorem ipsum dolor sit amet </div> <div style="flex: 1; min-width: 20em; max-width: 15%;padding: 1em;"> * At elementum eu facilisis sed odio </div> <!-- Add more columns as needed -->
uses template "Div col" =
- bloody mess bc needs a css file
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus.
- At elementum eu facilisis sed odio morbi. Quisque id diam vel quam elementum pulvinar etiam. Risus at ultrices mi tempus. Proin nibh nisl condimentum id venenatis.
- Rhoncus urna neque viverra justo nec ultrices. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Erat imperdiet sed euismod nisi porta lorem.
table with different widths
- seems that wrapping just happens according to the width of the column
Example | Example | Example | Example | Example | Very long text in Col 6 |
flex table using wikitable class (per bingbot)
to center table add style="margin:auto;
Header 1 | Header 2 |
---|---|
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
Row 3, Column 1 | Row 3, Column 2 |
{| class="wikitable" style="border-collapse: collapse; border: 1px solid #ccc;" |+ My Flexbox Table with Bold Header Row ! style="border: 1px solid #ccc; padding: 10px; font-weight: bold;" | Header 1 ! style="border: 1px solid #ccc; padding: 10px; font-weight: bold;" | Header 2 |- | style="border: 1px solid #ccc; padding: 10px;" | Row 1, Column 1 | style="border: 1px solid #ccc; padding: 10px;" | Row 1, Column 2 |- | style="border: 1px solid #ccc; padding: 10px;" | Row 2, Column 1 | style="border: 1px solid #ccc; padding: 10px;" | Row 2, Column 2 |- | style="border: 1px solid #ccc; padding: 10px;" | Row 3, Column 1 | style="border: 1px solid #ccc; padding: 10px;" | Row 3, Column 2 |}
responsive table w/ collapsing columns into 1 on mobile
Header 1 | Header 2 |
---|---|
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
Row 3, Column 1 | Row 3, Column 2 |
{| class="wikitable" style="border-collapse: collapse; border: 1px solid #ccc; width: 100%;" |+ My Responsive Flexbox Table with Bold Header Row ! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 1 ! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 2 |- | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 1 | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 2 |- | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 1 | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 2 |- | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 1 | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 2 |}
Timeline mermaid graph
Cargo Queries test
for
- Template:Terms
- Form:DataEntry
- Template:DataEntryHandlre
No results
mixed numbered and bulleted list
- Name A
- level 1
- level 2
- Name B.
- level 1
- level 2