Skip to content
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

nbCode enhancement(nbCodeOutput overflow) #237

Open
Kiloneie opened this issue Mar 14, 2024 · 4 comments
Open

nbCode enhancement(nbCodeOutput overflow) #237

Kiloneie opened this issue Mar 14, 2024 · 4 comments

Comments

@Kiloneie
Copy link

Currently the nbCode NbBlock has no length limitations on it's output, meaning that if the output is very long, it will overflow trough the main body/content area. This can be easily spotted, but also not, e.g. it might look good for you on your desktop's browser, but it just might overflow on your mobile browser. This causes the mobile browser's page to be from scaled down to the phone's screen to fit perfectly, to have a huge empty space on the right that you won't see until you move any amount to the right.
This causes any custom positioning that isn't tied to the structure of the main body, to be completely broken on top of the fact that there is text all the way on the right outside of your view.

Now my solution was to override the nbBlock with the following partial:

nb.partials["nbCodeUnitTestColorized"] = """
{{>nbCodeSource}}
<pre><code class="language-markdown" style = "color:white;background-color: rgba(255, 255, 255, 0);font-size: 12px;">{{>nbCodeOutput}}</code></pre>

Now what this does is, instead of the output overflowing to the right, it will create a horizontal scroll bar just like the one you get if your code(nbCodeSource) overflows. In my opinion this is much nicer and prevents any overflows, which both break non tied to the main body elements like a button, and makes scrolling non centered.

For examples, check ANY of my nimib pages on My github page on a mobile browser.
The following link is an example that SHOULD work on a desktop browser with a monitor size of 24inches or smaller:
Desktop example of a scrollable nbCodeOutput

@HugoGranstrom
Copy link
Collaborator

Yes this is something we would want 👍

@Kiloneie
Copy link
Author

Do i need to make a pull request or will you guys do it ?

@HugoGranstrom
Copy link
Collaborator

If you want it done anytime soon, you'll have to make a PR yourself. Let's see how the preview on the PR looks and we can take it from there.

@pietroppeter
Copy link
Owner

while in Nimib Speaking Hours (recorded now) we found the place in the code where such a change should go:

.nb-output {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants