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

Resize with splitter works incorrect with tabpanel #10541

Open
chuckn0rris opened this issue Dec 26, 2024 · 0 comments
Open

Resize with splitter works incorrect with tabpanel #10541

chuckn0rris opened this issue Dec 26, 2024 · 0 comments
Labels
bug Something isn't working forum Issues from forum

Comments

@chuckn0rris
Copy link

chuckn0rris commented Dec 26, 2024 •
edited by matsbryntse
Loading

Forum post

To test this issue: https://codepen.io/matsbryntse-the-flexboxer/pen/OPLjpmb

goto https://codepen.io/pen and paste in the code below to their respective sections.

Drag the splitter and expand the right sidebar to the left until the center section begins to shrink, notice how the content wraps (This is desired).

Now edit the Javascript code so that the tabpanel is no longer hidden by setting hidden: false

Again drag the splitter and expand the right sidebar to the left, PROBLEM notice how the splitter stops moving and it stops at the width of the tabpanel's tabs.

If you continue to move it , see it's possible but hidden behind tabpanel.

Uploading Screen Recording 2024-12-26 at 18.19.17.mov…

DESIRED OUTCOME How do I enable the width to shrink past the tab panel tab's width and then show a scrollbar on the tabs?

<head>
  <meta charset="UTF-8" />
  <title>Bryntum Panel Scrolling</title>
  <!-- Bryntum theme (optional) -->
  <link rel="stylesheet" href="https://bryntum.com/products/gantt/build/gantt.material.css" data-bryntum-theme>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* No scrolling on html/body */
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      /* Entire page has no scrollbar */
  </style>
</head>

<body>

  <!-- Outer container filling the viewport -->
  <div class="flex flex-col w-full h-full">

<!-- Top Header: no scrolling here -->
<header class="bg-blue-500 text-white p-4 flex-none">
  <h1 class="text-2xl font-bold">My Application Header</h1>
  <p class="text-sm mt-1">Use this area for navigation or branding.</p>
</header>

<!-- Main Body: left sidebar + center content -->
<!-- 'min-h-0' here is crucial so that the centerContent can shrink and allow internal scrolling in the panel -->
<div class="flex-1 flex min-h-0">
  <!-- Left Sidebar -->
  <aside class="w-64 bg-gray-200 p-4 flex-none">
    <h2 class="text-lg font-semibold mb-2">Sidebar</h2>
    <p class="mb-2">Place links or additional info here.</p>
  </aside>

  <!-- Center Content: Also 'min-h-0' & 'overflow-hidden' so the Bryntum Panel can scroll within it -->
  <main id="centerContent" class="flex-1 min-h-0">
    <!-- Bryntum Panel will be appended here by the JS -->
  </main>
</div>
  </div>

</body>


import * as Module from "https://bryntum.com/products/gantt/build/gantt.module.js?481613";
Object.assign(window, Module);
// The code above imports module bundle and places all Bryntum classes on window to simplify coding at CodePen

const li = `Lorem ipsum odor amet, consectetuer adipiscing elit. Senectus aptent lacus ex senectus nascetur quisque quis laoreet. Nisi cursus etiam nisl cras dis eu ex eleifend urna. Molestie magnis ullamcorper sociosqu, ridiculus litora vestibulum. Vehicula mauris elit morbi mauris pellentesque nulla. Euismod nunc tincidunt vehicula hac imperdiet taciti interdum pulvinar tincidunt. Faucibus cubilia parturient inceptos nullam eleifend ridiculus aliquam facilisis. Pulvinar nascetur magna ultrices pretium laoreet. Leo consequat facilisis tincidunt vehicula leo luctus?

Nibh duis egestas pellentesque egestas sed. Ullamcorper tincidunt venenatis mi; laoreet auctor praesent. Augue adipiscing eget duis tempor ultricies nec; nibh primis ligula. Platea lectus aliquam morbi metus potenti fames. Leo rhoncus sed elit curae; hendrerit magna ornare adipiscing. Quis magna gravida tortor elementum magna nisl faucibus. Sollicitudin cubilia elementum laoreet imperdiet lacus orci eros odio. Curabitur lacus mattis ut tortor pharetra nisl ultricies iaculis adipiscing. Sodales ante semper nostra laoreet; vivamus ut. Interdum porttitor suscipit consectetur cras dui aliquam scelerisque neque.

Mattis pharetra fusce nullam condimentum rutrum egestas molestie blandit mollis. Conubia commodo molestie mus felis quis justo. Vehicula taciti primis eu, a imperdiet posuere quis et. Nascetur ultrices sollicitudin mollis euismod netus vivamus morbi auctor. Dis quis malesuada velit nisi scelerisque. Iaculis interdum aenean sapien eu habitant. Auctor arcu iaculis diam maximus aliquet elit.

Senectus habitant felis cras rutrum blandit. Mollis phasellus porta mi lacinia nullam dapibus commodo aptent. Platea malesuada erat vestibulum ridiculus sodales proin! Nam aptent himenaeos aliquet rutrum litora feugiat mi duis. Maximus viverra turpis pretium euismod bibendum nulla semper volutpat. Torquent quam vestibulum primis mollis scelerisque integer tempus varius. Blandit magnis mus nam morbi sem penatibus? Adipiscing per nibh in turpis cubilia dictum enim vulputate?

Suspendisse lacinia tristique curabitur nullam dictum aptent volutpat integer dapibus. Elementum eu justo inceptos diam sed parturient tempus dignissim. Fusce elit lectus id posuere nulla ultricies fames adipiscing. Euismod sodales molestie fringilla per sodales pretium quisque accumsan. Sem primis suscipit lorem tempor fames nec. Scelerisque nisl senectus congue porttitor et condimentum tempor.`;

new Panel({
  cls: "h-full border-2 border-dotted",
  ref: "page",
  appendTo: "centerContent",
  // scrollable: true,
  layout: {
    type: "hbox"
  },
  items: [
    {
      type: "container",
      ref: "left",
      flex: 1,
      weight: 1,
      splitter: true,
      layoutStyle: {
        justifyContent: "center",
        alignContent: "start"
      },
      scrollable: true,
      // layout: { type: "fit" },
      items: [
        {
          type: "container",
          ref: "leftcenter",
          cls: "border-2 border-dotted",
          flex: 1,
          minWidth: 0,
          maxWidth: 500,
          // html: li,
          // height: "100%",
          layout: {
            type: "vbox",
            align: "top",
            pack: "start"
          },
          items: [
            { hidden: true, type: "panel", weight: 1, title: "FOOBAR 0", html: li },
            {
              hidden: true,
              type: "tabpanel",
              ref: "tp",
              width: "100%",
              weight: 1,
              items: [
                { type: "panel", weight: 1, title: "Tab 1", html: li },
                { type: "panel", weight: 1, title: "Tab 2", html: li },
                { type: "panel", weight: 1, title: "Tab 3", html: li },
                { type: "panel", weight: 1, title: "Tab 4", html: li },
                { type: "panel", weight: 1, title: "Tab 5", html: li }
              ]
            },
            { type: "panel", weight: 1, title: "FOOBAR 1", html: li }
          ]
        }
      ]
    },
    { type: "splitter", weight: 2 },
    {
      ref: "right",
      width: 300,
      scrollable: true,
      html: li,
      splitter: true,
      weight: 3
    }
  ]
  // html: li,
});
@chuckn0rris chuckn0rris added bug Something isn't working forum Issues from forum labels Dec 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working forum Issues from forum
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@chuckn0rris