PopUp by appear is partly like transparent >how to fix?

#1

Hello dear community,

I created tasks, which are listed & transcluded with their fields in a table.
Among other things, the title & the tags are transcluded in separate cells.
When I click onto the cell with the tags, a popup, which I created with the appear-plugin, I can check /uncheck the tags.
Everything is fine with it. The only -bit funny- problem is, that this popup is partly like transparent. Not completely transparent, but the title is also visible “through” the popup.
Like you can see in the image. The title of the task is " Aufgabe 1 blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla" and some of the “blablabla” you can see in the tags-popup.

grafik
grafik895×297 28.7 KB

I have already been looking in the explore inspector, but could not find anything…
Can you please help with this…
You can try it here: https://meinetodos.tiddlyhost.com/#.Meine ToDos für heuteXS

Thanks you all :slight_smile:

(I know, the line-height in the tags-popup looks much too small, but in my original TW that is fine like it is).

#2

At the moment, your popup only has the class tc-popup-keep, which doesn’t specify a background color. You could try adding the class tc-drop-down if you’d like to match the styling used by other standard popups, or tc-popup appear if you’d like to match the popups used in your first column.

#3

Thanks for your answer, I tried it. But unfortunately, if in combination of the classes tc-popup-keep or tc-drop-down or tc-popup appear or only one of them, still the task-title is visible through the popup.

So sorry, still need help for this.

But I used now “normal” <br> for the line-breaks insted of the small ones, so it is easier to read everything.

#4

It looks like you actually have a stacking problem, not a transparency problem: your bolded titles are appearing above the popups. In your template ListItemTemplate.heuteXS, try changing the line

<div style="position:relative !important;;margin-top:-20px;margin-bottom:-20px;">

to

<div style="margin-top:-20px;margin-bottom:-20px;">
#5

Yes, that’s the solution, now the popup is completely above it /intransparent.
But, now I have another problem: The popup, which is shown by clicking on the title, is now far away … with position:relative it was very near to the title. Now: How to fix that?..

#6

Okay, I hope, I have found the solution :slight_smile: .
Putting position: relative;z-index:10; in the “style”-part of the popup.
It seems to solve the problem- I will see, if it does it in all cases and without causing other problems… :wink: