What is the trick to displaying the horizontal scrollbar without having to scroll downwards?

Question

What is the trick to displaying the horizontal scrollbar without having to scroll downwards?

Currently, I am utilizing react-split, but I am encountering an issue where the first pane requires scrolling down to display the horizontal scrollbar.

I would like both the vertical and horizontal scrollbars to be visible simultaneously.

Below is the code snippet:

https://codesandbox.io/s/vibrant-flower-ueywiu

App

function App() {
  return (
    <Split
      className="split"
      direction="vertical"
      minSize={0}
      snapOffset={10}
      dragInterval={5}
      sizes={[30, 70]}
    >
      <Market />

      <chakra.div bg="blue">
        <Center h="100%" p="16" textAlign="center">
          <Heading color="white">
            How to show the horizontal scrollbar without needing to scroll down?
          </Heading>
        </Center>
      </chakra.div>
    </Split>
  );
}

Market

const Market = (props) => {
  return (
    <chakra.div {...props} overflow="auto">
      <Tabs isLazy>
        <TabList>
          <Tab>Stocks</Tab>
          <Tab>FTSE 100</Tab>
        </TabList>

        <TabPanels>
          <TabPanel padding={0}>
            <MarketTable />
          </TabPanel>

          <TabPanel padding={0}>
            <p>Empty</p>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </chakra.div>
  );
};

MarketTable

const MarketTable = () => {
  return (
    <TableContainer>
      <Table size="sm">
        <Thead>
          <Tr>
            <Th>Title</Th>
            <Th>Quote</Th>
            <Th>Date/Time</Th>
            <Th>Place</Th>
            <Th>Variation</Th>
            <Th>CMP</Th>
            <Th>VND</Th>
            <Th>Min</Th>
            <Th>Max</Th>
            <Th>Volume</Th>
          </Tr>
        </Thead>

        <Tbody>
          {data.map((each) => (
            <Tr key={each.name}>
              <Td title={String(each.name ?? EMPTY_CHAR)}>
                {each.name ?? EMPTY_CHAR}
              </Td>
              <Td title={String(each.quote ?? EMPTY_CHAR)}>
                {each.quote ?? EMPTY_CHAR}
              </Td>
              <Td title={String(each.dateTime ?? EMPTY_CHAR)}>
                {each.dateTime ?? EMPTY_CHAR}
              </Td>
              <Td title={String(each.place.name ?? EMPTY_CHAR)}>
                {each.place.name ?? EMPTY_CHAR}
              </Td>
              <Td title={String(each.variationPercent ?? EMPTY_CHAR)}>
                {each.variationPercent ?? EMPTY_CHAR}
              </Td>
              <Td title={String(each.cmp ?? EMPTY_CHAR)}>
                {each.cmp ?? EMPTY_CHAR}
              </Td>
              <Td title={String(each.vnd ?? EMPTY_CHAR)}>
                {each.vnd ?? EMPTY_CHAR}
              </Td>
              <Td title={String(each.min ?? EMPTY_CHAR)}>
                {each.min ?? EMPTY_CHAR}
              </Td>
              <Td title={String(each.max ?? EMPTY_CHAR)}>
                {each.max ?? EMPTY_CHAR}
              </Td>
              <Td title={String(each.volume ?? EMPTY_CHAR)}>
                {each.volume ?? EMPTY_CHAR}
              </Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </TableContainer>
  );
};

javascript html css reactjs

Answer 1

Answer №1

Although I have not had any experience working with these libraries or using Typescript, my solution remains effective and easy to understand. The key approach involves tracking the largest container size and table size, calculating their respective percentages in relation to each other, and passing them to <Split />.

In order to properly set the sizes prop on <Split />, we need to include two refs. One is obtained from the <TableContainer /> within MarketTable.tsx, while the other is placed on a <div> wrapper added in the index file. The wrapper serves as the top-level container, ensuring access to the current screen size.

If you are unfamiliar with refs, they provide a quick way to interact with specific DOM elements and manipulate their properties. In this case, we aim to retrieve the current heights of the <TableContainer /> (the table) and the div wrapper.

The <TableContainer /> section looks like this:

<TableContainer ref={tableHeight}>

While the structure in index.tsx appears as follows:

<div ref={containerHeightRef}>

Both <MarketTable /> and index utilize useEffect() to dynamically adjust the table height as data changes. Within useEffect() in index.tsx, we continually monitor the two refs to adapt to their heights and trigger re-renders for the involved components. Here is an example:

  useEffect(() => {
    if (containerHeightRef && tableHeight) {
      let containerHeight = containerHeightRef.current.clientHeight;
      setSizePercents([
        (tableHeight / containerHeight) * 100,
        ((containerHeight - tableHeight) / containerHeight) * 100
      ]);
    }
  }, [containerHeightRef, tableHeight]);

Whenever data is added or removed from data.tsx, the <Split /> automatically adjusts to fit the table size accordingly.

Having acquired both the table height and wrapper height values in index.tsx, we convert these pixels into percentages for the sizes prop in <Split />. The first value represents the final table height percent, calculated by dividing tableHeight by containerHeight (wrapper height in

index.tsx</code) and then multiplying by 100. Subsequently, the split height, constituting the second percent value for the <code>sizes

prop, is determined by

((containerHeight - tableHeight) / containerHeight) * 100

.

Eventually, the completed sizes prop takes the following form:

      <Split
        className="split"
        direction="vertical"
        minSize={0}
        snapOffset={10}
        dragInterval={5}
        sizes={sizePercents ? [sizePercents[0] + 8.5, sizePercents[1]] : ""}
      >

The additional 8.5 offset accounts for the scrollbar height, ensuring the accurate sizing of the table. Without it, the table height may slightly deviate from the intended measurement.

To transfer the tableHeight value to index.tsx, we must relay it from <MarketTable /> up the component hierarchy to its grandparent (index.tsx). This is achieved by passing settableheight through the chain:

index.tsx --> <Market /> --> <MarketTable />

. Subsequently, setting the tableHeight allows us to access it in index.tsx. Although there is an error concerning the transmission of settableheight, it does not impact functionality and can be resolved separately.

While there may exist more streamlined approaches in Typescript, this solution establishes a solid foundation for refactoring and creating a more permanent resolution.

Answer 2

Although I have not had any experience working with these libraries or using Typescript, my solution remains effective and easy to understand. The key approach involves tracking the largest container size and table size, calculating their respective percentages in relation to each other, and passing them to <Split />.

In order to properly set the sizes prop on <Split />, we need to include two refs. One is obtained from the <TableContainer /> within MarketTable.tsx, while the other is placed on a <div> wrapper added in the index file. The wrapper serves as the top-level container, ensuring access to the current screen size.

If you are unfamiliar with refs, they provide a quick way to interact with specific DOM elements and manipulate their properties. In this case, we aim to retrieve the current heights of the <TableContainer /> (the table) and the div wrapper.

The <TableContainer /> section looks like this:

<TableContainer ref={tableHeight}>

While the structure in index.tsx appears as follows:

<div ref={containerHeightRef}>

Both <MarketTable /> and index utilize useEffect() to dynamically adjust the table height as data changes. Within useEffect() in index.tsx, we continually monitor the two refs to adapt to their heights and trigger re-renders for the involved components. Here is an example:

  useEffect(() => {
    if (containerHeightRef && tableHeight) {
      let containerHeight = containerHeightRef.current.clientHeight;
      setSizePercents([
        (tableHeight / containerHeight) * 100,
        ((containerHeight - tableHeight) / containerHeight) * 100
      ]);
    }
  }, [containerHeightRef, tableHeight]);

Whenever data is added or removed from data.tsx, the <Split /> automatically adjusts to fit the table size accordingly.

Having acquired both the table height and wrapper height values in index.tsx, we convert these pixels into percentages for the sizes prop in <Split />. The first value represents the final table height percent, calculated by dividing tableHeight by containerHeight (wrapper height in

index.tsx</code) and then multiplying by 100. Subsequently, the split height, constituting the second percent value for the <code>sizes

prop, is determined by

((containerHeight - tableHeight) / containerHeight) * 100

.

Eventually, the completed sizes prop takes the following form:

      <Split
        className="split"
        direction="vertical"
        minSize={0}
        snapOffset={10}
        dragInterval={5}
        sizes={sizePercents ? [sizePercents[0] + 8.5, sizePercents[1]] : ""}
      >

The additional 8.5 offset accounts for the scrollbar height, ensuring the accurate sizing of the table. Without it, the table height may slightly deviate from the intended measurement.

To transfer the tableHeight value to index.tsx, we must relay it from <MarketTable /> up the component hierarchy to its grandparent (index.tsx). This is achieved by passing settableheight through the chain:

index.tsx --> <Market /> --> <MarketTable />

. Subsequently, setting the tableHeight allows us to access it in index.tsx. Although there is an error concerning the transmission of settableheight, it does not impact functionality and can be resolved separately.

While there may exist more streamlined approaches in Typescript, this solution establishes a solid foundation for refactoring and creating a more permanent resolution.

What is the trick to displaying the horizontal scrollbar without having to scroll downwards?

Answer №1

Similar questions

The page remains static even after selecting a child route using routerLink in Angular 2

CSS layout: The full-width header should align its left margin with the centered content-div

Error: Attempting to access the 'name' property of a null object

What could be the reason for the ineffective functioning of Jquery's remove and fadeout?

CSS sliding element moving horizontally

Maximizing the power of Webpack alongside Google Maps API

Adjust the vertical positioning according to the percentage of the width

What sets SVG and CSS3 animations apart and where do they overlap?

Encountering an ENOTEMPTY error with babel-loader during npm installation process

Having difficulty extracting information from an HTML page using Swift

How to temporarily disable CSS hover effects

Reduce the size of a webpage by 10%

Struggling with updating an object in Express and Mongoose

"Experiencing Issues with jQuery as Thumbnails Caption is Not Functioning Proper

(no longer supported) We are unsure about the usage of /deep/, >>>, and ::ng-deep, ::v-deep

How to modify a nested object in MongoDB based on the JSON data provided

Sending a form from an iPhone device to a PHP backend server

Troubleshooting: Next.js Axios Get Request Fails to Execute on Host

Examining the potential of a promise within a dynamic import feature in Angular

What is the most effective method for live-updating a field every 5 seconds in Laravel?