Text overflowing inside "tc-drop-down"?

[Petri M.]

Hi,

I have made a quick popup macro which basically uses:

<div class="tc-drop-down">
<$transclude tiddler="tid" mode="block"/>
</div>

and if my tiddler "tid" happens to have a long paragraph, it just oveflows to the moon. Is there quick way of fixing this?

[Eric Shulman]

By default, `tc-drop-down` applies CSS `white-space:nowrap`.  In addition, for links it also applies `display:block; padding:0 14px 0 14px;`.

To override these default styles, you can define and apply your own CSS class (e.g., "my-drop-down"), like this:

1) Create a stylesheet tiddler, tagged with `$:/tags/Stylesheet`, containing:

.my-drop-down { white-space:normal; }

.my-drop-down a { display:inline; padding:0; }

2) Then, where you display your dropdown `<div>`, add `my-drop-down` to the class, like this:

<div class="tc-drop-down my-drop-down">

<$transclude tiddler="HelloThere" mode="block"/>

</div>

enjoy,

-e

[Petri M.]

Ah perfect!

Thank you!

-Petri