-
-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tailwind or theme cursor issue? #62
Comments
Hello, you need to specify your font and line height, as stated in the Getting Stated example, otherwise they might not match(as in your case). Just need to add the following: <style>
/* Or in global stylesheet */
/* Set your custom monospace font */
:global(.carta-font-code) {
font-family: '...', monospace;
font-size: 1.1rem;
}
</style> The Tailwind Typography and other themes do not affect the editor styles: they are stylesheets for the final rendered HTML. |
Thanks for the reply! I should have pasted in my whole code. I did have this in there. now I'm playing with it more and seeing that if I tweak it I can get it closer.
But this is still off. How can I find the exact values to make this match up? I've been inspecting the textarea element. or do I just need to define them all in this css class maybe? I'm use the flowbite svelte components. And it in a modal. Wondering if that is causing issues. |
Usually setting the properties of |
I had this exact same issue. In my case it was due to this piece of CSS coming from styles.css which I was importing in my top level +layout.svelte pre {
padding: 0.5em;
} As soon as I removed that from styles.css the cursor lined up properly. This CSS is included in the official Sveltekit demo app so maybe also why you had it. |
I'm noticing that in the
MarkdownEditor
the text cursor is not centered where I'm typing. It's actually way off. I start typing where there cursor is but the text is showing up on a different line.The cursor is where the yellow is. but the text is coming out where the red is. The further I go down in the editor to larger the offset between the cursor and text.
I thought this was a tailwind issue cause the MD wasn't showing up in the preview window correctly.
I've tried using Tailwind Typography like the docs mention. But looks like the only way to use that is to wrap the the MarkdownEditor in a div like this.
<article class="prose lg:prose-xl"><MarkdownEditor mode="tabs" {carta} bind:value /></article>
This formats the MD correctly but the text cursor in the editor is still not correct.
The text was updated successfully, but these errors were encountered: