Fix scrollbar issue in anki-editable component in two ways #1038
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- using :host-context(.nightMode) allows for applying the nightmode scroll bar inside the component - apply max-width: 100% to all element within editable, not just images
|
Thanks Henrik! It looks like Safari does not support host-context, so this code won't have any effect if it gets used in AnkiMobile in the future: https://caniuse.com/?search=host-context. That might not be a problem in this case, as the default scrollbar colours automatically follow the system theme on iOS. But something to bear in mind if you were planning to use host-context for other uses in the future. |
|
It also seems like |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This addresses what you mentioned here
Using
:host-context(.nightMode)allows for applying the night modescroll bar inside the component.
:host-contextseems to be particular suited for these theming issues, even the examples on Mozilla mention it. For this I moved the scrollbar CSS to its own file.Apply
max-width: 100%to all element within editable, not just images. You can still set a div tomax-width: 20000px; width: 20000px;, in which case it will be bigger than the field, but the scrollbar will then be in night mode.I've done some tests with tables, and it works very well. The table will be bigger than the field, only if necessary, and the scroll bars show up in the correct color.