Kevin Powell - Community•5mo ago

Responsive component with overflow scroll (Tailwind)

Hello everyone! I wanted an element which takes the entire space available but it should not overflow and increase the page height. I am unable to think of a solution without giving it a specific height which defeats the purpose of it being responsive. Somehow this code worked but I dont know how (Check images, the highlighted part is the "ChatDialogs" component in question) If there is a better way to do it please let me know. Here is the code if you want to check it out : https://github.com/Hiperultimate/groupy/blob/chat-page-FE/src/components/ChatComponent/ChatArea.tsx

import { useRecoilValue } from "recoil";
import ChatDialogs from "./ChatDialogs";
import ChatHeader from "./ChatHeader";
import ChatTextInput from "./ChatTextInput";
import { type TChatOption, chatOptionState } from "~/store/atoms/chat";

const ChatArea = () => {
  const chatData = useRecoilValue(chatOptionState);

  const activeChat: TChatOption | undefined = chatData.find((chat) => {
    return chat.isSelected === true;
  });

  if (!activeChat) {
    return <></>;
  }

  return (
    <div className="flex h-full flex-col ">
      <div className="h-24 border-b border-light-grey">
        <ChatHeader
          authorName={activeChat.chatName}
          authorAtTag={activeChat.chatUserTag}
          authorProfilePicture={activeChat.chatImg}
        />
      </div>
      <div className="flex-grow overflow-y-auto h-2">
        <ChatDialogs chatId={activeChat.id} />
      </div>
      <div className="h-20">
        <ChatTextInput />
      </div>
    </div>
  );
};

import { useRecoilValue } from "recoil";
import ChatDialogs from "./ChatDialogs";
import ChatHeader from "./ChatHeader";
import ChatTextInput from "./ChatTextInput";
import { type TChatOption, chatOptionState } from "~/store/atoms/chat";

const ChatArea = () => {
  const chatData = useRecoilValue(chatOptionState);

  const activeChat: TChatOption | undefined = chatData.find((chat) => {
    return chat.isSelected === true;
  });

  if (!activeChat) {
    return <></>;
  }

  return (
    <div className="flex h-full flex-col ">
      <div className="h-24 border-b border-light-grey">
        <ChatHeader
          authorName={activeChat.chatName}
          authorAtTag={activeChat.chatUserTag}
          authorProfilePicture={activeChat.chatImg}
        />
      </div>
      <div className="flex-grow overflow-y-auto h-2">
        <ChatDialogs chatId={activeChat.id} />
      </div>
      <div className="h-20">
        <ChatTextInput />
      </div>
    </div>
  );
};

Edit: Let me know if there is anything you need from my side or if my query is not detailed enough. I have tried looking it up on the web but failed.

GitHub

groupy/src/components/ChatComponent/ChatArea.tsx at chat-page-FE · ...

A social networking platform made using tRPC, TypeScript, Tailwind, Next, Prisma - Hiperultimate/groupy

4 Replies

Coder_Carl•5mo ago

Flex grow would grow to take up the available space. Its a solution. I'd set a minimum on it's flex basis and turn off the shrink just to keep a basic height

Hampterultimate•5mo ago

Yes thats what I thought as well, but having flex-grow without h-2 is not working as it should be. And h-2 by itself is also not making sense as you can see its taking way more than h-2 height flex-grow by itself is giving this issue where adding more items into that div in question is growing the whole div until all items are covered, even after having overflow scroll which is making the whole page longer

clevermissfox•5mo ago

Put a scrollbar on the y-axis so the container stays at 80svh or whatever but the content inside scrolls instead of expands downwards

Hampterultimate•5mo ago

so you mean I should just add overflow y with scroll and it wont overflow? Okay, I will try it once I get free and will let you know

Gaming

Programming

Responsive component with overflow scroll (Tailwind)