Rendering a list of titles and trying to give them width or flex but it's not working default width of 133px is used by tag but works on static data only min-width is working. How can I use flex or width to my tag?
import React, { Component } from "react";
import { NavLink, BrowserRouter } from "react-router-dom";
import "./chooseCategory.scss";
import { categoryList } from "./categoryList";
import axios from "axios";
class chooseCategory extends Component {
state = {
recdata: [],
};
async componentDidMount() {
let data = await axios.get(`https://jsonplaceholder.typicode.com/posts`);
this.setState({
recdata: data.data,
});
}
render() {
console.log(this.state.recdata);
return (
<div className="chooseCategory">
{this.state.recdata.map((title) => (
<p className="categoryLink">{title.title}</p>
))}
</div>
);
}
}
export default chooseCategory;
.chooseCategory {
display: flex;
flex-flow: row nowrap;
overflow: scroll;
.categoryLink {
width: 200px;
margin-right: 10px;
border: 1px solid black;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
You should add flex-shrink: 0 to .categoryLink.
Here is a working example: https://codesandbox.io/s/snowy-sun-elo7d?file=/src/App.js
Related
I am making a personal website. The landing page is the first component. The second page is the About component but it is not rendering below the landing component. It is appearing at the top.
App.js file:
import "./App.css";
import Landing from "./components/Landing/Landing";
import About from "./components/About/About";
function App() {
return (
<div className="App">
<Landing/>
<About/>
</div>
);
}
export default App;
**App.css file: **
.App{
display: flex;
flex-direction: column;
}
body{
overflow-x: hidden;
}
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-track{
background: black;
border-radius: 1ex;
}
::-webkit-scrollbar-thumb{
background: #427898;
border-radius: 1ex;
}
::-webkit-scrollbar-corner {
background: black;
}
a{
text-decoration: none;
color: inherit
}
About.jsx file:
import React from 'react'
import css from "./About.module.css"
const About = () => {
return (
<div style={{ color: 'white' }}>About</div>
)
}
export default About
I have already tried creating a container class for About and then changing the display in my About.module.css file but the About text still remains at the top of the page unseen.This is the landing page and as you can see I want the About component to now be below the landing page as you scroll down.
I'm following this react-flip-toolkit tutorial in order to animate a<div> expansion in a component:
This is the tutorial code:
import React, { useState } from 'react'
import { Flipper, Flipped } from 'react-flip-toolkit'
const AnimatedSquare = () => {
const [fullScreen, setFullScreen] = useState(false)
const toggleFullScreen = () => setFullScreen(prevState => !prevState)
return (
<Flipper flipKey={fullScreen}>
<Flipped flipId="square">
<div
className={fullScreen ? 'full-screen-square' : 'square'}
onClick={toggleFullScreen}
/>
</Flipped>
</Flipper>
)
}
My project however, unlike the functional Component example above, uses Class components, like so:
class Field extends Component {
constructor(props) {
super(props);
this.state = {
players:[],
};
}
getPlayersByPosition = (players, position) => {
return players.filter((player) => player.position === position);
};
render() {
const { players } = this.props;
if(players){
return (
<div className="back">
<div className="field-wrapper" >
<Output output={this.props.strategy} />
// this is the target div I want to expand
<div className="row">
{this.getPlayersByPosition(players, 5).map((player,i) => (
<Position key={i} >{player.name}</Position>
))}
</div>
</div>
</div>
);
}else{
return null}
}
}
export default Field;
How can I declare AnimatedSquare() in my Class component and encapsulate my target <div> above within <Flipper/> and <Flipped/>?
I've converted the example to a class based component for you. You should be able to work the rest out from this example:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Flipped, Flipper } from "react-flip-toolkit";
import "./styles.css";
class AnimatedSquare extends Component {
state = {
fullScreen: false
};
toggleFullScreen() {
this.setState({ fullScreen: !this.state.fullScreen });
}
render() {
const { fullScreen } = this.state;
return (
<Flipper flipKey={fullScreen}>
<Flipped flipId="square">
<div
className={fullScreen ? "full-screen-square" : "square"}
onClick={this.toggleFullScreen.bind(this)}
/>
</Flipped>
</Flipper>
);
}
}
ReactDOM.render(<AnimatedSquare />, document.querySelector("#root"));
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square {
width: 5rem;
height: 5rem;
cursor: pointer;
background-image: linear-gradient(
45deg,
rgb(121, 113, 234),
rgb(97, 71, 182)
);
}
.full-screen-square {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
background-image: linear-gradient(
45deg,
rgb(121, 113, 234),
rgb(97, 71, 182)
);
}
I want to show these three images from my Parent component and i am trying to remove the line after Summary breadcrumb .
trying to remove last line
This is my root Class of parent and trying to show only three images but not the line.
This is BCrumb.css file
.root {
color: #fff;
font-size: 12px;
display: flex;
padding: 1px;
justify-content: initial;
margin-left: 1%;
}
This is BCrumb.tsx class
import * as React from "react";
import classes from "./BCrumb.css";
interface IBCrumbProps {
children?: any;
}
class BCrumb extends React.Component<IBCrumbProps, {}> {
render() {
console.log("Children>>>>"+React.Children.count(this.props.children));
return <div className={classes.root}>
{React.Children.map(this.props.children, (child , i) => {
// here i am trying to hide the line after summary but i //dont know how to implement it here
if (i == 3) return
return child
})}
</div>;
}
}
export default BCrumb;
BCItems.css file
.root {
color: #297848;
font-size: 12px;
text-align: center;
margin-left: 13%;
display: flex;
justify-content: space-evenly;
}
.step-title {
color: #297848;
font-size: 12px;
text-align: center;
}
.step-icon.active {
height: 28px;
margin-bottom: 3px;
}
div.disabled {
height: 28px;
opacity: 0.5;
pointer-events: none;
}
.stepconnector {
position: fixed;
height: 1.7px;
width: 3.6%;
margin-top: 2%;
background-color: #ccc;
margin-left: 3.6%;
display: block;
}
BCItems.tsx class
import * as React from "react";
import classes from "./BCItem.css";
import classnames from "classnames";
interface IBCItemProps{
children?: any;
active?: boolean;
inactiveSrc?: boolean;
activeSrc?: boolean;
}
class BCItems extends React.Component<IBCItemProps, {}> {
render() {
const { children, active, activeSrc, inactiveSrc, label } = this.props;
const className = classnames({
[classes.root]: true,
[classes.disabled]: !active
});
//var i = ;
return (
<div className={className}>
<div>
{active ? (
<img className={classes.img1} src={activeSrc} />
) : (
<img className={classes.img1} src={inactiveSrc} />
)}
<p className={classes.labelText}>{label}</p>
</div>
<div className={classes.stepconnector}></div>
</div>
);
}
}
export default BCItems;
This is the class that showing BCrumb items
import * as React from "react";
import BCItems from "../../components/BCrumb/BCItems";
import BCrumb from "../../components/BCrumb/BCrumb";
import Step1_1 from "../../../assets/step-1-active.png";
import Step1_0 from "../../../assets/step-1.png";
import step2_1 from "../../../assets/step-2-active.png";
import step2_0 from "../../../assets/step-2.png";
import step3_1 from "../../../assets/step-3-active.png";
import step3_0 from "../../../assets/step-3.png";
import classes from "./HomePage.css";
class HomePage extends React.Component {
constructor(props) {
super(props);
this.state = { setAct1: true, setAct2: false };
}
render() {
const styles = {
containerStyle: {
paddingLeft: 37
}
};
const { containerStyle } = styles;
return (
<div>
<BCrumb>
<BCItems
active={true}
activeSrc={Step1_1}
inactiveSrc={Step1_0}
label="Profile"
/>
<BCItems
active={true}
activeSrc={Step2_1}
inactiveSrc={Step2_0}
label="DashBoard"
/>
<BCItems
active={true}
activeSrc={Step3_1}
inactiveSrc={Step3_0}
label="Summary"
/>
</BCrumb>
</div>
);
}
}
export default HomePage;
I dont know how to hide the last item of css element (line) from the parent class using React.Children.map
Use last-child, a CSS selector:
.root:last-child .stepconnector {
display: none !important;
}
I have button.js:
import React from "react";
import styled from "styled-components";
const StyledButton = styled.TouchableOpacity`
border: 1px solid #fff;
border-radius: 10px;
padding-horizontal: 10px;
padding-vertical: 5px;
`;
const StyledButtonText = styled.Text`
color: #fff;
font-size: 12;
`;
export default ({ children }) => (
<StyledButton>
<StyledButtonText>{children.toUpperCase()}</StyledButtonText>
</StyledButton>
);
And its usage:
import React, { Component } from "react";
import styled from "styled-components";
import Button from "./button";
const StyledNavView = styled.View`
justify-content: flex-end;
flex-direction: row;
background: #000;
padding-horizontal: 10px;
padding-vertical: 10px;
`;
const StyledTodayButton = styled(Button)`
margin: 10px;
`;
export default class Nav extends Component {
render() {
return (
<StyledNavView>
<StyledTodayButton>Today</StyledTodayButton>
<Button>Previous</Button>
</StyledNavView>
);
}
}
Problem is, the margin I apply in StyledTodayButton is actually never applied. Have I misunderstood extending styles in Styled Components?
There are 2 ways to make it work:
extend button style:
const StyledTodayButton = Button.extend'margin: 10px'
pass prop to button:
const Button = styled.button'
/* ...your props */
margin: ${props => props.withMargin ? '10px' : '0px'};
and then call in render method you can invoke it with:
<Button withMargin {...restProps} />
I'm facing an issue with material-ui drawer. I've changed the width of the drawer container which causes a a problem . The drawer remains a little inside the page and visible but I don't want to make it visible on the page while I haven't clicked the button. It might be having an issue with the transform attribute now.
So I changed it to transform: translate(350px, 0px) but then I'm getting another issue, that is if I am clicking the button the drawer is not showing up. Any help on this thing ??
I have got the solution and edited the code.
I've created a Demo here => Have a look
Also shared the code below:
index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
class App extends Component {
constructor() {
super();
this.state = {
openDrawer: false
};
}
toggleDrawer() {
this.setState({
openDrawer: !this.state.openDrawer
});
}
render() {
return (
<MuiThemeProvider>
<div>
<button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
<Drawer
open={this.state.openDrawer}
containerClassName={!this.state.openDrawer? "hide-drawer": "show-drawer" }
openSecondary={true}
docked={true}
>
<div className="drawer-title-div">
<h4 className="drawer-title-text">It's my drawer</h4>
</div>
</Drawer>
</div>
</MuiThemeProvider>
);
}
}
render(<App />, document.getElementById('root'));
style.css
h1, p {
font-family: Lato;
}
.show-drawer {
top: 47px !important;
text-align: left !important;
width: 80% !important;
transform: translate(0%, 0px) !important;
}
.hide-drawer {
top: 47px !important;
text-align: left !important;
width: 80% !important;
transform: translate(100%, 0px) !important;
}
/* .drawer-side-drawer:focus {
top: 47px !important;
text-align: left !important;
width: 350px !important;
transform: translate(0px, 0px) !important;
} */
.drawer-title-div {
display: inline-block;
width: 100%;
background: #F2F8FB;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24);
}
.drawer-title-text {
display: inline-block;
margin-left: 16px;
margin-top: 16px;
margin-bottom: 16px;
color: #484848;
font-family: Muli;
font-size: 16px;
font-weight: 600;
}
For mui version 5, you have to use the PaperProps prop like so:
<Drawer
PaperProps={{
sx: { width: "90%" },
}}
>{...Child elements here}</Drawer>
you can simply add this to index.css
.MuiDrawer-paper {
width: 60% !important;
}
#media (max-width: 1200px) {
.MuiDrawer-paper {
width: 100% !important;
}
}
Just add PaperProps={{ style: { width: '25%' } }} to your MUI Drawer.
Most Probably it will work for everyone.
You can try adding a toggle class and you can get rid of the transform.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
class App extends Component {
constructor() {
super();
this.state = {
openDrawer: false
};
}
toggleDrawer() {
this.setState({
openDrawer: !this.state.openDrawer
});
}
render() {
return (
<MuiThemeProvider>
<div>
<button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
<Drawer containerClassName={!this.state.openDrawer ? "hide-drawer": "show-drawer"}
open={this.state.openDrawer}
openSecondary={true}
docked={true}
>
<div className="drawer-title-div">
<h4 className="drawer-title-text">It's my drawer</h4>
</div>
</Drawer>
</div>
</MuiThemeProvider>
);
}
}
render(<App />, document.getElementById('root'));
You can use window.innerWidth as width: 100%:
<Drawer ...>
<div style={{width: window.innerWidth * 0.25}}>
...
</div>
</Drawer>
One way to solve this issue is by getting the parent width:
const parentRef = useRef<HTMLDivElement>(null);
<Box
ref={parentRef}
>
<Drawer
PaperProps={{
sx: {
width: parentRef?.current?.clientWidth || 0,
},
}}
// .... etc
</Drawer>
</Box>
One way to solve this issue is by getting the parent width:
const parentRef = useRef<HTMLDivElement>(null);
<Box
ref={parentRef}
>
<Drawer
PaperProps={{
sx: {
width: parentRef?.current?.clientWidth || 0,
},
}}
>
// content goes here
</Drawer>
</Box>
Drawer-Material-UI If you look at the link.. you will find Drawer properties..
width (union: string number) [default : null] The width of the Drawer in pixels or
percentage in string format ex. 50% to fill half of the window or 100%
and so on. Defaults to using the values from theme.
so just update the tag with width and you are good to go,
<Drawer width="50%"></Drawer>
Check it here..
The drawer width is not matching the theme drawer width which was causing the problem.. not the transform CSS attribute.
Just a different approach ^^
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Responsive from 'react-responsive-decorator'; // This decorator allows using the library as a decorator.
#Responsive
class App extends Component {
constructor() {
super();
this.state = {
openDrawer: false,
width:350
};
}
// Update for kinda media query thing
componentDidMount() {
this.props.media({ minWidth: 768 }, () => {
this.setState({
width: 350
});
});
this.props.media({ maxWidth: 768 }, () => {
this.setState({
width: 150
});
});
}
toggleDrawer() {
this.setState({
openDrawer: !this.state.openDrawer
});
}
render() {
return (
<MuiThemeProvider>
<div>
<button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
<Drawer width={this.state.width} //<- Update
open={this.state.openDrawer}
containerClassName="drawer-side-drawer"
openSecondary={true}
docked={true}
>
<div className="drawer-title-div">
<h4 className="drawer-title-text">It's my drawer</h4>
</div>
</Drawer>
</div>
</MuiThemeProvider>
);
}
}
render(<App />, document.getElementById('root'));
I had the same problem.
you just have to add the PaperProps to your drawer