I have a business need which is as shown below
here i have used DropdownButton from react bootstrap to achive the above menu
<span className="widget-controls" mr-eye-widget-type='Menu'>
<DropdownButton
alignRight
drop='down'
title="" className="download-CSV-button fa fa-ellipsis-v ">
<Dropdown.Item>Testttt</Dropdown.Item>
<Dropdown.Item>
<CSVLink { ... switchRef } data={this.state.downloadData} asyncOnClick={true} headers={this.state.dowloadHeader} filename={this.state.downloaFileName}>
<span className="csv-download" mr-eye-widget-type='DownloadButton' >
<div className="fa fa-download listColor" >
<span className="download-text">{widgetLabelConfig.englishConfig.Resource_Download_as_CSV}
</span></div>
</span>
</CSVLink>
</Dropdown.Item>
</DropdownButton>
</span>
and also here in the code one of the menu item is Testttt which is displaying where as second menu item has CSVLink which is a npm react-csv module for download this will not be render in the dom when i put it outside drop menu it works fine please let me know why is it failing when it is inside DropdownButton
Related
I have used Bootstrap (bundled with Popper) in my project to show a Tooltip when you hover on a button. I use the code from Bootstrap docs. However the tooltip is not visible.
<li className="nav-item">
<button type="button" className="btn grad-text"
data-bs-toggle="tooltip" data-bs-placement="top"
title="Meet the Algorithms"
>
<i className="fas fa-solid fa-laptop-code fa-lg"></i>
</button>
</li>
The above code here shows title on bottom on hover. That was visible even before I added
data-bs-toggle="tooltip" data-bs-placement="top"
to my <button> element. Below is the screenshot of the same.
I am using raw Bootstrap not React-Bootstrap and the version I am using is 5.2.3
Can anyone help me with how to show the tooltip like Bootstrap Tooltip over here. Thank you.
I am wondering if I could stop all spin to appear when only one delete button is click? Right now when I click on one of the delete buttons, all the spinners appear on all the delete buttons which should have been only the delete button that is performing the action. How should get this to work? Here is my code:
<ul class="list-group">
<h5>Schedules</h5>
{scheduleData.map(items => {
return (
<li key={items._id} class="list-group-item">
{moment(items.startdate).format('MMMM DD, YYYY')}{' '}
<span style={{marginRight: '0.2rem', marginLeft: '0.2rem'}}>
to
</span>
{moment(items.enddate).format('MMMM DD, YYYY')}{' '}
<span style={{float: 'right'}}>
<button
className="btn btn-primary"
onClick={event => deleteSchedule(event, items._id)}
>
{' '}
{loading && <i className="fa fa-refresh fa-spin"></i>}
Delete
</button>
</span>
</li>
);
})}
</ul>
Many thanks in advance and greatly appreciate any helps. thanks
Assuming that loading is a Boolean variable you set true in deleteSchedule, to achieve the result you have to create a loading parameter for every entry.
IMO the best approach would be to create an indipendent element in which you set loading with useState hook. You should pass deleteSchedule to this element and then when button is clicked it should call setLoading(true) and call deleteSchedule.
Other option would be to create a loading list and insert the id of the element which button was clicked in this list then loading would become loading.includes(items._id).
Or you could iterate scheduleData and add loading attribute to every element.
I have a simple sidebar with dropdowns. I want the dropdowns to be toggled on click. I used data-target property for this. But its not working as expected.
<div className="dropdown">
<span className="dropdown-toggle" data-toggle="collapse" data-target="#target">Toggle Dropdown</span>
<ul id="target" className="collapse">
<li><i className="fa fa-bar-chart"></i><span className="menuName">Options</span></li>
</ul>
</div>
How do i accomplish this in react js??
If you are using react-bootstrap as you mentioned in title and also added the tag, then this is the way you can achieve the drop-down.
<DropdownButton title="Dropdown" id="bg-vertical-dropdown-1">
<MenuItem eventKey="1">Dropdown link</MenuItem>
<MenuItem eventKey="2">Dropdown link</MenuItem>
</DropdownButton>
Data attributes should work normally. You have error in your syntax because you are using class attribute on all the elements except the first span, instead of className.
is there any way to have img and Icon Corner Icon using Semantic Ui. so i need to have the img show and add icon to it
<span>
<i class="huge icons">
<img src="test.jpg"></img>
<i class="corner add icon"></i>
</i>
<span>
I'm assuming that you are using semantic-ui-react.
You can do:
<Icon.Group size='huge'>
<img src="test.jpg" />
<Icon corner name='add' />
</Icon.Group>
You can find more examples HERE
We have this font awesome icon fa fa-twitter which at the current time sides next to the actual tooltip button of materialize what i need to do is to put it inside the tooltip
<div class="center">
<i class="fa fa-twitter"></i>
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-customcss="csszzz" data-tooltip="I am tooltip" >Hover me!</a>
</div>
i know there is a data-customcss implementation aswell so theoritically we could implement it via .css also with url link of a photo icon but i can't figure out how that could be with angular
At the moment the data-customcss="csszzz" doesn't do anything as a pointed css class eg. .csszzz
just add data-html="true" to your anchor element and move icon inside of tooltip:
<div class="center">
<a class="btn tooltipped"
data-position="bottom"
data-delay="50"
data-html="true"
data-tooltip="<i class='fa fa-twitter'></i> I am tooltip" >Hover me!</a>
</div>
please look at http://materializecss.com/dialogs.html#tooltip for reference
plunker: https://plnkr.co/edit/3cZtphZ984R1ZqnkuLBX?p=preview