Adding Scroll Function to <Box>

[oxtian]

Hi team, I'm trying to add scroll function to one of the but it's not working as expected. Not sure if there's something overriding this in the backend.

Sample code:

<Box width="100%" overflow="hidden" overflow-y="scroll" height="500px">
          <Table>
            <THead>
              <Tr>
                <Th><Template source={templates.ContactChannel} /></Th>
                <Th><Template source={templates.ContactPhoneNumber} /></Th>
                <Th><Template source={templates.ContactName} /></Th>
                <Th><Template source={templates.ContactDateTime} /></Th>
                <Th align="center"><Template source={templates.ContactDuration} /></Th>
                <Th><Template source={templates.ContactQueue} /></Th>
                {/* <Th><Template source={templates.ContactOutcome} /></Th>
                <Th align="center"><Template source={templates.ContactStatus} /></Th> */}
              </Tr>
            </THead>
            <TBody>
              {contactList?.map((rc) => (
                <ContactRecord key={rc.taskSid} rc={rc} startContact={startContact} />
              ))}
            </TBody>
          </Table>
</Box>

As you can see, I added a couple of properties to . All are working fine except overflow-y="scroll". It's not reflected in the browser HTML. Any idea why and how can I move forward from this?

[dosubot[bot]]

🤖

Hello @oxtian! I'm Dosu, a friendly bot here to assist you while we're waiting for a human maintainer to chime in. I'm equipped to help you solve bugs, answer questions, and guide you to become a better contributor. Rest assured, I'm diving into your issue about the scroll function in the <Box> component right now. I'll be back with a more comprehensive answer shortly. Hang tight!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Do we have a scrollbar component in a code block? - Answer (updated: 04/10/2023, similarity score: 84%)
• Scrolling only within an inner Stack (updated: 04/27/2023, similarity score: 83%)
• Scrolling only within an inner Stack - Answer (updated: 04/27/2023, similarity score: 83%)

[SiTaggart]

Hi @oxtian

Couples things here:

Firstly, be sure to reference the API documentation carefully, there is a typo in the overflow-y property, it's overflowY https://paste.twilio.design/primitives/box/api

Secondly, it looks like you're using a super old version of Paste. overflowY will still work, it's just worth staying up to date and using the latest and greatest version of Paste.

[oxtian]

Thanks @SiTaggart. I missed that part of the documentation.