mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-09 11:29:58 +00:00
85 lines
2.2 KiB
Plaintext
85 lines
2.2 KiB
Plaintext
|
created: 20161209172820513
|
||
|
|
modified: 20161220162845058
|
||
|
|
tags: Learning
|
||
|
|
title: Formatting List Results as Tables with CSS - Variable Column Method
|
||
|
|
type: text/vnd.tiddlywiki
|
||
|
|
|
||
|
|
Sometimes you want the results of a ``<$list>`` widget to be formatted in the form of multiple columns, instead of just one straight listing. This method uses CSS to set up listing as columns. It is responsive, that is, re-positioning to display fewer columns if the window is too small.
|
||
|
|
|
||
|
|
You don't directly specify a fixed number of columns but instead specify the max-width for the list (which could be a transclusion of the tiddler width) and the width for each item. It lists from left to right, then wraps to a new row.
|
||
|
|
|
||
|
|
For other table-making techniques see also:
|
||
|
|
|
||
|
|
* [[Formatting List Results as Tables with CSS - Specified Columns Methods]]
|
||
|
|
* [[Formatting List Results as Tables (no CSS)]]
|
||
|
|
|
||
|
|
|
||
|
|
!! Example listing using 50 existing ~TiddlyWiki tags
|
||
|
|
|
||
|
|
```
|
||
|
|
<div class="dynamic-table">
|
||
|
|
<$list filter="[has[tags]tags[]sort[title]first[50]]">
|
||
|
|
<span class="item">
|
||
|
|
<$transclude tiddler="$:/core/ui/TagTemplate"/>
|
||
|
|
</span>
|
||
|
|
</$list>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
!! Example stylesheet to use with listing
|
||
|
|
|
||
|
|
```
|
||
|
|
<style>
|
||
|
|
.dynamic-table {
|
||
|
|
max-width:700px; /* could transclude tiddler width instead */
|
||
|
|
-ms-box-orient: vertical; /* might be unnecessary */
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -moz-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: -moz-flex;
|
||
|
|
display: -webkit-flex;
|
||
|
|
display: inline-flex;
|
||
|
|
-webkit-flex-wrap: wrap;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
max-width:160px; min-width:160px;
|
||
|
|
flex: 0 0 2em; /* -grow, -shrink, -basis */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
!! Results
|
||
|
|
|
||
|
|
<div class="dynamic-table">
|
||
|
|
<$list filter="[has[tags]tags[]sort[title]first[50]]">
|
||
|
|
<span class="item">
|
||
|
|
<$transclude tiddler="$:/core/ui/TagTemplate"/>
|
||
|
|
</span>
|
||
|
|
</$list>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.dynamic-table {
|
||
|
|
max-width:700px; /* could transclude tiddler width instead */
|
||
|
|
-ms-box-orient: vertical;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -moz-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: -moz-flex;
|
||
|
|
display: -webkit-flex;
|
||
|
|
display: inline-flex;
|
||
|
|
-webkit-flex-wrap: wrap;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
max-width:160px; min-width:160px;
|
||
|
|
flex: 0 0 2em; /* -grow, -shrink, -basis */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|