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.

Sign up for GitHub

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

Jump to bottom

Problem to show file content when using more than one file and custom layout #384

Open
tinchox5 opened this issue Oct 22, 2023 · 2 comments
Open

Problem to show file content when using more than one file and custom layout #384

tinchox5 opened this issue Oct 22, 2023 · 2 comments

Comments

@tinchox5
Copy link

Hi there!
I'm using a custom layout based on this example https://github.com/google/playground-elements#custom-layouts.

Since I need to use more than one file I added playground-tab-bar component, which is rendered ok. The problem arise when I want to select another file: the new content is not rendered/updated into playground-file-editor.

Here is my code.

<playground-project id="project1"  >   
<script type="sample/html" filename="index.html">
<!doctype html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section  class="o-container one ">
<ul  class="o-orbit">
    <li class="o-orbiter"></li>
    <li class="o-orbiter"></li>
    <li class="o-orbiter"></li>
    <li class="o-orbiter"></li>
    <li class="o-orbiter"></li>
</ul>
</section>
</body>
</script>
<script type="sample/css" filename="styles.css">
.o-orbiter {
border: 7px solid mediumaquamarine;
}
.o-container {
border: 0.2px solid gray;
}
.one {
border: 2px solid;
padding: 20px; 
}
</script>
</playground-project>
<div class="example">
    <playground-tab-bar project="project1"></playground-tab-bar>
    <playground-file-editor  project="project1"></playground-file-editor>
    <playground-preview project="project1"> </playground-preview>
</div>

And css style:

.example {
  width: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  border-radius: 10px;
}
.example > playground-file-editor {
  height: 300px;
}
.example > playground-preview {
  height: max-content;
  border-top: 1px solid #ccc;
  --playground-preview-toolbar-background: #eaeaea;
}
@clukhei
Copy link

clukhei commented May 6, 2024

Hi @tinchox5 , I have the same issue as well, but looking at the source code for <playground-ide> , it seems like the docs missed out on documenting the editor attribute for <playground-tab-bar>

See source code

playground-elements/src/playground-ide.ts

Line 310 in 2712837

.editor=${editorId} 

<playground-tab-bar project="project1" editor="editor"></playground-tab-bar>
<playground-file-editor project="project1" filename="index.ts" id="editor"> </playground-file-editor>

it works well for me after i made that change

@tinchox5
Copy link
Author

tinchox5 commented May 6, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tinchox5 @clukhei