Center the button relative to the component if the button uses p

ghz 8months ago ⋅ 126 views

Center the button relative to the component if the button uses position: fixed

Below is a schematic layout of one of the pages of my site.

enter image description here

And also code

FirstPage.tsx

 export function FirstPage() {
  return (
    <div>
      <div>
        <Sidebar />
      </div>

      <div className="w-[100vw]">
        <MainPage />
      </div>
    </div>
  );
}

And also code for MainPage.tsx

MainPage.tsx

 export function MainPage() {
  return (
    <div className="m-auto flex h-full w-[43vw] flex-col">
      <div>
        <SomeComponent1 />
      </div>

      <div>
        <SomeComponent2 />
      </div>

      <div>
        <SomeComponent3 />
      </div>

      <div>
        <SomeComponent4 />
      </div>

      <div className="flex h-[45px] items-start justify-center">
        <Button />
      </div>
    </div>
  );
}

The current behavior for MainPage is such that if all the content does not fit into the view (due to reducing the page height or applying zoom), then a scroll appears.

However, I would like the Button component to be always visible when the scroll appears. To do this, I added fixed and bottom-0 to className, that is, the className in the bottom div began to look like className="fixed bottom-0 flex h-[45px] items-start justify-center"

This way I got the desired result, but now the Button component is not horizontally centered relative to the MainPage component

enter code here

Please tell me how I can ensure that the Button component is centered as before.

Perhaps you can advise me to implement my functionality without using fixed. I am open to advice and discussions

Answers

To achieve the desired behavior of having the button always visible at the bottom of the page while ensuring it remains horizontally centered relative to the MainPage component, we can make a few adjustments to the styling.

Instead of using fixed positioning, we can utilize flexbox and absolute positioning to achieve the layout.

Here's how you can modify your MainPage.tsx:

import React from 'react';

export function MainPage() {
  return (
    <div className="m-auto flex flex-col h-full w-[43vw] relative">
      <div className="flex-grow">
        <SomeComponent1 />
      </div>

      <div className="flex-grow">
        <SomeComponent2 />
      </div>

      <div className="flex-grow">
        <SomeComponent3 />
      </div>

      <div className="flex-grow">
        <SomeComponent4 />
      </div>

      <div className="absolute bottom-0 left-0 right-0 flex justify-center">
        <Button />
      </div>
    </div>
  );
}

Explanation of changes:

  • Removed the fixed positioning from the bottom div.
  • Added relative positioning to the MainPage container to make the absolute positioning of the button relative to it.
  • Changed the button container to use absolute positioning at the bottom of the parent container.
  • Used left-0 and right-0 to ensure the button stays horizontally centered within its parent container.

With these changes, the button should remain horizontally centered relative to the MainPage component while always being visible at the bottom, even when scrolling. Adjust the styles as needed based on your design requirements.

#css