#174

@Echo: the stacking of a popover on a popover covers the 1st popover completely. I don’t see how to get back to the 1st popover.

With the code I use the 2nd popover is a bit below the 1st one so it’s easy to go back to the 1st one. The only thing is that even if I increase the height to e.g. 1000 px it does not change the popover size.
BTW, I am on 0.9.3 too.

.popover.hover-popover {
  position: absolute;
  z-index: var(--layer-popover);
  transform: scale(0.9); /* makes the content smaller */
  max-height: 800px;    /* was 300 */
  min-height: 100px;
  width: 500px; /* was 400 */
  overflow: hidden;      
  padding: 0;
  border-bottom: none;
}
#175

test this, you can change 16px to other

#176

I see no difference with this code and your previous one, even if I change the 16px.
With this one the 2nd popover still covers the 1st one.

#177

how does overflow works?

#178

It is to control scrolling
You can set it to overflow: auto; and it will also work.

If I set height: 100%; , without setting overflow: , the popover will not scroll. I don’t know why :joy:

I set height: 100%; because I don’t want to have two or three scroll bars inside when popover, if there are ![[somefile]] inside the (popover) file.

#179

Is there somewhere a custom.css that contains all default Obsidian css classes with values exactly as they are in default application look?

Introducing changes by using Ctrl+Shift+I doesn’t seem to be a good solution because it doesn’t save these changes. And css users solutions concerns often only selected elements of interface.

#180

You might want to look at sources -> app.css. I think, it contains all default Obsidian css classes with values.

image

4 Likes
#181

Amazing…

#182

yo @Wen! did you ever figure out the weird tag hash separation in editor?

#183

@hieu Unfortunately, no. In fact, I decided to give up achieving WYSIWYM in editing mode for now. The main reason is that there are some weird cursor selection alignment bug for me. For example, when I try to copy a tag by selecting it with the cursor, it often goes to another position as the text would expand when selected, which is quite annoying.

2 Likes
#184

@Wen: I have the same issue, and the 1st time I tried out WYSIWYG it put me off. But as I came across more code to improve the pseudo-WYSIWYG experience, I decided to try to overcome this issue.

I have now got to a stage where I can handle it and do some workaround. I realise that not everyone will be happy with that, which I can understand. I am not trying to sell the pseudo-WYSIWYG set-up, I have no skin in the game, so to speak. All I am saying is that if you like WYSIWYG and definitely do not like the default Edit mode UI and don’t want to wait till the real thing is implemented, it is worth spending a bit of time on your issue.

1 Like
#185

@Klaas To be honest, I like the idea of WYSIWYM in editing mode, but I failed to make it work as desired, e.g. easier text selection, as I lack the experience working with CSS. Do you mind explaining more regarding how you are trying to resolve the issue? It would be really great if some code snippets can be used to explain this. :smile:

#186

@Wen: I am not a CSS expert and I certainly don’t have CSS code to explain how I do it. What I have noticed is that if I click on a blockquote the size of the cursor is bigger, and you cannot move it to the end of the line. However, if you then e.g. click the backspace key, the cursor does start from the end of the line.

If you want to edit in the middle of a sentence in a blockquote, or in a sentence that has e.g. a pair of * around a part of the sentence, the trick is to temporarily remove those (or the > in the case of a blockquote), do your edit, then put the formatting back.

It sounds like a lot work, and at first it is, but when you get the hang of it, it is not so bad.

1 Like
#187

@Klaas That’s good to know. Thanks for the clarification.

#188

@Wen: I am sorry I cannot be more helpful, so if you are still lost or put off by these issues, I apologise.

#189

@Klaas That’s totally fine. :smile: Sometimes we need tricks like the one you mentioned until we have a perfect solution. Thanks again for sharing your experience here.

1 Like
#190

@Wen @Klaas I don’t know anything about CSS, so I don’t know what makes this work… I have a combination of @uzerper and yours, and it works in edit mode:

.tag:not(.token) {
  background-color: var(--nord3);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}

.tag:not(.token):hover {
  color: var(--nord8);
  background-color: var(--nord3);
}

.tag[href^="#important"] {
  background-color: var(--nord11);
}

/* div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-important:before {
  content: '#'; 
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f12a";
}*/

.cm-tag-important, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-important {
  background-color: var(--nord11);
  /* border: none; */
  color: white !important;
  /* text-align: center; */
  /* text-decoration: none !important; */
  /* display: inline-block; */
  /* margin: 0px 0px; */
  /* cursor: pointer; */
}

.cm-tag-important:hover {
  color: white;
  background-color: var(--text-accent-hover);
}

I have NO idea what is needed and what isn’t, but it seems to work (this is edit mode):

image

4 Likes
Minimal Theme
#191

thank you for this! I did remove the WYSIWYG css bc of the cursor alignment issue

I’ll try your backspace trick – I think that was the only thing turning me off :fire:

in a way, I’m glad this bug exists bc I know a lot more about css now from fiddling in attempts to fix than I did before.

#192

@hieu: and maybe with @argentum’s code it works for the tags.

1 Like
#193

@argentum: many thanks.

1 Like