Kevin Powell - Community•2mo ago

How to make a fixed position element responsive

Hey guys, I'm trying to make the width of this searcg bar responsive to its parent but it does not work accordingly 😦 Any tips on how to get this done right?

    <DialogContent>
          <Box position={'relative'} width={'80%'}>
            <Box position={'fixed'} zIndex={10} width={'50%'}>
              <SearchBar name={''} placeholder={'Search'} />
            </Box>
          </Box>

          <Box maxHeight={'300px'} mt={'45px'}>
            {orgList &&
              orgList.map((org) => (
                <OrganisationItem key={org.id} title={org.name} />
              ))}
          </Box>
        </DialogContent>

    <DialogContent>
          <Box position={'relative'} width={'80%'}>
            <Box position={'fixed'} zIndex={10} width={'50%'}>
              <SearchBar name={''} placeholder={'Search'} />
            </Box>
          </Box>

          <Box maxHeight={'300px'} mt={'45px'}>
            {orgList &&
              orgList.map((org) => (
                <OrganisationItem key={org.id} title={org.name} />
              ))}
          </Box>
        </DialogContent>

4 Replies

13eck•2mo ago

You can't. A fixed position can't be responsive, as it's fixed. Why do you think you need a fixed position on this anyway? Shouldn't you just let it be where the browser puts it?

ShenZoOP•2mo ago

But I want it to stay on the top when scrolling down the list. How do I make that happen without setting the position to fix?

13eck•2mo ago

Have you tried position sticky? https://developer.mozilla.org/en-US/docs/Web/CSS/position In the "Try it" box select the last option and scroll the right side a bit to see how it works Per the MDN docs:

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

It keeps the element where it "should be" regardless of the scrolling offset of the page. Another option would be to use flex/grid with search bar being in the top-most flex/grid cell and the main content of the page being in the bottom flex/grid cell with scroll enabled (and the parent flex/grid container being height: 100%; or similar to get it to stretch the entire height of the viewport).

ShenZoOP•2mo ago

I have npt tried position 'sticky'. I will try it now. Also thank you for the suggestion. If sticky does not work I'll try that aswell.

Gaming

Programming

How to make a fixed position element responsive