So I was using react-bootstrap dropdown menu and i found a bug that it doesn't close .It actually renders all its options horizontally on my screen.
I searched over Stackoverflow .There were few resembling posts but none of them is for react
<DropdownButton
title={this.state.selectedOption}
id="document-type"
onSelect={this.handleSelect.bind(this)}
>
{myoptions.map((opt, i) => (
<Dropdown.Item key={i} eventKey={i}>
{opt}
</Dropdown.Item>
))}`enter code here`
</DropdownButton>
I expected Nomral Behavior
As per docs,
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. Like overlays, Dropdowns are built using a third-party library Popper.js, which provides dynamic positioning and viewport detection.
Also you need to add bootstrap.css, either by adding link in index.html
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
or by importing in index.js file.
Add popper in index.html
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
Demo
Related
I'm trying to embed the anchor tag of Calendly using Reacrjs and Material-UI.
The Calendly instruction is:
<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
Schedule Here
<!-- Calendly link widget end -->
I tried doing this:
<Typography className={classes.root}>
<Link href="#" onClick={Calendly.initPopupWidget({url:'https://calendly.com/bbb'})}>
Schedule Here
</Link>
</Typography>
And added the script and link tags mentioned on the instructions on the index.html in the public folder of the react app
Thank you.
It looks like you are calling Calendly.initPopupWidget({url:'https://calendly.com/bbb'}) instead of passing the function to the onClick handler. This will cause the popup to appear when the link is rendered instead of when the link is clicked.
You can change the onClick function to the following to prevent this issue:
<Link href="#" onClick={() => window.Calendly.initPopupWidget({url:'https://calendly.com/bbb'})}>
Schedule Here
</Link>
This will wrap the call to initPopupWidget in an anonymous function so that the Calendly function only fires when the Link is clicked.
I want to display text which can contain with emoj and html . I`ve already using react-emoji-render component. But it's not supporting HTML .
Example text I want to display:
<h1>Hello</h1> :)
Will this help (instead of using react-emoji-render)?:
1. Include <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> to html template.
2. Use it: <h1>Hello world! <i class="em-svg em-100"></i></h1>
Library
I am using the Chrome toolbar from http://wave.webaim.org/extension/ to check the ADA compliance of my React-Bootstrap app.
When I use a Popover within an OverlayTrigger without an ID, it warns me in the console:
Warning: Failed propType: The prop 'id' is required to make 'Popover' accessible for users using assistive technologies such as screen readers
Problem is, when I add an ID to the Popover, I then get the following error on my accessibility scan:
Broken ARIA reference: An element has an aria-labelledby or aria-describedby value that does not match the id attribute value of another element in the page.
I am guessing it's happening because the element with that ID doesn't exist until the button is clicked. Am I missing something, or is this element not ADA compliant? Or, is this just a problem with the scan, and there's a better tool I should be using to prove my site is compliant?
Here is the code for an example site that demonstrates the issue. I have thrown it in a Fiddle, but it won't do you much good because if you run the accessibility tool on that, it will give you JSFiddle's errors rather than the ones for the relevant code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React-Bootstrap Popover Accessibility</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Button = ReactBootstrap.Button;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var Popover = ReactBootstrap.Popover;
var Overlay = React.createClass({
render: function() {
return (
<OverlayTrigger trigger="click" placement="right" overlay={
<Popover title="Popover" id="popover-id">Here's the contents of the popover</Popover>
}>
<Button bsStyle="primary">Click to see Popover</Button>
</OverlayTrigger>
);
}
});
ReactDOM.render(
<Overlay />,
document.getElementById('container')
);
</script>
</body>
</html>
I can confirm that the code is not compliant. You can double-check whether this code validates by:
Inspecting this element in the developer console (before the button is clicked)
Copying the rendered HTML to the clipboard
Loading http://validator.nu and selecting the ‘Textfield’ option
Pasting your HTML between the <body></body>tags
Clicking ‘Validate’
As you’ll see, the code does not validate, because, as oobgam mentioned, the target ID is not initially present in the DOM.
There are a number of different approaches to fixing this. Once I understand which design pattern you’re trying to accessibly support, I can provide more concrete advice.
Can you please provide more information about why you chose this implementation? How do you see desktop and mobile users interacting with this, and to what end?
Quora has a good list of related patterns at What's the difference between a modal, a popover and a popup?
notify({
classes: 'alert-danger',
message: response.data.errors[e]
});
I use this https://github.com/cgross/angular-notify
My notify still show blue color.
How to implement this classes?
I had this problem and was able to resolve it by changing the order of the css files in the main index.html file of my angularjs app. Apparently you have to list the angular-notify.css before the bootstrap.css file. This resolved the issue for me.
<link rel="stylesheet" href="bower_components/angular-notify/dist/angular-notify.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
Once I switched the order of the CSS styles, the bootstrap classes apply properly using your code above.
I am looking at the demo of MobiScroll and have chosen the following options:
Demo Page: Demo
Demo: Time
Display: Modal
Mode: Scroller
The demo example shows the resulting HTML I should use as:
<input id="i" name="i" />
Show
Clear
When I use this HTML, the Show and Clear buttons show up on the page and when I click in the input box, the Mobiscroll shows up inline. In the demo, these buttons appear with the Mobiscroll in a modal dialog. Do I need to wrap the HTML in a div with a special tag?
Thanks!
The issue was that the jQuery Mobile js + css files were required to get the modal popup. The directions on the site are not clear! I added the following and presto!
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />