How to force a re-render of a ref in SolidJS

Hello everyone i have the following issue.

I have a ref that i display on a page. It works fine and well. I recently implemented some functionality such that when 4 of the below components are created on screen, i want to dynamically adjust the height to 50% from 100%. Now I got this code working. But the issue is the ref is not re-rendering unless i manually move the browser window with my mouse.

Below i tried to force a re-render via the createEffect but it still does not seem to work. Any help would be appreciated.

let widgetRef: HTMLDivElement | undefined
...
...

const [shouldRender, setShouldRender] = createSignal(true);

  createEffect(() => {
    if (widgetRef) {
      if (props.multiChart === MultiChartEnum.QUAD) {
        // Apply height change directly
        widgetRef.style.height = "50%";

        // Force reflow by reading layout properties
        requestAnimationFrame(() => {
          widgetRef?.offsetHeight; // Read a layout property to force reflow
        });
      } else {
        // Reset height when not in QUAD mode
        widgetRef.style.height = "100%";
      }
    }
  })

...
...
some code
...

return (
    <>
...
...
...
<Show when={shouldRender()}>
      <div
        class={`content ${props.multiChart === MultiChartEnum.QUAD ? 'quad-chart' : ''}`}>
        <Show when={loadingVisible()}>
          <Loading/>
        </Show>
        <div
          ref={widgetRef}
          ...
        />
      </div>
</Show>

.less file

&.content {
    height: 100%; // normal height
    // When `.quad-chart` is active, set height to 50%
    &.quad-chart {
      height: 50%;
    }
  }

You should only need to use refs when you explicitly don't want things to rerender, or if you need direct DOM access for another reason.

For your use-case, it seems you can do it declaratively:

<div
  style={{ height: props.multiChart === MultiChartEnum.QUAD ? '50%' : '100%' }}
  />