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!
Related
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.
I have learned react native and started developing a basic payment app . I am using flex to arrange elements inside the screen. Flex layout is consistent across all devices, but if I apply style to some components inside flux , it is not consistent across devices.
For example I have added a drop down component (Expiry Month) inside a view which is inside flex and added margin top as 25 px . If I open the app in Iphone 8 plus, it is displaying as expected, but if I open it in Iphone 8 it is touching the component above it (Even I tried changing the unit to percentage instead of pixels but still the same behavior) . I am not sure why the style is not responsive across multiple devices , can someone please guide me on how to make the styling responsive.
Please take a look at the below screenshots and code snippet . Thank you !!!
Iphone 8 Plus
Iphone 8
Code Snippet of the element
<View
style={{
flex: 0.1,
flexDirection: "row",
}}
>
<RNPickerSelect
items={CardExpiryMonth.getMonth()}
style={{
...pickerSelectStyles1,
placeholder: { color: "grey", fontSize: 15, fontFamily: myFont },
iconContainer: {
top: 35,
},
}}
placeholder={{
label: "Exp Month",
color: "green",
}}
placeholderTextColor="red"
useNativeAndroidPickerStyle={false}
textInputProps={{ underlineColor: "yellow" }}
Icon={() => {
return <Ionicons name="md-arrow-down" size={24} color="gray" />;
}}
/>
</View>
const pickerSelectStyles1 = StyleSheet.create({
inputIOS: {
fontSize: 16,
height: 50,
paddingVertical: 12,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: "gray",
borderRadius: 4,
color: "black",
paddingRight: 30, // to ensure the text is never behind the icon
width: 130,
top: 25,
left: 8 }
I think the easiest way to do is give margin to your parent view. So the code would be.
<View
style={{
marginTop: 25, // For only iOS (Platform.OS === 'ios') ? 25 : 0,
flex: 0.1,
flexDirection: "row",
}}
>
<RNPickerSelect
// your code
/>
</View>
If you want to do changes in RNPickerSelect's style SO as you can check given example here you are using it wrong you are putting inputIOS into styles that become something like below code.
<RNPickerSelect
style={{ inputIOS: {...your style} }} // this is wrong
/>
inputIOS properties should be direct properties of style.
Also find one more thing that you used top: 25, for giving margin top top property use in case of absolute position. So, Please confirm RNPickerSelect using absolute position otherwise use marginTop: 25, instead.
Let me know If you have any more query.
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
Disclaimer:
I'm new to ReactJS, and web-development as a whole. Did my best to research before, and did not find an answer.
I'm probably missing something simple, but can't figure it out - so sorry if this question's answer is a one liner "How-Did-I-Miss-That' sort of answer.
Feel free to comment/answer with best practices I missed, or things I can improve in this question.
Thanks is advance to anybody that reads this!
My Own Research:
Float 3 Divs - I did not need the z-axis property, as non of my divs are on top of the other.
3 Divs LTR - Talks about 3 divs aligned horizontally, not vertically. The same method did not work for me in the vertical axis.
3 Divs LTR #2 - This talks about flex, so I tried it too. In the right direction, but not enough.
Vertical Align etc - could not make it happen with this solution either.
(5... 1000) A bunch of other first-second-third results in Google search queries like: "ReactJS vertical 3 divs" and the likes.
Actual Question:
Trying to make a basic outline of a mockup web-page, which consists of 3 divs:
Header Div - In The Top, Not Sticky (=when you y axis scroll, it does not appear).
Content Div - In The Middle, Y/X Axis Scrollable.
Bottom Nav Div - In The Bottom, Sticky.
Mockup:
My Current Status:
Can't make my bottom-menu div to appear. it's stuck under the frame.
Can't be sure my bottom-menu div is actually sticky because of the point above.
The contents tab div has no margin from the Header div, which makes the upper end of the text in it - unreadble.
My Code:
Did a lot of back-and-fourth on this, and this is the closest version I have for this simple (yet - not working!) task:
App.jsx
import React from "react";
import BottomMenu from "../BottomMenu/BottomMenu";
import Header from "../Header/Header";
import ContentTab from "../ContentTab/ContentTab";
const App = () => {
return (
<div style = {{display: "flex", flexDirection: "column", overflow: "visible",
direction: "rtl"}}>
<Header/>
<ContentTab />
<BottomMenu />
</div>
);
};
export default App;
Header.jsx
import React from "react";
import { Toolbar, AppBar } from "#material-ui/core";
import Typography from '#material-ui/core/Typography';
const Header = props => {
return (
<div>
<AppBar color="primary" style={{alignItems: 'center'}}>
<Toolbar>
<Typography>
Test
</Typography>
</Toolbar>
</AppBar>
</div>
);
};
export default Header;
ContentTab.jsx
import React from "react";
import Typography from "#material-ui/core/Typography";
import Paper from "#material-ui/core/Paper";
const ContentTab = (props) => {
return (
<div style={{height: "80%", width: "100%"}}>
<Paper align="center" elevation={3}>
<Typography paragraph>First</Typography>
<Typography paragraph>TextTab</Typography>
<Typography paragraph>Last</Typography>
</Paper>
</div>
);
};
export default ContentTab;
BottomMenu.jsx
import React from "react";
import BottomNavigation from "#material-ui/core/BottomNavigation";
import BottomNavigationAction from "#material-ui/core/BottomNavigationAction";
import RestoreIcon from "#material-ui/icons/Restore";
import FavoriteIcon from "#material-ui/icons/Favorite";
import LocationOnIcon from "#material-ui/icons/LocationOn";
import { Toolbar, AppBar } from "#material-ui/core";
export default function BottomMenu() {
const [value, setValue] = React.useState(0);
return (
<div style={{
position: "fixed", bottom: "0", width: "100%", height: "10%"}}>
<AppBar
style={{ background: '#FFFFFF', alignItems: "center" }}
>
<Toolbar>
<BottomNavigation
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
>
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>
</Toolbar>
</AppBar>
</div>
);
}
Actually; the issue is that you're using the Material-UI component AppBar. If this were just a regular DIV tag then you could position it the way you want. To use the AppBar component and make it do what you what then this should do the trick:
remove the outer DIV on the BottomMenu component
style the BottomMenu component's appBar with top of auto and bottom of 0 and give it a position property of fixed.
additionally, style the Header component's appBar with position of static.
this:
in BottomMenu:
<AppBar
position="fixed"
style={{
top: "auto",
bottom: "0",
background: "#FFFFFF",
alignItems: "center"
}}
>
in Header:
<AppBar
position="static"
color="primary"
style={{ alignItems: "center" }}
>
Here's a link to the docs that show it doing what you want:
https://material-ui.com/components/app-bar/
and here's a link to a code sandbox with your code.
https://codesandbox.io/s/material-ui-with-bottom-appbar-ugk31
In general, what I've found with Material-UI is that some of their components have positioning logic built into them and you need to use their properties for positioning instead of trying to do it with CSS.
I am using react-monaco-editor but I am not able to make it responsive. It takes a fixed height and width in the components. If I change the screen size, the width stays fixed.
<MonacoEditor
width="1200"
height="600"
language="typescript"
theme="vs-dark"
defaultValue="//type your code here"
value={code}
options={options}
onChange={this.onChange}
editorDidMount={this.editorDidMount}
className='editor1'
/>
If I remove the width and height from the component, the component diminishes. I tried overriding the component className with flex. But it doesn't seem to work well.
.react-monaco-editor-container {
flex: 2;
}
Can you help me with the CSS to make this responsive?
Simply in options set automaticLayout: true
You could add a resize handler in order to figure out the available space for your editor container and pass it to your Monaco Editor right away.
There are as well different libraries that assist you with that:
https://www.npmjs.com/package/react-resize-detector
Here you can find a Sandbox example with using the library above:
https://codesandbox.io/s/vibrant-goldwasser-3d8j7?fontsize=14&hidenavigation=1&theme=dark
import React from "react";
import { withResizeDetector } from "react-resize-detector";
const Editor = ({ width, height }) => (
<div
style={{
background: "grey",
height: height,
width: width
}}
>
Editor container with {width} x {height}
</div>
);
export default withResizeDetector(Editor);
After a few things didn't work with CSS, I tried javascript to solve this
updateDimensions = () => {
this.setState({
width: window.innerWidth - 501,
height: window.innerHeight - 50,
});
};
componentDidMount() {
window.addEventListener("resize", this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
Storing the height and width in the state and changing on resize event did the job.