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>
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>
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>
I'm using InputGroup component from reactstrap inside a modal. In Desktop view it looks fine but Mobile view Like this:
Code:
<Row>
<Col xs='2'>
<span>Price(s)</span>
</Col>
<Col xs='10'>
<PriceInput
cats={this.state.cats}
/>
</Col>
</Row>
price input and description fields are add as another component , so i can add more than one price to it
PriceInput Code
<Row>
<Col xs='3'>
<InputGroup
className={'form-group'}>
<InputGroupAddon addonType="prepend">{props.symbol}
</InputGroupAddon>
<Input
type="text"
placeholder='0.00'/>
</InputGroup>
</Col>
<Col xs='7'>
<Input
type="text"
placeholder='description'/>
</Col>
<Col xs='2'>
<Button >
<i color={'red'}
className='zmdi zmdi-delete'>
</i>
</Button>
</Col>
</Row>
How can i set Price and Price symbol wrap together?
change your xs props to xl it will work
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>