bakaotaku Comments - Answer Overflow

bakaotaku

Posts Comments

SSolidJS

•Created by bakaotaku on 8/1/2023 in #support

How to reactively set height of a element?

the issue persists even without a motion block

6 replies

SSolidJS

•Created by bakaotaku on 8/1/2023 in #support

How to reactively set height of a element?

UPDATE: This seems to work but can someone explain why this works? 🤔 :

export default function Home() {
  const [ref, setRef] = createSignal<HTMLElement>();
  const [_, setPage] = pageStore;

  const [height, setHeight] = createSignal(0);

  createEffect(() => {
    ref() && setHeight(ref()!.getBoundingClientRect().height - 2);
  });

  return (
    <Motion.section
      class="flex items-center justify-center" // First time hidden
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      onClick={() => {
        setPage("about");
      }}
    >
      <h1
        style={{
          height: `${height()}px`,
        }}
        class="overflow-hidden text-center text-9xl font-semibold"
      >
        <For each={["Baka Otaku", "Tanish Khare"]}>
          {(word) => (
            <div ref={setRef}>
              <For each={word.split("")}>
                {(letter, idx) => (
                  <Motion.span
                    class="inline-block letterSpan"
                    animate={{ y: "-100%" }}
                    transition={{
                      y: {
                        duration: 1,
                        delay: idx() * 0.03,
                        easing: [0.76, 0, 0.024, 1],
                      },
                    }}
                  >
                    {letter.trim() === "" ? "\xa0" : letter}
                  </Motion.span>
                )}
              </For>
            </div>
          )}
        </For>
      </h1>
    </Motion.section>
  );
}

export default function Home() {
  const [ref, setRef] = createSignal<HTMLElement>();
  const [_, setPage] = pageStore;

  const [height, setHeight] = createSignal(0);

  createEffect(() => {
    ref() && setHeight(ref()!.getBoundingClientRect().height - 2);
  });

  return (
    <Motion.section
      class="flex items-center justify-center" // First time hidden
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      onClick={() => {
        setPage("about");
      }}
    >
      <h1
        style={{
          height: `${height()}px`,
        }}
        class="overflow-hidden text-center text-9xl font-semibold"
      >
        <For each={["Baka Otaku", "Tanish Khare"]}>
          {(word) => (
            <div ref={setRef}>
              <For each={word.split("")}>
                {(letter, idx) => (
                  <Motion.span
                    class="inline-block letterSpan"
                    animate={{ y: "-100%" }}
                    transition={{
                      y: {
                        duration: 1,
                        delay: idx() * 0.03,
                        easing: [0.76, 0, 0.024, 1],
                      },
                    }}
                  >
                    {letter.trim() === "" ? "\xa0" : letter}
                  </Motion.span>
                )}
              </For>
            </div>
          )}
        </For>
      </h1>
    </Motion.section>
  );
}

instead of directly using the ref height value in style I update a signal in createEffect and then use it in style instead..

6 replies

SSolidJS

•Created by bakaotaku on 8/1/2023 in #support

How to reactively set height of a element?

a small recording to show the issue.

6 replies

SSolidJS

•Created by bakaotaku on 8/1/2023 in #support

How to reactively set height of a element?

The issue is that initially when the component mounts it works as expected, but when the component unounts and comes back the resizing logic doesn't work. As you can see in the component I have a console.log, it gives the expected value on first mount but 0 on remount.... for the mount and unmount thing I'm using Switch component which tracks a signal.

      <Presence exitBeforeEnter>
        <Switch>
          <Match when={page() === "home"}>
            <Home />
          </Match>
          <Match when={page() === "about"}>
            <About />
          </Match>
        </Switch>
      </Presence>

      <Presence exitBeforeEnter>
        <Switch>
          <Match when={page() === "home"}>
            <Home />
          </Match>
          <Match when={page() === "about"}>
            <About />
          </Match>
        </Switch>
      </Presence>

6 replies

Gaming

Programming