Task:
I would like to show a really big DataTable in UI which is horizontally and vertically is scrollable
Issue:
Cannot set scrolling on X axis
UI cuts/hides down the first half of the table if not zooming out
Makes the UI not usaböe
Tried:
Reading and setting the following properties
Reading and setting custom styles with the help of git documents
Reading and setting extra HTML tags like and styles allowing overflowX to make it scrollable
Details:
Table is roughly 50-60 columns
200+ rows
component: React-Data-Table-Component
component uses custom solution using a lot of div tags (this is out of the box upon inspecting the react-data-table-component in website)
Needs solution:
Cannot scroll left and right in table
Cannot see left part of the table
Example Column:
{
name: 'header1',
id: 'header1',
maxWidth: 'auto',
minWidth: 'auto',
selector: row => row.data1,
sortable: true,
compact: true,
},
Example Table:
<div style={{ overflowX: "visible", scrollSnapAlign: "start" }}>
<DataTable
columns={DataTableHeaders}
data={filteredItems}
pagination
paginationComponentOptions={paginationComponentOptions}
selectableRows
defaultSortField="name"
subHeader
subHeaderComponent={subHeaderComponent}
subHeaderAlign={Alignment.CENTER}
expandableRows
expandableRowsComponent={ExpandedComponent}
dense
highlightOnHover
fixedHeader
persistTableHead
responsive
direction={Direction.LTR}
//customStyles={customStyles}
//theme="dark"
//className={styleDataTable.rdt_TableRow}
/>
</div>
Apparently this issue can be solved by setting fixed % width based on viewable area
<div style={{ overflowX: "hidden", width: "94vw", alignItems: "flex-start" }}>
<DataTable
className={styleDataTable.rdt_TableCol}
columns={DataTableHeaders}
data={filteredItems}
pagination
paginationComponentOptions={paginationComponentOptions}
defaultSortField="name"
subHeader
subHeaderComponent={subHeaderComponent}
subHeaderAlign={Alignment.LEFT}
expandableRows
expandableRowsComponent={ExpandedComponent}
dense
highlightOnHover
fixedHeader
persistTableHead
responsive
direction={Direction.LTR}
//customStyles={customStyles}
//theme="dark"
//className={styleDataTable.rdt_TableRow}
/>
</div>
Notice that width: 94vw which will make the table fit on the 94% of the visible area.
This way it becomes scrollable from left to right and the data table wont overflow and wont disappear.
Not sure if there is a better solution but for now this works alright.
Related
Using React, I'm creating a page with 2 columns, something like
const renderAst = new rehypeReact({
createElement: React.createElement
}).Compiler;
<div {...styles.parentContainer}>
<div {...styles.navContainer}> navigation stuff </div>
<div {...styles.mainContainer}> {renderAst(htmlAst)} </div>
<div>
parentContainer: css({
display: 'flex',
flexDirection: 'row',
maxWidth: `45rem`,
margin: `0 auto`,
padding: rhythm(1)
}),
navContainer: css({
paddingRight: rhythm(3 / 2)
}),
mainContainer: css({
marginTop: rhythm(3 / 2),
paddingTop: rhythm(3 / 2),
width: `100%`
}),
I'm writing content in markdown, and converting it to html, then rehype-react is converting that html to react components. However, for some reason, the main container width extends past the allotted width, and becomes the width of the parent container, rather than staying within the set bounds.
Here's a screenshot of the chrome inspect tools on this layout
Interestingly, I don't see this issue if I simply replace renderAst with some my own react components.
Please let me know what I can do to fix this, thanks!
I am building a project based on this React Template.
In one of the componenets I have a Select List and under it there's a Card element.
The problem is that when I click on the list the items appear under the card element as you see below:
I had a feeling this was caused by the CSS code of the template itself that configures the card to appear over all other elements.
So what I did is I created a new react project with:
npx create-react-app
And my suspicion was right.
I copied basically the same code:
const selectStyles = {
control: (styles) => ({ ...styles, backgroundColor: "white" }),
option: (styles) => {
return {
...styles,
backgroundColor: "green",
"z-index": -5,
};
},
};
export default class App extends Component {
render() {
return (
<Fragment>
<Select
className="basic-single"
classNamePrefix="select"
defaultValue={colourOptions[0]}
name="color"
options={colourOptions}
styles={selectStyles}
/>
<Card
style={{
position: "absolute",
"background-color": "red",
"z-index": 5,
}}
>
<CardImg
top
width="100%"
src="/assets/318x180.svg"
alt="Card image cap"
/>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Fragment>
);
}
}
And the select items appear ABOVE the card:
The card is colored in red.
CONCLUSION: The problem is caused by the card css code of the template.
As you see, I tried with different configurations with the z-index attribute, but to no avail.
Any idea how to fix this?
The problem is with the z-index and position, whichever content you want to show in the top should have higher z-index value.
Try giving the select dropdown the high values compared to card.
Try removing both css attributes position: absolute and z-index if it is not needed. Position absolute is only used when to need to move the content to wherever you want to the respective relative parent container. So if you are just practicing and not doing design try to remove both.
I am working on a website and on some pages there are very few contents like login page and footer don't reach to bottom, That's why I want main section to cover remaining space if there is any and work like normal if overflow. Basically I want it to work like min-height. I tried using min-height with 100vh and 100% but no desired result.
You can use a custom min height.
<div class="min-h-60">
content...
</div>
In our tailwind config file, you should extend minHeight:
module.exports = {
purge: [],
theme: {
extend: {
minHeight: {
'60': '15rem'
}
}
},
variants: {},
plugins: []
}
I am using the Material ui's tabs and was able to make changes to the Tab's indicator. However, I am trying to reduce the width of the indicator to some fix width for each tab using styles. But it seems the indicator are positioned to left with some calculated value, and giving it a width doesn’t center align the indicator. Couldn't find appropriate solutions, kindly help me out. Here's the editable CodeSandbox.
Find below snippets:
Default fullwidth tabs. Indicator taking full width of the base button:
Width of indicator fixed, but not aligned to center below the tab label.
Based on the docs, you need to attach a span element as the children of the indicator (using TabIndicatorProps). Then you could treat the indicator as a flex container, the span as a flex item with some fixed width.
Here's the component part:
<Tabs
{...other}
classes={{
root: className,
flexContainer: "flexContainer",
indicator: "indicator"
}}
variant="fullWidth"
TabIndicatorProps={{ children: <span /> }}
centered
/>
Here's the styling part:
"& .indicator": {
display: "flex",
justifyContent: "center",
backgroundColor: "transparent",
"& > span": {
maxWidth: 40,
width: "100%",
backgroundColor: "white"
}
}
Demo code
I have a grid inside my viewport. Code is as shown below.
By giving a fixed width to my grid, I do not get a horizontal scrollbar for my grid. autoScroll = true dosent help either.
If I remove the fixed width given to my grid or give a layout fixed to my viewport I am not able to resize my grid columns.
I want to be able to be able to resize my columns at will and also need an horizontal scroll bar.
Columns are added dynamically and minWidth, flex and maxWidth have been set for each of the columns
What can be done? Please help
Viewport.js
Ext.define('MyView.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:['MyView.view.gridPanel'],
layout : 'fit',
items:[{
//width:7000,
xtype:'gridPanel'
}]
});
gridPanel.js
Ext.define('MyView.view.gridPanel', {
extend: 'Ext.grid.Panel',
plugins: 'gridfilters',
alias: 'widget.gridPanel',
id: 'tests-view',
name:'graphPanel',
title: 'Tests',
emptyText: '',
store: 'MyView.store.settingStore',
pageSize:10,
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'MyView.store.settingStore',
dock: 'bottom',
displayInfo: true
}],
filters :[],
//features:[],
enableLocking:true,
columns:[], //Columns are loaded dynamically
viewConfig: {
stripeRows: true,
plugins: {
dragGroup: 'user-dd',
enableDrop: false,
ptype: 'gridviewdragdrop'
//forceFit:true
}
},
columnLines: true,
frame: true
});
Scroll doesn't appear, because you have set grid width to 7000px. Usually scroll appears in grid when columns width is greater than grid width. Use layout to fit grid in parent container, or adjust its width, and then scroll should appear.