Is it possible to enable table scrolling within Semantic-UI-React by utilizing Next.js?

My issue involves a wide table in the Grid component with a width of 16 on mobile resulting in strange behavior.

If you view my work in progress at the following URL, you'll notice that every component is responsive on mobile except for the stretched table. Take a look on your phone and zoom in to see what I mean:

I'm aiming for the table to fit into the mobile view like the other components and be scrollable (users can swipe right and left for more details).

Check out this website for an example of the desired result:

On that site, everything is responsive, and the table is scrollable.

I think there might be a way to achieve this using Semantic-UI-React through some sort of augmentation:

 import { Table } from "semantic-ui-react";

Table as={*some sort of styled div}

I've experimented with a few styled divs without success, such as:

style={{overflow: 'auto'}}
cssreactjsresponsive-designsemantic-uisemantic-ui-react

Answer №1

To create a container with specified height, simply place the table inside a div and apply the following styles:

CSS

.container__table {
  height: 290px;
  overflow-y: scroll;  /* or auto */
}

HTML

<div className="container__table">                                        
     <--- your table --->
</div>

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

What is preventing the terminal from recognizing that I have successfully updated to the newest version of tar?

Struggling to get the react app installed using this code: sudo npm i -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107362757164753d62757173643d71606050213e253e22">[email protected]</a> Continuously facing t ...

node.jsreactjsnpmtar

Increasing the level of CSS list counters

HTML <ol> <li>item1 <ol> <li>item2</li> </ol> </li> <li>item1 <ol> <li>item2</li> <li>item3</li> </ol> </li> </ol> SC ...

htmlcsscss-counter

Effortlessly transition a div with seamless animation as it moves across the screen

I need help with an absolutely positioned div: class MyDiv extends React.Component { state = { stepCount: 0 }; componentDidMount(){ setInterval(() => { this.setState({ stepCount: this.state.stepCount + 1 }) }, 1000); } ren ...

reactjscss-transitions

transforming array elements into properties of a React component

My text component contains the code below return ( <FormControl variant="outlined" className={classes.formControl}> <Grid container> <TextField id={props.id} label={props.label} d ...

javascriptreactjsmaterial-ui

What is the best way to bring two useStyles files into a single TypeScript file?

I am having an issue with finding a declaration file for the module 'react-combine-styles' even after I installed it using npm install @types/react-combine-styles. import React, { useState } from "react"; import useStyles from "./u ...

reactjstypescriptmaterial-uistyles

How to extract words from a dynamic router.pathname in NextJS when only the filename is displayed instead of the full path?

I'm keeping this example as straightforward as possible, but I can add more details if needed to solve the issue Currently, I am working with dynamic routes in nextJS. My application fetches data from Twitter based on the keywords entered into the dy ...

javascriptreactjsnext.jssingle-page-application

Footer flexbox element not aligning underneath other content containers

After creating a layout using CSS and Flexbox, I encountered an issue with the footer div. When the page loads, the footer is displayed at the bottom of the page. However, as content is added or loaded dynamically, it causes the footer to float in the midd ...

htmlcssflexbox

jQuery is optimized to work specifically with select id tags

Here is the HTML code snippet I've put together, along with my script. While I admit it might look a bit messy, please bear with me as I'm still in the learning phase. If anyone could offer some assistance on this matter, I would be extremely gra ...

javascriptjqueryhtmlcss

Need help positioning this HTML iframe on my webpage?

Can anyone help me figure out how to position this HTML i-frame in a specific place on my webpage? <div style="overflow: hidden; width: 333px; height: 156px; position src="h: relative;" id="i_div"><iframe name="i_frame"http://url.com/click.php?a ...

htmlcss

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

htmlcssanimationoverlay

Laravel 4.2 email template not applying CSS inline style for text color

Working on setting up email functionality in Laravel 4.2 and I've got an email template ready to go. The data for the emails is stored in an array, but I'm running into an issue where if I pass a parameter like $variable, the styles are only bein ...

phphtmlcssemaillaravel-4

Creating a Gatsby website seamlessly integrated with a Contentful CMS platform

There's a puzzling issue that I'm facing. One Contentful field grants me access to a variable, but the other four identical fields in the same content model don't provide the same access. Here's my query: export const pageQuery = graph ...

reactjsgatsbycontentful

The H1 tag fails to appear on the webpage

I can't figure out why my H1 is not visible. It seems to be hidden by a div. What's strange is that the parent div is visible when I change the background color to something other than transparent. Even an input tag within the same div displays c ...

htmlcsssasscss-animations

Understanding how to infer the type of a function when it is passed as an argument

Looking at the images below, I am facing an issue with my function that accepts options in the form of an object where one of the arguments is a transform function. The problem is that while the type of the response argument is correctly inferred for the e ...

reactjstypescriptfunctionreact-hookstype-inference

Encountering excessive re-renders while using MUI and styled components

Hey there! I recently worked on a project where I used MUI (Material-UI) and styled-components to render a webpage. To ensure responsiveness, I made use of the useTheme and useMediaQuery hooks in my web application. My goal was to adjust the font size for ...

javascriptreactjsreact-hooksmaterial-uistyled-components

Displaying several modals with a backdrop on top of one another using Bootstrap

My issue involves two modals: one that displays appointment information with a delete button, and another that serves as a warning before deleting. I want the delete-warning modal to overlay a backdrop on the modal beneath it, graying it out. However, both ...

htmlcssbootstrap-4bootstrap-modal

What method sits snugly between prepend() and append()?

Just a quick question I have. I am attempting to align an element with my target. Usually, we use prepend (before the target) and append (after the target). Is there something similar that allows us to position that element directly on top of what we are ...

javascripthtmljquerycssprepend

Having trouble sending data from a page to a child component using getStaticProps

I'm currently working on a project using next.js and I'm facing an issue with passing data from the "gymlist" page to the "table" component. Here is the code snippet from the "gymlist" page where I have defined the getStaticProps function: expor ...

javascriptreactjsnext.js

What is the best way to revert a screen's state back to its original state while utilizing react navigation?

How can I reset the state in a functional component back to its initial state when navigating using navigation.navigate()? For example, if a user navigates to screen A, sets some state, then clicks a button and navigates to screen B, and then goes back to ...

reactjstypescriptreact-nativereact-hooksreact-navigation

Is there a way to dynamically alter the content depending on the index of the current slide using swiper.js?

Hi, I am new to utilizing the Swiper framework and so far, it has been one of the best sliders I have ever experienced. Currently, I am trying to establish a connection between 2 div tags - one tag holds the content of each slide while the other tag contro ...

javascripthtmlcss