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.
Related
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
Using the polymer paper-swatch-picker, I'm trying to change an icon but it is not getting updated.
In the below there is the CSS code which I have used to change icon. Is it correct?
HTML:
<paper-swatch-picker class="fancy"></paper-swatch-picker>
CSS:
paper-swatch-picker.fancy {
--paper-swatch-picker-color-size: 10px; -- works
--paper-swatch-picker-icon-size: 40px; -- works
--paper-swatch-picker-icon: {
'icon':'menu' -- not works(icon not getting changed)
}
}
You can use the attributes icon to change it instead of CSS. But you need to import the iron-icons/iron-icons.html first, according to the set you use. In this case, you are using menu icon, which belongs to the default set iron-icons.html. For example, maps:...something will belong to iron-icons/maps-icons.html
<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-swatch-picker/v2.2.0/paper-swatch-picker/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-swatch-picker.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<style>
paper-swatch-picker {
margin: 0 10px;
}
</style>
<!-- Customized color swatch -->
<paper-swatch-picker icon="menu" color="#E91E63"></paper-swatch-picker>
I have also written an article featuring the top color picker web components, including paper-swatch-picker as well. Here's the link if you want to read.
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?
Is it possible to have an Angular UI tooltip from an element, not from an attribute value?
Something like:
<a data-tooltip-id="tooltip1" href="#">Show the tooltip</a>
<p id="tooltip1">Hello, <em>world</em>!</p>
Angular UI tooltips seem pretty simplistic for what you're trying to accomplish.
But it's definitely achievable. If you're willing to override some of the core modules and directives in the Angular UI library like it's been pointed out here. You can do so very well.
But if you're looking for a quick and easy solution - I'd recommend using qTip (http://qtip2.com/). It's a pretty powerful tooltip library.
Worst case, you can just use their JS and have your own style / Angular UI tooltip style on top of it.
You can do something like this -
$('a').qtip({
content: {
text: $('#tooltip1').html()
}
});
<link href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>
<a data-tooltip-id="tooltip1" href="#" tooltip="test">Show the tooltip</a>
<p id="tooltip1" style="display:none;">Hello, <em>world</em>!</p>
How can I get RequireJS to load .LESS? Until now it has been nothing more than a pain in the a.. to get it to run.
In my backbone config file i have:
require.config({
paths: {
jquery: 'lib/jquery/jquery',
backbone: 'lib/backbone/backbone',
handlebars: 'lib/handlebars/handlebars',
text : 'lib/requirejs-text/text',
less: 'lib/less/less',
lodash: 'lib/lodash/lodash.min'
}
});
and on my index page i have
<link href="<?php echo base_url('assets/css/style.less')?>" rel="stylesheet" />
<link href="<?php echo base_url('assets/css/admin.less')?>" rel="stylesheet" />
it seems they get loaded, but for example all my #border, #background-dark, #grey etc etc files don't work...
so, does anybody know whats wrong?
See this plugin for requirejs. It also works fine with r.js optimizer.