I'm using react-bootstrap in my project. In the below code I'm trying to add background-color to card.
=> js file
import React from "react";
import "../assets/css/material-dashboard.css";
import { Accordion, Button, Card } from "react-bootstrap";
import { Header, Container } from "semantic-ui-react";
import TabContent from "./TabContent";
import SubmitButton from "./SubmitButton";
import "../../src/assets/css/collapse.css";
const AddMock = () => {
return (
<div class="row">
<Accordion style={{ paddingLeft: "32px" }}>
<Card className="collapseStyle">
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Options
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<Container>
<Header as="h3">Hierarchy</Header>
<TabContent />
<SubmitButton />
</Container>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
};
export default AddMock;
This is the style I'm referring to,
=> collapse.css
.card .card-header .collapseStyle {
background-color: cornflowerblue;
}
It seems like the card is not actually using the custom CSS I have assigned to it. May I know the best practice to add custom style to react-bootstrap components?
You've added the className to the card, so the CSS selector will be:
.card.collapseStyle .card-header {
background-color: cornflowerblue;
}
Related
I have a React webapp with Ant design component framework version 4.
I tried to use this example from Antd docs in my webapp:
https://codesandbox.io/s/ymspt
But I don't get the same result when I use the code in my webapp.
This is how it looks like in my app
import { MenuFoldOutlined, MenuUnfoldOutlined, UploadOutlined, UserOutlined, VideoCameraAddOutlined } from "#ant-design/icons";
import { Layout, Menu, Space } from "antd";
import { Content, Footer, Header } from "antd/lib/layout/layout";
import Sider from "antd/lib/layout/Sider";
import React, { useState } from "react";
import { logOut } from "../firebase";
function Lineups() {
const [collapsed, setCollapsed] = useState(false);
const [logoText, setLogoText] = useState("TEAMTAC");
const toggle = () => {
setCollapsed(!collapsed);
collapsed ? setLogoText("TEAMTAC") : setLogoText("TT")
};
const signOutFirebase = async () => {
await logOut();
}
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider collapsible collapsed={collapsed} onCollapse={toggle}>
<h2 style={{textAlign:"center", marginTop: 15}}>{logoText}</h2>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraAddOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header style={{ padding: 5 }}>
Header
</Header>
<Content
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
}}
>
Content
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>
)
}
export default Lineups;
I dont have any extra css or whatever.
How come that I don't get the same result?
Problem were the components which Ive imported.
I did it the wrong way.
So instead of
import { Content, Footer, Header } from "antd/lib/layout/layout";
I had to do
import { Layout } from "antd";
...
const { Header, Footer, Sider, Content } = Layout;
I need to create a responsive React application using JavaScript that will show a list of cards on the page as pictured below. I'm fairly new to React and am not really sure where to begin with the layout. Currently, I have created a few reusable components for each portion of the app that I believe need to be added. These are the main container that will house every other component, the toolbar, sidebar, main card container that will house the cards in the center, and the footer. I'm not even sure if I need the main container component, maybe I can just use divs to house all the other components? Any tips? I can clarify and provide more details if needed. Thank you.
you can use css flex with inline-block,
index.js
import React from "react";
import "./style.css";
export default function App() {
return (
<div>
<div className="rowA col-md-4">
<div>A</div>
<div>B</div>
</div>
<div className="rowA clom-md-4">
<div>C</div>
<div>D</div>
</div>
<div className="rowA">
<div>E</div>
<div>F</div>
</div>
</div>
);
}
styles.css
.rowA {
display: flex;
flex-direction: row;
width: 100%;
}
.rowA div {
display: inline-block;
text-align: center;
}
my code for same design layout,
i used reactstrap for desgning,
Application code found here
import React from "react";
import "./style.css";
import "bootstrap/dist/css/bootstrap.css";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button,
CardGroup,
CardBody,
CardImg,
Container,
Row,
Col,
CardFooter,
CardDeck
} from "reactstrap";
export default function App() {
return (
<div>
<Container>
<Row className="show-border">
<Col xs="8">
<Row>
<Col xs="6">
<Button variant="light">Add Card</Button>
</Col>
<Col xs="6">
<Button variant="light">Sort Card</Button>
</Col>
</Row>
<CardDeck className="show-border">
<Card>
<CardTitle>Title</CardTitle>
<CardText>This content is a little bit longer.</CardText>
<CardBody />
<CardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
</CardFooter>
</Card>
<Card>
<CardTitle>Title</CardTitle>
<CardText>This content is a little bit longer.</CardText>
<CardBody />
<CardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
</CardFooter>
</Card>
</CardDeck>
</Col>
<Col className="show-border" xs="4">
(Instructions...)
</Col>
</Row>
<Row className="show-border">
<Col xs="6">Footer</Col>
</Row>
</Container>
</div>
);
}
In Ant Design, the default color of a selected menu item is blue, but I want to change the color. Here's some of my code:
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
NavLink,
} from 'react-router-dom';
import { Layout, Menu } from 'antd';
import Create from './Create';
import Dashboard from './Dashboard';
import './layout.css';
const { Header, Footer, Sider, Content } = Layout;
const { Item } = Menu;
function LayoutPage() {
return (
<Router>
<Layout style={{ minHeight: '100vh' }}>
<Sider>
<Menu
theme='dark'
defaultSelectedKeys={['item1']}
mode='inline'
>
<Item key='item1' className='customclass'>
<NavLink to='/'>
<span>Dashboard</span>
</NavLink>
</Item>
<Item key='item2' className='customclass'>
<NavLink to='/create'>
<span>Create</span>
</NavLink>
</Item>
</Menu>
</Sider>
<Layout>
<Header style={{ padding: 0, background: '#EBF1FC' }} />
<Content
style={{
padding: 24,
background: '#EBF1FC',
minHeight: 280,
}}
>
<div style={{ padding: 24, background: '#EBF1FC', minHeight: 360 }}>
<Switch>
<Route exact path='/'>
<Dashboard />
</Route>
<Route path='/create'>
<Create />
</Route>
</Route>
</Switch>
</div>
</Content>
</Layout>
</Layout>
</Router>
);
}
export default LayoutPage;
.ant-menu.ant-menu-dark .ant-menu-item-selected.customclass {
background-color: '#B039CC';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.8.5/antd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
In the css file you can see me attempting this solution but weirdly it only works if the menu mode is 'horizontal'.
I also tried this method, in which I created my custom Menu component and overrode the ant-menu-item-selected property but that did not work either (i think it's because I also need to use the Item component, which I have to access using my custom Menu component).
.ant-menu-item-selected {
background-color: #B039CC !important;
}
add important
You say this method , it only works if the menu mode is 'horizontal', beacause .ant-menu-horizontal this statement only matches the horizontalmode...
you can remove the word horizontal,and tyr again.,like this:
.ant-menu > .ant-menu-item:hover,
.ant-menu > .ant-menu-submenu:hover,
.ant-menu > .ant-menu-item-active,
.ant-menu> .ant-menu-submenu-active,
.ant-menu > .ant-menu-item-open,
.ant-menu> .ant-menu-submenu-open,
.ant-menu > .ant-menu-item-selected,
.ant-menu > .ant-menu-submenu-selected {
color: red;
border-bottom: 2px solid red;
}
I am working on a building a general layout for a web app. I have hit a problem I am not sure how to solve.
My Grid looks as follows:
What I want is that the each section inside the card start at the same point.
For example, the icons are ok as each their tops are aligned.
The titles are also ok as their tops are aligned.
However, the content text is not ok, as the tops are not aligned amongst the three cards.
In addition, the learn more buttons should also be aligned, and ideally stuck to the bottom of the card. As can be seen they all sit at different heights.
My code looks as follows:
HomeGrid.jsx:
import React, { useState, useEffect, Fragment } from 'react'
import { useStyles } from '../styles'
import SimpleCard from '../card/SimpleCard'
import { Grid, Container, Paper } from '#material-ui/core'
import QuestionAnswerIcon from '#material-ui/icons/QuestionAnswer'
import FindInPageIcon from '#material-ui/icons/FindInPage'
import AccountBalanceWalletIcon from '#material-ui/icons/AccountBalanceWallet'
const HomeGrid = () => {
const classes = useStyles()
return (
<Container disableGutters className={classes.homeGridContainer}>
<Grid
alignItems="stretch"
alignContent="center"
justify="center"
wrap="wrap"
container
spacing={10}
>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<QuestionAnswerIcon fontSize={'large'} />}
title={'Speak'}
content={'Speaking to someone can help blah blah'}
></SimpleCard>
</Grid>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<FindInPageIcon fontSize={'large'} />}
title={'Finding someone like this example can be great'}
content={'Finding to someone can help blah blah'}
></SimpleCard>
</Grid>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<AccountBalanceWalletIcon fontSize={'large'} />}
title={'No Fees Here'}
content={'No Fees shalt find thou'}
></SimpleCard>
</Grid>
</Grid>
</Container>
)
}
export default HomeGrid
SimpleCard.jsx:
import React from 'react'
import { makeStyles } from '#material-ui/core/styles'
import Card from '#material-ui/core/Card'
import CardActions from '#material-ui/core/CardActions'
import CardContent from '#material-ui/core/CardContent'
import Button from '#material-ui/core/Button'
import Typography from '#material-ui/core/Typography'
import { CardActionArea, CardMedia } from '#material-ui/core'
import QuestionAnswerIcon from '#material-ui/icons/QuestionAnswer'
const useStyles = makeStyles({
simpleCard: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
})
const SimpleCard = (props) => {
const classes = useStyles()
return (
<Card style={{ height: '100%' }}>
<CardContent>
{props.icon}
<Typography variant="h6" component="h2">
{props.title}
</Typography>
<Typography variant="body1" component="p">
{props.content}
</Typography>
</CardContent>
<CardActions className={classes.actions}>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
)
}
export default SimpleCard
I already tried implementing this answer: enter link description here but as you can see it doesn't work.
Can someone please guide / help me out here?
using flex will solve the issue.
set flex style properties display:'flex', justiyContent:'space-between', flexDirection:'column' to Card component.
It'll shift buttons of all the Cards to the bottom of the card.
what is happening
I am trying to add the react bootstrap accordion component into the react bootstrap Modal component. it means, rendering Modal first and then inside that, trying to render the accordion component.
below is the code :
import React, { Component } from "react";
import Card from 'react-bootstrap/Card';
import Accordion from 'react-bootstrap/Accordion';
import "./de.css";
import Table from 'react-bootstrap/Table';
import ReactBootstrap, {
Navbar,
Nav,
NavItem,
Button,
Form,
FormControl,
NavDropdown
} from "react-bootstrap";
import Modal from 'react-bootstrap/Modal';
export default class Dev1 extends Component {
constructor() {
super();
this.toggleDetails= this.toggleDetails.bind(this);
this.toggleBats = this.toggleBats.bind(this);
this.state = {
name: "React",
bates: false,
details: false
};
}
toggleDetails(){
const currentState = this.state.details;
this.setState({ details: !currentState });
}
toggleBats(){
const currentStateBates = this.state.bates;
this.setState({ batches: !currentStateBates });
}
render() {
return <div>
<Nav.Link className="viewdetails" onClick={() => this.toggleDetails()}>View Details</Nav.Link>
<section>
<Modal
show={this.state.details}
onHide={this.toggleDetails}
dialogClassName="modal-90w"
backdrop="static"
keyboard={true}
>
<Modal.Header closeButton>
<Modal.Title>Welcome </Modal.Title>
</Modal.Header>
<Modal.Body>
<div>
<Accordion>
<Card className="accordian">
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
</Modal.Body>
</Modal>
</section>
</div>;
}
}
what is the issue
The behavior of the accordion component is not like sliding nut instead it is hide and show. in the react bootstrap accordion basic example , sliding is happening but in above code it is not. not able to get what is the issue. please suggest
An important part of what makes it slide is the transition implementation
.collapsing {
transition: height .35s ease;
}
It may have been overridden by one of your custom style sheets. It is hard to root out the problem in dev tools because that class I've mentioned is actually removed & added on the actual transition process (in a matter of less than 1 second) - so could either manually add that style to the DOM just to review it on dev tools or you would have to search your custom stylesheets for any rules that may have tampered with that.
You find here https://codesandbox.io/s/distracted-leakey-uqgy8?file=/src/App.js:1854-1896 a working example