is there anyway to configure layout inside nav / navbar ?
i want to divide a 3 cols with the same size
what i expected should be look like this
Here's my code
<Navbar fixed="bottom" bg="light" variant="light">
<Container>
<Row>
<Nav>
<Col sm>
<Nav.Link href="/communities">Browse Communities</Nav.Link>
</Col>
<Col sm >
<Nav.Link href="/tasks">Tasks</Nav.Link>
</Col>
<Col sm>
<Nav.Link href="/profile">Profile</Nav.Link>
</Col>
</Nav>
</Row>
</Container>
</Navbar>
The columns align to a 12-column grid system (uses flexbox), so if you want 3 columns to span the entire grid then each needs to "occupy" 4 columns.
React-Bootstrap Col
<Navbar fixed="bottom" bg="light" variant="light">
<Container>
<Row>
<Nav>
<Col sm={4}>
<Nav.Link href="/communities">Browse Communities</Nav.Link>
</Col>
<Col sm={4}>
<Nav.Link href="/tasks">Tasks</Nav.Link>
</Col>
<Col sm={4}>
<Nav.Link href="/profile">Profile</Nav.Link>
</Col>
</Nav>
</Row>
</Container>
</Navbar>
Try this way:
<Navbar fixed="bottom" bg="light" variant="light">
<Container>
<Row>
<Nav>
<Col sm={8}>
<Nav.Link href="/communities">Browse Communities</Nav.Link>
</Col>
<Col sm={8}>
<Nav.Link href="/tasks">Tasks</Nav.Link>
</Col>
<Col sm={8}>
<Nav.Link href="/profile">Profile</Nav.Link>
</Col>
</Nav>
</Row>
</Container>
</Navbar>
Related
I'm trying to create a feature that allows user to download pdf. I developed it using html2pdf.js + react. I manage to create the pdf content in tag but the content such as table, paragraph, etc. exceed the size of a4 paper, how can I fix this ?
here's my code:
{/*Create Invoice Preview */}
<Preview id={'invoice-template'} >
<h1>UD-SUPERJAYA </h1>
<p className="fontBold">Invoice #0178832</p>
<hr />
<Row>
<Col lg={6}>
<p className="fontBold">Invoiced to</p>
<p>Mdsada</p>
<p>Jalan Kalimantan No 29, Samarinda Kota, Kalimantan </p>
<p>Indonesia</p>
</Col>
<Col lg={6} className="text-end">
<p className="fontBold">Pay to</p>
<p>PT dsada</p> <br />
<p>NPWP: 94321310</p>
<p>No PKP: P330/W1PJ.131/9403129/KR0233129/99310</p>
<p>Tgl Pengukuhan: 17 Desember 2013</p>
<br/>
<p>Alamat:</p>
<p>Jalan Kalimantan No 29, US Kota, Jawa</p>
<p>Telp: 08322 3232 3212 </p>
</Col>
</Row>
<br />
<Row>
<Col lg={6}>
<p className="fontBold">Invoiced Date</p>
<p>16/10/2020</p>
</Col>
<Col lg={6} className="text-end">
<p className="fontBold">Payment Method</p>
<p>OVO</p>
</Col>
</Row>
</Preview>
<Row>
<Col lg={12} className="text-end fontMedium">
<Button onClick={()=>print('Invoice', 'invoice-template')} className="invoicebutton">Submit</Button>
</Col>
</Row>
I wanna download in PDF all my code inside my div in PDF . I tried a few possibilities but i always have a problem to do it .
This is what i need to download :
<div id="qrCodePdf" ref={ref}>
<Row className="backgroundTicket">
<Col>
<Row className="rowCode">
<Col>
<p className="titleName">
{localStorage.getItem("propsRestaurant")}
</p>
</Col>
<Col>
<div id="qrCodeDiv2" />
</Col>
<Col>
<img
src="/image/tipourboirePhrase.png"
className="tipPicture"
/>
</Col>
</Row>
</Col>
<Col>
<Row className="rowCode2">
<Col className="col2">
{" "}
<img src="/image/logoCode.png" className="tipPicture" />
</Col>
<Col className="col2">
<p>Juste pour un merci</p>
</Col>
</Row>
</Col>
</Row>
</div>
For the moment i used js pdf and HTML2Canvas but i always have error like ×
TypeError: Cannot read properties of null (reading 'toDataURL')
also my button
<button
className="buttonQrCode"
onClick={() => {
const canvas = document.querySelector("qrCodePdf canvas");
const image = canvas.toDataURL();
const element = document.createElement("a");
element.setAttribute("href", image);
element.setAttribute("download", "canvas.pdf");
document.body.appendChild(element);
element.click();
}}>
Télécharger le QR Code Ticket
</button>
import { exportComponentAsPDF } from "react-component-export-image";
<div id="qrCodePdf" ref={ref}>
<Row className="backgroundTicket">
<Col>
<Row className="rowCode">
<Col>
<p className="titleName">
{localStorage.getItem("propsRestaurant")}
</p>
</Col>
<Col>
<div id="qrCodeDiv2" />
</Col>
<Col>
<img
src="/image/tipourboirePhrase.png"
className="tipPicture"
/>
</Col>
</Row>
</Col>
<Col>
<Row className="rowCode2">
<Col className="col2">
{" "}
<img src="/image/logoCode.png" className="tipPicture" />
</Col>
<Col className="col2">
<p>Juste pour un merci</p>
</Col>
</Row>
</Col>
</Row>
</div>
<button
className="buttonQrCode"
onClick={() => {()=>exportComponentAsPDF(ref, { fileName: "FileName" })}>
Télécharger le QR Code Ticket
</button>
I am try to give full width to my container by passing props fluid="true" but it takes more than 100% width.
This is my code
<Container fluid="true" style={{backgroundColor:'#0086FF'}}>
<Row >
<Col>
</Col>
<Col>
<div>
<p>This is my division</p>
</div>
</Col>
<Col>
</Col>
</Row>
</Container>
I am using React Bootstrap and trying to loop through content which is in two separate columns like this:
<Container>
<Row>
{this.state.products.map(product => (
<Col md={8}>
<div className="title">{product.name}</div>
<div className="desc">{product.description}</div>
</Col>
<Col md={4}>
<div className="price">{product.price}</div>
</Col>
))}
</Row>
</Container>
I have my closing tags so not sure why I a getting the error?
The return of your map also needs to be wrapped in a containing tag, you can use React fragment tags <> https://reactjs.org/docs/fragments.html#short-syntax
<Container>
<Row>
{this.state.products.map(product => (
<>
<Col md={8}>
<div className="title">{product.name}</div>
<div className="desc">{product.description}</div>
</Col>
<Col md={4}>
<div className="price">{product.price}</div>
</Col>
</>
))}
</Row>
</Container>
Try this:
The problem is, your map on the products Array is returning two components of type Col, and React only accepts one returned element.
Explained here.
Also, <React.Fragment></React.Fragmint> Component Wrapper can also be written with this syntax: <></>
<Container>
<Row>
{this.state.products.map(product => (
<React.Fragment>
<Col md={8}>
<div className="title">{product.name}</div>
<div className="desc">{product.description}</div>
</Col>
<Col md={4}>
<div className="price">{product.price}</div>
</Col>
</React.Fragment>
))}
</Row>
</Container>
I'm new to React, so I apologize in advance. Here's my navbar component:
import React, { Component } from 'react';
import AuthModal from './modals/AuthModal'
import { Nav, NavItem, Navbar, NavDropdown, MenuItem } from 'react-bootstrap'
export default class MyNavbar extends Component {
render() {
return (
<Navbar inverse>
<Navbar.Header>
<Navbar.Brand>
<span className="logo">SITE</span>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav className="navleft">
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight className="navright">
<NavItem eventKey={1} href="#"><AuthModal/></NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
I need my nav to look like:
It's close:
Except, "Sign Up" and "Log In" appear to be one button currently. They need to be 2 separate buttons.
In my actual modal, I have
import React, { Component } from 'react'
import { Button, Modal, OverlayTrigger, Popover, Tooltip, Nav, NavItem, Row, Col, FormGroup, FieldGroup, Checkbox } from 'react-bootstrap'
export default class AuthModal extends Component {
constructor() {
super();
this.render.bind(this);
this.state = {showModal: false}
}
close() {
this.setState({ showModal: false });
}
open() {
this.setState({ showModal: true });
}
handleSelect(eventKey) {
event.preventDefault();
alert(`selected ${eventKey}`);
}
render () {
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = (
<Tooltip id="modal-tooltip">
wow.
</Tooltip>
);
return (
<div>
<span onClick={this.open.bind(this)}>Sign Up</span>
<span onClick={this.open.bind(this)}>Log In</span>
<Modal show={this.state.showModal} onHide={this.close.bind(this)}>
<Modal.Body>
<Row>
<Col md={12}>
<Nav bsStyle='pills' activeKey={this.eventKey} onSelect={this.handleSelect}>
<NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Log In</span></NavItem>
<NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Sign Up</span></NavItem>
</Nav>
</Col>
</Row>
<Row className='top-space' >
<form>
<FormGroup >
<Row>
<Col md={12}>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email"/>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password"/>
</Col>
</Row>
<Row className='top-space'>
<Col md={5} mdOffset={1}>
<Checkbox className="checkbox-login"> Remember Me </Checkbox>
</Col>
<Col md={6} className='forgot-password'>
Forgot Password
</Col>
</Row>
<Row className='top-space'>
<Col md={10} mdOffset={1}>
<Button bsStyle="btn btn-black btn-block">Login</Button>
</Col>
</Row>
</FormGroup>
</form>
</Row>
<hr></hr>
<Row>
<Col md={12} className="text-center">
Login with blah
</Col>
</Row>
<Row className="top-space">
<Col md={6}>
<Button bsStyle='btn btn-block btn-danger'>
Google
</Button>
</Col>
<Col md={6}>
<Button bsStyle='btn btn-block btn-info'>
Facebook
</Button>
</Col>
</Row>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close.bind(this)}>Close</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
How can I have it so there's 2 separate links in the nav, and one modal. Depending on which one you click, the modal will either show the signup stuff or the sign in stuff?
You could modify your open() instance method to accept an argument that would tell which of the modal's content to show and it's value would be stored in the component's state with setState, in say a modalType key of the state object, and in your render() method you will want to have an if statement to check against this modalType state key to display the appropriate content inside your modal's body.
export default class AuthModal extends Component {
const MODAL_TYPE_LOGIN = 1, MODAL_TYPE_SIGNUP = 2;
constructor() {
super();
this.render.bind(this);
this.state = {
showModal: false
}
}
close() {
this.setState({ showModal: false });
}
open(modalType) {
this.setState({
showModal: true,
modalType: modalType
});
}
handleSelect(eventKey) {
event.preventDefault();
alert(`selected ${eventKey}`);
}
render () {
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = (
<Tooltip id="modal-tooltip">
wow.
</Tooltip>
);
return (
<div>
<span onClick={this.open.bind(this, MODAL_TYPE_SIGNUP)}>Sign Up</span>
<span onClick={this.open.bind(this, MODAL_TYPE_LOGIN)}>Log In</span>
<Modal show={this.state.showModal} onHide={this.close.bind(this)}>
<Modal.Body>
<Row>
<Col md={12}>
<Nav bsStyle='pills' activeKey={this.eventKey} onSelect={this.handleSelect}>
<NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Log In</span></NavItem>
<NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Sign Up</span></NavItem>
</Nav>
</Col>
</Row>
{this.state.modalType == MODAL_TYPE_LOGIN ? (
<Row className='top-space' >
<form>
<FormGroup >
<Row>
<Col md={12}>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email"/>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password"/>
</Col>
</Row>
<Row className='top-space'>
<Col md={5} mdOffset={1}>
<Checkbox className="checkbox-login"> Remember Me </Checkbox>
</Col>
<Col md={6} className='forgot-password'>
Forgot Password
</Col>
</Row>
<Row className='top-space'>
<Col md={10} mdOffset={1}>
<Button bsStyle="btn btn-black btn-block">Login</Button>
</Col>
</Row>
</FormGroup>
</form>
</Row>
<hr></hr>
<Row>
<Col md={12} className="text-center">
Login with blah
</Col>
</Row>
<Row className="top-space">
<Col md={6}>
<Button bsStyle='btn btn-block btn-danger'>
Google
</Button>
</Col>
<Col md={6}>
<Button bsStyle='btn btn-block btn-info'>
Facebook
</Button>
</Col>
</Row>
) : (
<div>Your sign-up form goes in here</div>
)}
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close.bind(this)}>Close</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
Though, ideally you would want to use redux so that you can control which type of modal to open from anywhere in your application, even if the components aren't related. Here is an interesting read and example of a modal logic implemented using redux.