Test page: Difference between revisions

From Rejoice in the Catholic Faith
Line 55: Line 55:


=== this one works ===  
=== 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="display: flex; flex-wrap: wrap;">
     <div style="flex: 1; max-width: 15%; padding: 1em;">
     <div style="flex: 1; max-width: 15%; padding: 1em;">
         * 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.
         * Lorem ipsum dolor sit amet
     </div>
     </div>
     <div style="flex: 1; min-width: 20em;  max-width: 15%;padding: 1em;">
     <div style="flex: 1; min-width: 20em;  max-width: 15%;padding: 1em;">
         * 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.
         * At elementum eu facilisis sed odio  
     </div>
     </div>
     <!-- Add more columns as needed -->
     <!-- Add more columns as needed -->
</div>
 
</pre>


=== uses template "Div col" ====
=== uses template "Div col" ====

Revision as of 16:25, 30 May 2024

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

Template: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.

Template:Div col end

Template:Div col

  • Blue item
  • Green item
  • Red item

Template:Div col end

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

Template: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.

Template:Div col end

table with different widths

  • seems that wrapping just happens according to the width of the column
Caption text
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Example Example Example Example Example Very long text in Col 6


Timeline mermaid graph