1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-08-06 22:04:19 +00:00

Add tc-table-wrapper class to fix overflow

This commit is contained in:
Leilei332 2024-10-02 12:52:45 +08:00
parent bb75560922
commit c98a7f4289
5 changed files with 80 additions and 58 deletions

View File

@ -1,5 +1,6 @@
title: $:/TagManager title: $:/TagManager
icon: $:/core/images/tag-button icon: $:/core/images/tag-button
class: tc-table-wrapper
color: #bbb color: #bbb
\define lingo-base() $:/language/TagManager/ \define lingo-base() $:/language/TagManager/

View File

@ -11,6 +11,7 @@ title: $:/editions/tw5.com/systemtag-template
The following tiddlers are tagged with <<tag $(thisTag)$ >> The following tiddlers are tagged with <<tag $(thisTag)$ >>
<div class="tc-table-wrapper">
<table> <table>
<tr><th></th><th>caption</th></tr> <tr><th></th><th>caption</th></tr>
<$list filter='[all[tiddlers+shadows]tag<thisTag>sort[]]'> <$list filter='[all[tiddlers+shadows]tag<thisTag>sort[]]'>
@ -18,4 +19,9 @@ The following tiddlers are tagged with <<tag $(thisTag)$ >>
<td><$link/></td> <td><$link/></td>
<td><$transclude field="caption"><$transclude field="description"><$view field="title"/></$transclude></$transclude></td> <td><$transclude field="caption"><$transclude field="description"><$view field="title"/></$transclude></$transclude></td>
</tr> </tr>
</$list></table></$list></$let></$list> </$list>
</table>
</div>
</$list>
</$let>
</$list>

View File

@ -18,3 +18,4 @@ type: text/vnd.tiddlywiki
|`tc-table-no-border` |Removes the borders of a table | |`tc-table-no-border` |Removes the borders of a table |
|`tc-first-col-min-width` |The first column of a table will take up minimal possible width. It adapts to the content | |`tc-first-col-min-width` |The first column of a table will take up minimal possible width. It adapts to the content |
|`tc-table-wrapper` |<<.from-version "5.3.6">> A class to be applied to a `div` element outside the table to prevent table from overflowing |

View File

@ -49,48 +49,50 @@ Select a tour:
currentTour={{{ [<stateCurrentTour>get[text]] :else[<defaultTour>] }}} currentTour={{{ [<stateCurrentTour>get[text]] :else[<defaultTour>] }}}
currentTourTag={{{ [<currentTour>get[tour-tag]] }}} currentTourTag={{{ [<currentTour>get[tour-tag]] }}}
> >
<table class="tc-tour-settings-tour-details"> <div class="tc-table-wrapper">
<tbody> <table class="tc-tour-settings-tour-details">
<tr> <tbody>
<th> <tr>
Tour title <th>
</th> Tour title
<td> </th>
<$link to=<<currentTour>>><$text text=<<currentTour>>/></$link> <td>
</td> <$link to=<<currentTour>>><$text text=<<currentTour>>/></$link>
</tr> </td>
<tr> </tr>
<th> <tr>
Tour description <th>
</th> Tour description
<td> </th>
<div class="tc-tour-settings-tour-details-description"> <td>
<$transclude $tiddler=<<currentTour>>> <div class="tc-tour-settings-tour-details-description">
(No description available) <$transclude $tiddler=<<currentTour>>>
</$transclude> (No description available)
</div> </$transclude>
</td> </div>
</tr> </td>
<tr> </tr>
<th> <tr>
Tour logo <th>
</th> Tour logo
<td> </th>
<div class="tc-tour-settings-tour-details-logo"> <td>
<$image source={{{ [<currentTour>get[logo]] }}}/> <div class="tc-tour-settings-tour-details-logo">
</div> <$image source={{{ [<currentTour>get[logo]] }}}/>
</td> </div>
</tr> </td>
<tr> </tr>
<th> <tr>
Tour step tag <th>
</th> Tour step tag
<td> </th>
<$transclude $variable="tag" tag=<<currentTourTag>>/> <td>
</td> <$transclude $variable="tag" tag=<<currentTourTag>>/>
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
<$list filter="[<currentTour>has[settings]]" variable="ignore"> <$list filter="[<currentTour>has[settings]]" variable="ignore">
<p> <p>
Custom tour settings: Custom tour settings:
@ -127,21 +129,23 @@ Select a tour:
</$button> </$button>
</div> </div>
<$reveal state=<<collapseState>> text="show" type="match" default="hide" animate="yes"> <$reveal state=<<collapseState>> text="show" type="match" default="hide" animate="yes">
<table class="tc-tour-settings-tour-step-details"> <div class="tc-table-wrapper">
<tbody> <table class="tc-tour-settings-tour-step-details">
<<display-tour-step-field-text "title" "Title">> <tbody>
<<display-tour-step-field-text "caption" "Caption">> <<display-tour-step-field-text "title" "Title">>
<<display-tour-step-field-text "step-success-filter" "step-success-filter">> <<display-tour-step-field-text "caption" "Caption">>
<<display-tour-step-field-text "step-success-filter-var" "step-success-filter Variable">> <<display-tour-step-field-text "step-success-filter" "step-success-filter">>
<<display-tour-step-field-text "display-mode" "Display Mode">> <<display-tour-step-field-text "step-success-filter-var" "step-success-filter Variable">>
<<display-tour-step-field-text "enter-actions" "Enter Actions">> <<display-tour-step-field-text "display-mode" "Display Mode">>
<<display-tour-step-field-text "hint-text" "Hint text">> <<display-tour-step-field-text "enter-actions" "Enter Actions">>
<<display-tour-step-field-text "hint-selector" "Hint selector">> <<display-tour-step-field-text "hint-text" "Hint text">>
<<display-tour-step-field-text "hint-selector-fallback-1" "Hint selector Fallback 1">> <<display-tour-step-field-text "hint-selector" "Hint selector">>
<<display-tour-step-field-text "hint-selector-fallback-2" "Hint selector Fallback 2">> <<display-tour-step-field-text "hint-selector-fallback-1" "Hint selector Fallback 1">>
<<display-tour-step-field-text "condition" "Condition">> <<display-tour-step-field-text "hint-selector-fallback-2" "Hint selector Fallback 2">>
</tbody> <<display-tour-step-field-text "condition" "Condition">>
</table> </tbody>
</table>
</div>
<div class="tc-tour-settings-tour-step-body"> <div class="tc-tour-settings-tour-step-body">
<$transclude $tiddler=<<currentStep>> $mode="block"/> <$transclude $tiddler=<<currentStep>> $mode="block"/>
</div> </div>

View File

@ -2807,6 +2807,16 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
width: 100%; width: 100%;
} }
/* A wrapper to fix table overflow */
.tc-table-wrapper {
overflow-x: auto;
}
.tc-table-wrapper .tc-popup {
overflow: visible;
}
/* /*
** Chooser ** Chooser
*/ */