Allow sizes in pixels

[cimpok]

Could you please add absolute sizes to panes? So we would be able to specify certain pane's initial widths not in percents of the parent but in absolute values, like px. And also disable resizing for certain panes would be welcome. Thanks.

[nmearl]

@antoniandre any thoughts on this?

[antoniandre]

Hi guys I am adding this in my to do list. It involves a big refactoring though.

[carlosyan1807]

nice to have it

[aendre]

I'm also looking for this feature! Thx @antoniandre in advance!

[rajithaeyee]

any progress on this?? Coz im also waiting for this feature

[Hextar]

I'm also looking forward for this feature!

[zzxxiinn]

I'm also looking forward for this feature! too!

[alectrocute]

Would be a game changer

[jloganolson]

+1

[jinrui-kooboo]

any thoughts on this?

[WhatzzUp]

+1

[zhangbaojia]

+1

[karukenert]

+1

[cihadturhan]

I guess it will never be live :(

[fulus06]

+10086

[Ldkwewde01]

+1

[enmotion]

try this ...

<div ref="SplitPanesRef" class="flex flex-col grow-1">
  <splitpanes :horizontal="false">
    <pane class="xcol" 
      :min-size="20" 
      :size="100 - propEditorWidthPercent" 
      :max-size="100 - propEditorWidthPercent">
      <div class="flex flex-col  grow-1 bg-gray-100"></div>
    </pane>
    <pane class="flex flex-col p-10 bg-white" 
      :min-size="propEditorWidthPercent" 
      :size="propEditorWidthPercent" 
      :max-size="80">
      <span class="h-40 rounded bg-gray-50"></span>
    </pane>
  </splitpanes>
</div>

// Vue3 Code
...
setup(props, context){
    const SplitPanesRef = ref(null as any);
    const SplitPanesRefResizeObserver = ref(null as ResizeObserver|null); // add Observer 
    const propEditorWidthPercent = ref(0);
    onMounted(()=>{
      console.log(route.params,'params');
      SplitPanesRefResizeObserver.value = new ResizeObserver(() => {
        propEditorWidthPercent.value = Math.min(Math.round( 360 / SplitPanesRef.value.clientWidth * 100), 50);
      })
      SplitPanesRefResizeObserver.value.observe(SplitPanesRef.value); // remove Observer
    });
    onBeforeUnmount(()=>{
      SplitPanesRefResizeObserver.value && SplitPanesRefResizeObserver.value.disconnect()
    })
    return {
    SplitPanesRef,
      propEditorWidthPercent,
    }
}

[mengdebiao]

First of all, thank you very much for this project, it has been very helpful to me today. However, I noticed this historical issue while using it and it seems to have been around for quite some time. I was wondering if the author still plans to add this feature?

[mengdebiao]

First of all, thank you very much for this project, it has been very helpful to me today. However, I noticed this historical issue while using it and it seems to have been around for quite some time. I was wondering if the author still plans to add this feature?

try this ...

<template>
  <Splitpanes ref="splitpanesRef" class="chat-container" :dbl-click-splitter="false">
    <Pane class="left" :size="leftPaneSize" max-size="50"></Pane>
    <Pane class="right" :size="100 - leftPaneSize"></Pane>
  </Splitpanes>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useResizeObserver } from '@vueuse/core'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

const DEFAULT_WIDTH = 270
const leftPaneSize = ref(30)
const splitpanesRef = ref()

const setLeftPaneSize = () => {
  const width = splitpanesRef.value.$el.clientWidth
  leftPaneSize.value = (DEFAULT_WIDTH / width) * 100
}
onMounted(() => {
  setLeftPaneSize()

  useResizeObserver(splitpanesRef, (entries) => {
    const entry = entries[0]
    const { width } = entry.contentRect
    leftPaneSize.value = (DEFAULT_WIDTH / width) * 100
  })
})
</script>

[davestewart]

Here's a composable which handles pixel widths and resizing.

// utils.ts
import { onUnmounted, ref } from 'vue'

export function useWidths (values: number[], el: HTMLElement = document.body) {
  // track client width
  const cw = ref(el.clientWidth)

  // track frame widths
  const widths = ref(values)

  // update frame widths
  const setWidths = (newValues?: number[]) => {
    if (newValues) {
      values = newValues
    }
    const total = values.reduce((a, b) => a + b)
    widths.value = [...values, cw.value - total].map(value => value / cw.value * 100)
  }

  // handle browser resizing
  const onResize = () => {
    cw.value = el.clientWidth
    setWidths()
  }
  window.addEventListener('resize', onResize)
  onUnmounted(() => {
    window.removeEventListener('resize', onResize)
  })

  // handle frame resizing
  const onResized = (frames: { size: number }[]) => {
    const values = []
    for (let i = 0; i < frames.length - 1; i++) {
      values[i] = Math.floor(frames[i].size / 100 * cw.value)
    }
    setWidths(values)
  }

  // start
  setWidths()
  return {
    widths,
    setWidths,
    onResized,
  }
}

<template>
  <splitpanes class="default-theme" style="height: 100%" @resized="onResized">
    <pane v-for="(frame, index) in frames"
          min-size="20"
          :size="widths[index]"
    >
      {{  frame }}
    </pane>
  </splitpanes>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import { useWidths } from './utils.ts'

const frames = ref([
  'a',
  'b',
  'c',
])

// should always be one less that frames, as the last frame will fill the space
const { widths, onResized } = useWidths([
  200,
  600,
])
</script>

<style lang="scss">
.splitpanes__pane {
  transition: none !important;
}
</style>

You'll also want to disable the splitpane CSS transition (see style block, above)