canvas scaling using a q-splitter

[srothst1]

Hi Quasar community 👋 I am having an issue with canvas sizing when using a q-splitter. The following image showcases what I have so far:

I would like the canvas objects to fill the entire left (v-slot:before) and right (v-slot:after) sides of the q-splitter. In addition, I do not want a horizontal or vertical scroll bar to appear when I am resizing the UI elements or the window.

I have created a codepen demo that showcases my current progress. Please let me know if you have any suggestions.

<div id="q-app">
  <div>
    <q-splitter v-model="splitterModel">
 
      <template v-slot:before>
        <div class="q-pa-md">
          <canvas ref="multilogPlaybackAppCanvas1" style="border:1px solid #000000;"/>
        </div>
      </template>

      <template v-slot:separator>
        <q-avatar color="primary" text-color="white" size="40px" icon="drag_indicator"></q-avatar>
      </template>

      <template v-slot:after>
        <div class="q-pa-md">
          <canvas ref="multilogPlaybackAppCanvas1" style="border:1px solid #000000;"/>
        </div>
      </template>

    </q-splitter>
  </div>
</div>

[srothst1]

Hey everyone 👋 Any updates on this thread?
I have done some additional research in the interum. It seems like the splitpanes API may be a viable solution: https://github.com/antoniandre/splitpanes

[metalsadman]

Make your canvases width styles reactive property relative to the width of your splitter, check its api I believe there's an event that supplies those values.

[srothst1]

Hi @metalsadman. Are you able to provide the splitpanes documentation for that object? I was not able to find what you are referencing.

Ideally, I would be able to meet my needs using only the base Quasar API.