Is there a possibility to have a popup appear above an element?

#1

I have my tags positioned at the bottom of the tiddler.

For example:

.tc-tags-wrapper {
  position: absolute;
  bottom: 10px;
}

I would like to have the .tc-drop-down .tc-reveal .tc-popup to appear above the tags with the following CSS:

.tc-tags-wrapper .tc-drop-down.tc-reveal.tc-popup {
  max-height: calc(100% - 100px);
  overflow-y: auto;
}
#2

Try this:

.tc-tags-wrapper .tc-drop-down.tc-reveal.tc-popup {
  bottom: 1.75em !important; top:auto !important;
  overflow-y: auto;
}

Also, I assume you wanted max-height:calc(100% - 100px); to limit the height of the popup to fit within the height of the containing tiddler (the tc-tiddler-frame element).

However, this doesn’t work, since the 100% is relative to the direct parent of the popup which is .tc-tag-list-item and is nested several levels deep inside the tc-tiddler-frame.

The best you could probably do is to use a constant value, something like max-height:10em, which will ensure that the popup will be no taller than the height of the shortest possible tiddler (i.e., one with no text content and a standard tiddler title, subtitle, etc).

-e

1 Like
#3

Thanks. The height thing is really not an issue as I am using this CSS:

.tc-tiddler-frame {
  position: relative;
  height: 100%;
}
.tc-tiddler-body {
  position: absolute;
  top: 50px;
  right: 0px;
  bottom: 50px;
  left: 0px;
}