Controlling spacing of lists
181 views
Skip to first unread message
AndrewMc
Mar 10, 2011, 8:17:51 PM3/10/11
to tiddl...@googlegroups.com
Hi All
I have created a new style to eliminate some of the space above and below unordered (bulleted) lists.
In [[StyleSheet]], I have added:
{{compactList{
*Item 1
*Item 2
*Item 3
}}}
However, somehow an extra line is placed after the list. For example, the vertical spacing between "Normal item 2" and "Paragraph after Normal List" is smaller than the vertical spacing "Compact item 2" and "Paragraph after Compact List":
*Normal item 1
*Normal item 2
}}}
Paragraph after Normal List
{{compactList{
*Compact item 1
*Compact item 2
}}}
Paragraph after Compact List
Does anyone have any suggestions or advice on how I can achieve the reduced vertical spacing before and after the bullet list?
Cheers
Andrew Mc
I have created a new style to eliminate some of the space above and below unordered (bulleted) lists.
In [[StyleSheet]], I have added:
.compactList ul {margin-top:0.2em; margin-bottom:0.2em }
I have used this in a tiddler as:{{compactList{
*Item 1
*Item 2
*Item 3
}}}
However, somehow an extra line is placed after the list. For example, the vertical spacing between "Normal item 2" and "Paragraph after Normal List" is smaller than the vertical spacing "Compact item 2" and "Paragraph after Compact List":
*Normal item 1
*Normal item 2
}}}
Paragraph after Normal List
{{compactList{
*Compact item 1
*Compact item 2
}}}
Paragraph after Compact List
Does anyone have any suggestions or advice on how I can achieve the reduced vertical spacing before and after the bullet list?
Cheers
Andrew Mc
colmjude
Mar 11, 2011, 3:10:41 AM3/11/11
to TiddlyWiki
> *Normal item 1
> *Normal item 2
> }}}
>
> Paragraph after Normal List
> {{compactList{
> *Compact item 1
> *Compact item 2
> }}}
>
> Paragraph after Compact List
>
*Normal item 1
*Normal item 2
Paragraph after Normal List
{{compactList{
*Compact item 1
*Compact item 2
}}}Paragraph after Compact List
This should remove the space between "Compact item 2" and "Paragraph
*Normal item 2
Paragraph after Normal List
{{compactList{
*Compact item 1
*Compact item 2
}}}Paragraph after Compact List
after Compact List".
If you have the }}} and "Paragraph after Compact List" on separate
lines the tiddlywiki wikifier inserts a <br> there, hence the gap.
Hope that helps,
Colm
AndrewMc
Mar 11, 2011, 4:39:13 AM3/11/11
to tiddl...@googlegroups.com
Thank you, Colm. That solves the problem in a simple way.
However, I have another related problem: instead of following the list with text in a new paragraph, I also have a case where I want to follow the list with a heading.
For example:
With a heading, it is not possible to use:
Does anyone have a suggestion I can try for this situation?
Cheers
Andrew Mc
However, I have another related problem: instead of following the list with text in a new paragraph, I also have a case where I want to follow the list with a heading.
For example:
{{compactList{
*Compact item 1
*Compact item 2
}}}
!!!Heading after Compact List*Compact item 1
*Compact item 2
}}}
With a heading, it is not possible to use:
{{compactList{
*Compact item 1
*Compact item 2
}}}
!!!Heading after Compact List*Compact item 1
*Compact item 2
Does anyone have a suggestion I can try for this situation?
Cheers
Andrew Mc
colmjude
Mar 11, 2011, 4:55:14 AM3/11/11
to TiddlyWiki
> With a heading, it is not possible to use:
> *Compact item 1
> *Compact item 2
> }}} !!!Heading after Compact List*
> *Compact item 2
>
> Does anyone have a suggestion I can try for this situation?
If you don't want any of the <br>s in tiddler to show you could
> Does anyone have a suggestion I can try for this situation?
include this in your stylesheet:
.viewer br { display: none; }
If you just don't want the <br> to show after the "compactList" then
you could try the following:
.compactList + br { display: none; }
Unfortunately the 2nd technique won't work in IE6 but hopefully you
aren't unlucky enough to have to ever use IE6.
Colm
AndrewMc
Mar 13, 2011, 6:10:11 PM3/13/11
to tiddl...@googlegroups.com
Thank you Colm.
I used your suggestion which worked perfectly in Firefox:
.compactList + br { display: none; }
Cheers
Andrew Mc
I used your suggestion which worked perfectly in Firefox:
.compactList + br { display: none; }
Andrew Mc
Craig in Calgary
Apr 11, 2011, 5:46:01 PM4/11/11
to TiddlyWiki
If anyone is interested, I take a different approach to eliminating
the unwanted whitespace between various rendered elements. I have a
transclusion tiddler, crlf, which contains: <html><hr style="margin:
-1.25em 0; width: 0;"></html>.
Anywhere I need to "pull up" the content to close a gap I place
<<tiddler crlf>> in the tiddler. Using AliasPlugin (http://
www.tiddlytools.com/#AliasPlugin) I could abbreviate that to <<crlf>>
or whatever.
For example:
* in my faq template tiddler it pulls the heading to the top of the
rendered tiddler:
/%
Description: Describe this faq
%/<<tiddler crlf>>
!Heading
* it reduces the extra white space NestedSlidersPlugin (http://
www.tiddlytools.com/#NestedSlidersPlugin) puts at the bottom of the
expanded content:
+++{{borderedslider{[Missing Content »]...
Content, content, content
<<tiddler crlf>>===
* on a line by itself following a table
* between any content and a heading
* between a paragraph and an ordered or unordered list
* etc.
I know it's a hack but it works well enough for my purposes.
I am open to suggestions for a better solution. Pure CSS would be
ideal but I would rather throw a <<tiddler crlf>> where I need it than
to remember to {{suck_it_up_princess{...}}} every time I need.
the unwanted whitespace between various rendered elements. I have a
transclusion tiddler, crlf, which contains: <html><hr style="margin:
-1.25em 0; width: 0;"></html>.
Anywhere I need to "pull up" the content to close a gap I place
<<tiddler crlf>> in the tiddler. Using AliasPlugin (http://
www.tiddlytools.com/#AliasPlugin) I could abbreviate that to <<crlf>>
or whatever.
For example:
* in my faq template tiddler it pulls the heading to the top of the
rendered tiddler:
/%
Description: Describe this faq
%/<<tiddler crlf>>
!Heading
* it reduces the extra white space NestedSlidersPlugin (http://
www.tiddlytools.com/#NestedSlidersPlugin) puts at the bottom of the
expanded content:
+++{{borderedslider{[Missing Content »]...
Content, content, content
<<tiddler crlf>>===
* on a line by itself following a table
* between any content and a heading
* between a paragraph and an ordered or unordered list
* etc.
I know it's a hack but it works well enough for my purposes.
I am open to suggestions for a better solution. Pure CSS would be
ideal but I would rather throw a <<tiddler crlf>> where I need it than
to remember to {{suck_it_up_princess{...}}} every time I need.
Reply all
Reply to author
Forward
0 new messages