using react-bootstrap-table2 for table and search together as below
<ToolkitProvider
bootstrap4
keyField='id'
data={data}
columns={columns}
search
>
{props=>(
<>
<SearchBar {...props.searchProps} placeholder='Start typing'/>
<br/>
<BootstrapTable condensed bordered
id='bootstrap-tr'
{...props.baseProps}
noDataIndication={() => 'There is no data to display'}
loading={loading}
overlay={overlayFactory({ spinner: true })}
pagination={paginationFactory(options)}
// rowClasses={rowClasses}
// expandRow={expandRow}
/>
</>
)}
</ToolkitProvider>
search bar looks like this
i am using FontAwesome-5 icons and want to add fa-search icon to the react-bootstrap-table2-toolkit SearchBar, like below
any suggestions on this
got this resolved by added the below styling to the fa-search icon
css
#{yourid} {
position: absolute;
width: 2.375rem;
/*height: 2.375rem;*/
line-height: 2.375rem;
text-align: center;
color: #7B7B7B;
}
js file
<i className='fas fa-search' id='filtersubmit' style={{fontSize:'15px'}}/>
<SearchBar {...props.searchProps} placeholder=''/>
Related
Case Scenario: We are using the DropDownMenu Component of Atlaskit. And the trigger/title of the menu is 'Transaction' and by default, its color is 'Black'. And there are two options or DropDownItems named 'Count' and 'Amount'.
While any of the above options are selected the trigger/title colored would be updated to 'Blue' from the black.
<DropdownMenu trigger="Transaction">
</DropdownMenu>
Here the trigger title colour has to be updated.
Solution:
Firstly, we do need to update our state while any options from the dropdown menu are selected.
const [transactionValue, setTransactionValue] = useState("Count");
<div style={{ width: 260, paddingLeft: 10 }}>
{ transactionValue === "Count" ?
<div id="transaction_id_1" className="span.css-7no60z-ButtonBase">
<DropdownMenu trigger="Transaction">
<DropdownItemRadioGroup id="transaction">
<DropdownItemRadio
id="count"
onClick={() => setTransactionValue("Count") }
defaultSelected
>
Count
</DropdownItemRadio>
<DropdownItemRadio
id="amount"
onClick={() => setTransactionValue("Amount")}
>
Amount
</DropdownItemRadio>
</DropdownItemRadioGroup>
</DropdownMenu>
</div> :
<div id="transaction_id_2" className="span.css-7no60z-ButtonBase" >
<DropdownMenu trigger="Transaction">
<DropdownItemRadioGroup id="transaction">
<DropdownItemRadio
id="count"
onClick={() => setTransactionValue("Count") }
defaultSelected
>
Count
</DropdownItemRadio>
<DropdownItemRadio
id="amount"
onClick={() => setTransactionValue("Amount")}
>
Amount
</DropdownItemRadio>
</DropdownItemRadioGroup>
</DropdownMenu>
</div>
}
</div>
Then import the style file into your component class.
style file:
#transaction_id_1 :nth-child(1) span.css-7no60z-ButtonBase {
color: #2e2b2b;
font-weight: bold;
font-size: 16px;
}
#transaction_id_2 :nth-child(1) span.css-7no60z-ButtonBase {
color: #3aa7d9;
font-weight: bold;
font-size: 16px;
}
That's it. Now you could see that while selecting the 'Amount' option the trigger/title color is updated.
#HappyCoding :grinning:
I'm having issue adding icon in front of the header title as according to the Ant design collapse docs, we can only add expandIcon either on the right or left and I wonder if I can do both. But the icon I want to add is static which won't change when I clicked on panel to expand. Here's the picture to illustrate my CustomCollapse.
Here's my code of my collapse:
//styled
const StyledCollapse = styled(AntCollapse)`
&&& {
border: none;
border-radius: 0 10px 0 0;
box-shadow: none;
background-color: #0e0304;
.ant-collapse-content {
background-color: #0e0304;
color: #b5b5b6;
}
.ant-collapse-header {
color: #b5b5b6;
}
}
`;
_______________________________________________________
<StyledCollapse accordian activeKey={props.show ? key : []} onChange={combineFunc}>
<AntCollapse.Panel
{...props}
header={props.header}
showArrow={false}
bordered={false}
disabled={props.isFollowed}
key={props.panelID}
extra={
<span>
<div className={styles.extraContainer}>
{
!props.show && !props.isFollowed && props.panelID !== "1" && <img src={rewardIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> // show this box
}
{
props.show && !props.isFollowed && <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginRight:'10px', width:'auto', objectFit:'contain'}} /> // show this icon
}
{
props.isFollowed ? <img src={tickIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> : ""
}
</div>
</span>
}
>
{props.children}
</AntCollapse.Panel>
</StyledCollapse>
In the extra API, I have added display of +10. So i'm wondering if I can still add an icon in front of the header title and what API should I use.
Try it:
JSX return
function createMarkup() {
return {__html: '<img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a" /> abc'};
}
return (
<Collapse defaultActiveKey={["1"]} onChange={onChange}>
<Panel
header={<div dangerouslySetInnerHTML={createMarkup()} />}
showArrow={false}
key="1"
>
<p>123</p>
</Panel>
</Collapse>
)
result:
I'm trying to create a swipeableDrawer like that.
I want a button on my swipeableDrawer which I could click to dispatch an action.
But I can't click the button and swipe the swipeable drawer at the same time.
I want it.
<Global styles={{
'#swipeable .MuiPaper-root': {
height: `calc(78% - ${drawerBleeding}px)`,
overflow: 'visible',
},
}}/>
<SwipeableDrawer
id={'swipeable'}
anchor="bottom"
open={open}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
swipeAreaWidth={100}
disableSwipeToOpen={false}
ModalProps={{
keepMounted: true,
}}>
<>
<Card>
<CardContent>
<div className="row">
<div className="col-12">
{!ricalcolaPremioBTNEnabled ?
<Button className={buttonClasses.root}
onClick={() => history.push(INFO_PERSONALI_PATH)}>CONTINUA</Button> :
<Button className={buttonClasses.root}
disabled={!ricalcolaPremioBTNEnabled}
onClick={handleRicalcolaPremio}>RICALCOLA</Button>}
</div>
</div>
</CardContent>
</Card>
</>
<div style={{height: '100%', marginTop: '3vw', overflowY: 'auto', overflowX: 'hidden'}}>
<div className="row p-3">
Content of swipeable drawer
</div>
</div>
</SwipeableDrawer>
</Global>
How can I fix it?
Your button just probably inherits the pointer-events: none CSS from the <SwipeableDrawer/>.
You can override this CSS but you may encounter this issue
I have a "div" that was centered horizontally, then updated to use react bootstrap "
form".
Now the elements on the "form" are not centered, appearing to the left...
render() {
return (
<div className="App">
<div className="App-title">
Countdown to {this.state.deadline}
</div>
<Clock
deadline={this.state.deadline}
/>
<Form inline>
<FormControl
className="Deadline-input"
placeholder='new date'
onChange={event => this.setState({newDeadline: event.target.value})}
/>
<Button onClick={() => this.changeDeadline()}>
Submit
</Button>
</Form>
</div>
)
}
All is under className App
.App {
text-align: center;
font-size: 35px;
margin-top: 20%;
}
.App-title {
font-size: 50px;
}
.Clock-days,
.Clock-hours,
.Clock-minutes,
.Clock-seconds {
display: inline;
margin: 10px;
}
.Deadline-input {
font-size: 25px;
margin: 5px;
}
Why it is not centered anymore? how to align my form on the center?
:]
When you import 'bootstrap/dist/css/bootstrap.min.css'; bootstrap adds some styles and classes by default to the elements, Because of this form, it is folded to the left.
You can just add justify-content-center class to <Form inline />
<Form inline className="justify-content-center">
like this:
render() {
return (
<div className="App">
<div className="App-title">
Countdown to {this.state.deadline}
</div>
<Clock
deadline={this.state.deadline}
/>
// add justify-content-center class to the <Form />
<Form inline className="justify-content-center">
<FormControl
className="Deadline-input"
placeholder='new date'
onChange={event => this.setState({newDeadline: event.target.value})}
/>
<Button onClick={() => this.changeDeadline()}>
Submit
</Button>
</Form>
</div>
)
}
<Dropdown> in the code below includes a dropdown button and a dropdown menu that contains many dropdown items. When the dropdown button is clicked, the dropdown menu with those dropdown items will appear. It looks like this:
Below is the code that achieves the effect in the image:
import React, { Component } from "react";
import { Dropdown } from "react-bulma-components";
class Card extends Component {
render() {
return (
<div className="card is-vcentered columns" style={{display: "block"}}>
<section className="hero is-light is-small">
<div className="hero-body">
<div className="container">
<p className="title is-6 has-text-centered">Welcome to the Would You Rather App!</p>
<p className="subtitle is-7 has-text-centered">Please sign in to continue</p>
</div>
</div>
</section>
<figure className="image container is-128x128">
<img src="https://live.staticflickr.com/65535/49168480441_edbb9c3337_o_d.jpg" />
</figure>
<div className="column is-full">
<p className="title is-5 has-text-primary has-text-centered">Sign In</p>
</div>
<div style={{border: "1px solid", textAlign: "center"}}>
<Dropdown label={"Select User"} className="is-fullwidth">
<Dropdown.Item value="james">
James
</Dropdown.Item>
<Dropdown.Item value="bob">
Bob
</Dropdown.Item>
<Dropdown.Item value="alice">
Alice
</Dropdown.Item>
<Dropdown.Item value="carol">
Carol
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item value="barron">
Barron
</Dropdown.Item>
</Dropdown>
</div>
<div className="column is-full" style={{margin: 0}}>
<button className="button is-primary is-fullwidth">
<strong>Sign In</strong>
</button>
</div>
</div>
)
}
}
export default Card;
What I want to achieve is to stretch the "Select User" button and the dropdown menu so they have the width as the green button right below. I tried many stylings such as style={{width: "100%"}} but none of them worked.
As of now, in the react-bulma-components there is no such functionality (mentioned in their official docs) to increase the width for the Select User which you are asking for. You can only increase/decrease the width for the menu by using sass variable $dropdown-menu-min-width
Since you are new to react, what you can try it to look out for the classes for the dropdown (open your inspector and look out for class="..." values). Then you can manually over-ride the properties by writing a new css something like this:
.dropdown {
width: 100%;
}
.dropdown-trigger {
width: 100%;
}
button {
width: 100%;
}
I have updated the same for you in the sandbox: https://codesandbox.io/s/xenodochial-aryabhata-kv9nw
and it gives the output of sort:
Let me know if this helps.