help with sticky dropdown box (CSS issue, apparently)

[Erwan]

Hi everyone,

I'm trying to obtain a dropdown box called from a button, as Eric explained here, but I want to display a customized TOC in the box with the regular CSS style.
I did a test wiki here to show the issue: http://stickydropdown.tiddlyspot.com/
Apparently there is something with the class tc-drop-down which messes with the class tc-table-of-contents, but my very limited skills with CSS proved unsuccessful to solve the problem.

Any suggestion?

Regards,
Erwan

[Tobias Beer]

Hi Erwan,

The problem is that you're using the class "tc-drop-down",

which sets the default dropdown styles for links.

Remove that and define your custom class / styles, e.g.:

<$button popup="$:/state/popup/something2">click</$button>
<$reveal type="popup" state="$:/state/popup/something2"
   class="my-pop tc-popup-keep">
      <div class="tc-table-of-contents">
          <<my-toc-selective-expandable $(currentTiddler)$>>
      </div>
</$reveal>

<style>
.my-pop {
background:white;
padding:0 15px;
border-radius: 3px;
border: 1px solid #ccc;
margin:5px 0 0 3px;
}
</style>

Best wishes,

— tb

1

[Erwan]

Hi Tobias,

Works perfectly, thanks!

So just to make sure I understand, the problem was because of this line:

.tc-drop-down a, .tc-drop-down button { display: block; padding: 0 14px 0 14px; width: 100%; text-align: left; color: #333333; line-height: 1.4; }

in the base theme, is that correct?

On 23/10/15 19:10, Tobias Beer wrote:

Hi Erwan,

The problem is that you're using the class "tc-drop-down",

which sets the default dropdown styles for links.

Remove that and define your custom class / styles.

E.g.:

<$button popup="$:/state/popup/something2">click</$button>
<$reveal type="popup" state="$:/state/popup/something2"
   class="my-pop tc-popup-keep">
      <div class="tc-table-of-contents">
          <<my-toc-selective-expandable $(currentTiddler)$>>
      </div>
</$reveal>

<style>
.my-pop {
background:white;
padding:0 15px;
border-radius: 3px;
border: 1px solid #ccc;
margin:5px 0 0 3px;
}
</style>

Best wishes,

— tb

1

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3adc251a-a35c-4514-9163-13816c2ca418%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tobias Beer]

Hi Erwan,

 

.tc-drop-down a, .tc-drop-down button { display: block; padding: 0 14px 0 14px; width: 100%; text-align: left; color: #333333; line-height: 1.4; }

in the base theme, is that correct?

Yep, it's the default style for a "dropdown" type popup being a list of links.

Best wishes,

— tb