Question 73114 in Reactjs Question posted in
The new location for the React Documentation can be found here.

how to get a right-hand side fixed side bar on a modal using tailwindcss? – Reactjs

i have a normal modal, like the kind that you have for sign up forms and stuff. on the modal i have a main content div and a side bar div. my plan is to have the side bar div on the right and make it fixed, so that when i scroll, it is only the main div that would be scrolling, the problem is i cant get it to work. when i used the ‘fixed’ class on tailwind, the side bar moves to the left hand side, when i add ‘right-0’ it goes to the right but the right of the window screen and not the right modal. How do i achieve a fixed right hand scroll bar on a modal using tailwind? though not much, i would post the code ive written.

Modal div:

<div className='text-black w-full flex h-[300px] overflow-hidden overflow-y-scroll ' >
  <div className=' mb-[1000px] bg-black' >main</div>
  <div className=' fixed right-[222px]  w-[300px]  border ' >side</div>
</div>

please note that i used ‘right-[222px]’ so that the sidebar div can align with the edge of the modal and not the screen.

Tags:

2

Answers


  1. 0

    This is the solution based on what I understand from your info (comment if it’s wrong). If you don’t want the sidebar to have a scroll, then just add a scroll to the main content instead of the container.

    So in your case, the code will look like this:

    <div className='text-black w-full flex h-[300px] ' >
  <div className=' mb-[1000px] bg-black overflow-y-scroll' >main</div>
  <div className=' fixed right-[222px]  w-[300px]  border ' >side</div>
</div>

    And here is a simple demo of the solution above: https://play.tailwindcss.com/j0hPKoqouc

    Hope it helps.

    Login or Signup to reply.
  2. 0

    To achieve a fixed sidebar on the right-hand side of your modal using Tailwind, you can add the following classes to your sidebar div: fixed inset-y-0 right-0 w-[300px] border. Here’s how your code should look like:

    <div className='text-black w-full flex h-[300px] overflow-hidden'>
<div className='mb-[1000px] bg-black'>main</div>
<div className='fixed inset-y-0 right-0 w-[300px] border'>side</div>
</div>

    Explanation:

    .The fixed class sets the position of the sidebar to be fixed within the viewport.
    .The inset-y-0 class sets the top and bottom positions of the sidebar to be 0, which means it will stretch to the full height of its parent element.
    .The right-0 class sets the right position of the sidebar to be 0, which means it will be aligned to the right edge of its parent element.
    .The w-[300px] class sets the width of the sidebar to be 300 pixels.
    .The border class adds a border to the sidebar.
    With these classes, the sidebar should stay fixed on the right-hand side of the modal as you scroll the main content.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search