The React-Bootstrap Table in a Vite project lacks vertical scrolling when the "responsive" property is enabled

I'm encountering an issue with my React-Bootstrap Table overflowing the viewport in the x-direction on smaller screens. I've tried making it responsive by using the responsive prop, but the overflow-x: scroll feature isn't functioning properly. How can I fix this overflow issue?

In my Typescript Vite project, the only file I've modified is App.tsx as shown below:

import { Table } from "react-bootstrap";
import "./App.css";
import "./styles.scss";

function App() {
  return (
    <div>
      <span>Connected Devices:</span>
      <Table
        striped
        bordered
        hover
        responsive
      >
        <thead>
          <tr>
            <th>IP Address</th>
            <th>Protocol</th>
            <th>Duration</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>xxx.xxx.x.xx:xxxxx</td>
            <td> ASCII</td>
            <td>00:00:42</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

export default App;

Additionally, I import the React-Bootstrap CSS using a styles.scss file:

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";

@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";

@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/tooltip";

@import "../node_modules/bootstrap/scss/utilities/api";

When the screen width is smaller than the content, the issue can be seen in the screenshot below: https://i.sstatic.net/9nYfOdwK.png

The striped, bordered, and hover options are working correctly, except for the responsive one.

I've noticed that the selector added by this option uses the -webkit-overflow-scrolling property, which is no longer supported.

My bootstrap version is ^5.3.2 and react-bootstrap version is ^2.9.0, both being the latest versions available at the time of writing.

javascriptcssreactjsreact-bootstrapreact-props

Answer №1

The problem stemmed from the #root element, where the App component is rendered in main.jsx. Without setting any restrictions on the width of the #root element, it inherited the width of its parent table element.

To resolve this issue, I defined a fixed width for the root equal to 100vw.

#root {
  margin: 0 auto;
  padding: 2rem;
  width: 100vw;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Easy methods to navigate between screens without using React Router libraries

After experimenting with two different methods to switch between screens in a simple application (up to 3 modes/screens), I am still in the learning phase and mainly focusing on practicing with useState and possibly useEffect for certain scenarios. I&apos ...

javascriptreactjsjournal

Adding jQuery namespace to AngularJS

I'm facing a bit of an issue here. I've implemented RequireJS to manage my modules and dependencies. To prevent cluttering the global namespace, I've set up the following configuration to avoid declaring $ or jQuery globally: require.confi ...

javascriptjqueryangularjsrequirejs

Guide to showcasing firestore data on a react web application

Hello everyone, I'm new to this forum so please let me know if I have missed any important details. I am trying to figure out how to display data from my Firestore database on my React web application. Currently, I can see the data in the console of t ...

javascriptreactjsfirebasegoogle-cloud-firestore

Introducing a fresh input field that includes a dropdown selection feature

When a user clicks on the "+" button, a new row should be added with a dropdown and input field. I want the input field name to be the dropdown value for each row. If "Facebook" is selected in the first dropdown, it should not appear in the second dropdo ...

javascriptphpjqueryhtmlcss

The Access-Control-Allow-Origin error is preventing the Angularjs post request from going through

I am encountering an issue with my index.html file that is sending a post request to localhost:3000/SetUser. The error I keep receiving states XMLHttpRequest cannot load https://localhost:3000/SetUser. No 'Access-Control-Allow-Origin' header is p ...

javascriptnode.jsangularjsexpress

Leveraging React's useContext

Having recently started using useContext, I am facing an issue while trying to resolve a task with it. I have a state declared outside my provider function and I want to avoid prop drilling even at the first level for my button component. I attempted to im ...

reactjsreact-context

Enhancing the appearance of a Select element

Alright, let's break it down: I have a custom styled <select> element I want to display an up arrow (possibly a Bootstrap Glyphicon) on the right side of its transparent background The problem at hand: The icon appears correctly (though in ...

jqueryhtmlcsstwitter-bootstraphtml-select

Is there a way to modify the color of an externally imported SVG within a React component?

Is it possible to modify the color of an SVG that is loaded from a server, rather than internally available? Here's an example where you can experiment by forking it. import styled from "styled-components"; const App = () => { return ...

reactjssvgdynamicimportcolors

margin-top aligned to the bottom of two elements

Within this straightforward CSS snippet, my goal is to align the bottom of h1 with the bottom of p, without having h1 display below p. <div id="sqrs" style="width:200px; height:200px; border:1px solid BLACK;"> <p style="width:100px; height:100px; ...

htmlcss

The middle toggle line stubbornly refuses to properly disappear

I'm facing an issue with the toggle button on my practice site. When clicked, it undergoes a transition and displays a cross or X symbol. I've used CSS to create a cross shape by hiding the middle line. However, after the transition, the middle l ...

jqueryhtmlcss

Troubleshooting a jQuery filter function selector issue

Here's a function I've created: $.fn.filterByClass = function(cls) { var o = $(this); return o.filter(function() { if ($(this).attr("class") == cls) { return $(this); } }); }; Let's say we have multiple fo ...

javascriptjquery

Issues with Textfield functionality within a ReactJs table

One of my features involves managing an array of objects within an object initialPreconfigTodoState = { todos: [ { title: 'title1', dueDate: new Date(), create: true, assignedTo: 'role', }, { title: 'title2', dueD ...

reactjsmaterial-uiuse-state

Is it possible for me to utilize the webAudio API in Chrome to connect to the local audio output stream?

Currently, I am working on audio analysis for a visualizer application running on my computer. I am wondering if there is a way to directly access the output audio data stream from the browser? For this project, I am using JavaScript along with the three ...

javascriptaudioweb-audio-apiaudio-analysis

Retrieve the product IDs by selecting the checkboxes, then compile a fresh array consisting of the identified IDs

I am currently delving into the realm of typescript/angular2+ as a fledgling student, and I have taken on the task of creating a website to put my newfound knowledge to the test. The view is up and running, but I'm facing some roadblocks as I work on ...

javascriptangulartypescriptfrontend

Using Python, Scrapy, and Selenium to extract dynamically generated content from websites utilizing JavaScript

I am currently utilizing Python in combination with Selenium and Firefox to extract specific content from a website. The structure of the website's HTML is as follows: <html> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> ...

javascriptpythonhtmlseleniumscrapy

Exploring the world of Node.js and the power of 64-bit var

Currently, I am developing a Node.js application that communicates via TCP with a C++ server. The server utilizes a binary protocol similar to Protocol Buffers but not identical. One of the data types returned by the server is an unsigned 64-bit integer ( ...

javascriptnode.js

Conditional state setting based on previous state within the useEffect hook can lead to a cascading effect of re

Here is a simple functional stateful component that utilizes the useEffect hook. Its primary function is to listen for clicks and toggle the profile menu based on whether event.target is equal to ref.current. e.target === ref.current While this functiona ...

reactjs

Is it possible to record a video and save it directly to the server?

When using the Apache Cordova Plugin cordova-plugin-media-capture to capture a video, you may wonder how to send this video to your server and store it. An official example is provided on how to start capturing a video: // capture callback var captureSuc ...

javascriptjqueryhtmlcordovacordova-plugins

Checking two promises in AngularJS to ensure they have both returned successfully

I am faced with a scenario where I need to execute actions as each promise returns individually, and perform another action once both promises have returned successfully. promise1.then(function() { // do something }) promise2.then(function() { // do some ...

javascriptangularjsangular-promise

How about: "Is there a way to show items in a list without using

I have removed the bullet points from an unordered list, but I am having trouble displaying Log with every message. The code I have doesn't seem to be working as expected. I want users to be able to differentiate between messages easily, without seein ...

javascripthtmlcssangularjs