Height frozen in multiple filenames

[pedrosousa13]

Hi!

We're having an issue where the height is not dynamic on multiple filenames. It adds scrollbars to both x and y axis. Should it maybe expand automatically? Or we could have an option for that specific case.

Here's a video with the issue

https://user-images.githubusercontent.com/4235827/169536978-5a001a80-1213-4565-92e9-5b30acc70c67.mov

.

[pomber]

Yes, that's kind of intentional. Sometimes you don't want elements that expand vertically because it shifts all the elements below.

But I understand sometimes you do want the element to expand vertically. So I'm still looking for the right solution.

For now, one workaround could be to set a bigger height manually. In Code Hike v0.5.1 that would be <CH.Code style={{height: 300}}>. I know it's not ideal.

[berber1016]

I had a similar problem，Using <CH.Scrollycoding> and <CH.Code> causes the second file to be highly locked and unable to scroll， such as:

<CH.Scrollycoding>
// some text...
<CH.Code>
// the issue description in here,the first file line is 10,the second file line is 30
</CH.Code>
</CH.Scrollycoding>

[pomber]

@berber1016 can you provide an example (you can try the new playground: http://play.codehike.org/)? inside Scrollycoding the height should behave differently

[berber1016]

@pomber Yes, you can click this link view this problem.

when you activing first paragraph on the left,change active second file, you can not scrolling the second file.

[ndom91]

I'm having a similar issue, the <CH.Scrollycoding> component's height seems to not adjust correctly when more text is eventually shown.

Demo: https://next-auth-git-ndom91-upgrade-to-mdx-v2-nextauthjs.vercel.app/configuration/initialization Code: https://github.com/nextauthjs/next-auth/blob/95d9263954970c4d13e434bb86adbedcd566bc99/docs/docs/configuration/initialization.mdx

[pomber]

@berber1016 the reason the second file can't be scrolled is the focus=12:17, if you remove it you'll be able to scroll.

@ndom91 and @berber1016, the height of the code in the Scrollycoding component is the max between 200px and the height of the first step code. You can change that 200px with --ch-scrollycoding-code-min-height. See the CSS --ch-scrollycoding-code-min-height: 80vh; in this demo.

I'm still working on a smarter default height :)

[pomber]

BTW @ndom91, I'm using NextAuth.js for codehike.org, let me know if you have any issues or requests.

[ndom91]

BTW @ndom91, I'm using NextAuth.js for codehike.org, let me know if you have any issues or requests.

Thanks a lot, the css var for min height did the trick for that issue btw :tada:

We were thinking about adding it to the docs, really love the scrolly coding thing. But tbh we just don't have a great use-case for scrolly coding. We have very few (if any at all) docs pages which start with 1 file and then progressively add things, highlight, etc. that same 1 file.

However, in general I really like the highlighting, bg, notes, etc. of codehike as well. Maybe we'll use it for just those anyway!