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

Bug - CodeEditor - Default height is not 100% #11013

Open
rebeccaalpert opened this issue Sep 17, 2024 · 0 comments · May be fixed by #11014
Open

Bug - CodeEditor - Default height is not 100% #11013

rebeccaalpert opened this issue Sep 17, 2024 · 0 comments · May be fixed by #11014
Assignees
Milestone

Comments

@rebeccaalpert
Copy link
Member

Please describe the issue
PatternFly is using a third-party dependency for CodeEditor. This dependency states that by default, it will be 100% of the parent. Unfortunately, this is not what happens in PF React. The docs say the default is 100%. However, in PF React, you have to set a fixed height or rely on the height of the code.

You can see this issue if you go to https://patternfly-react-v6.surge.sh/components/code-editor and remove height="400px" from the first demo.

It appears the third-party dependency by itself still defaults to 100%: https://codesandbox.io/p/sandbox/competent-jepsen-gz9dzf?workspaceId=f5599198-6a68-44b3-85bd-1caed5609909. I had a go at trying to replicate this in PatternFly React and I was able to get it to work locally if I removed the default height: '' prop in React and set certain heights on parent divs with style={{}} attributes. I don't think PF React will let me merge anything with style={{}} attributes, so I made those changes here: patternfly/patternfly#7087.

The 90% height takes into account the header we place on top of the editor. If we use 100%, the CodeEditor always overflows the parent since the third-party Monaco Editor tries to take the full 100%. This way it is 100% of 90% of 100%. 🪦

We're trying to place the CodeEditor in a modal in virtual-assistant, and it would be a huge help if we could rely on getting a default height.

Are there visuals for this issue? Please provide screenshots
Screenshot 2024-09-17 at 2 03 00 PM

@rebeccaalpert rebeccaalpert self-assigned this Sep 17, 2024
@rebeccaalpert rebeccaalpert linked a pull request Sep 17, 2024 that will close this issue
@rebeccaalpert rebeccaalpert changed the title Bug - CodeEditor default height is not 100% Bug - CodeEditor - Default height is not 100% Sep 17, 2024
@tlabaj tlabaj added this to the Penta final release milestone Sep 18, 2024
@kmcfaul kmcfaul modified the milestones: Penta final release, 2024.Q3 Sep 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: In Progress
Development

Successfully merging a pull request may close this issue.

3 participants