I have an angular function like this:
$scope.colorValidator = function () {
$scope.token_style = "";
$scope.expdate_style = "";
if (!$scope.$$childHead.billingblock.accountID.$valid) {
$scope.token_style = {border: "1px solid #ff0000"}
}
if (!$scope.$$childHead.billingblock.expDate.$valid) {
$scope.expdate_style = {border: "1px solid #ff0000"}
}
};
How can i set the {border: "1px solid #ff0000"} in a constant variable (maybe like red), and set it in each validation ?
Edit: I'm setting ng-style (in the view) for each input.
You do not need to do that.
Check you markup when fields are not valid, they have ng-dirty and ng-invalid classes applied
Use them to style your controls
.my-special-form .ng-invalid {
border: 1px solid #ff0000
}
Please see here: http://jsbin.com/hekaz/3/edit?css,output
ie:
input.ng-invalid[ng-model="username"] {
border: 5px solid red;
}
input.ng-valid[ng-model="username"] {
border: 5px solid green;
}
I solved it setting it a variable:
var redColor = {border: "1px solid #ff0000"};
if (!$scope.$$childHead.billingblock.accountID.$valid) {
$scope.token_style = redColor;
}
Thank you to everyone for each answer.
Related
This is my SCSS style for .br
.br {
&--red {
border: 2px solid red;
}
&--green {
border: 2px solid rgb(32, 170, 8);
}
}
This is my nextjs react code:
import layout from "../styles/layout.module.scss";
export default function Index() {
return (
<div className={layout.br}>
<h1>Khan</h1>
</div>
);
}
How to access this ".br--red" in jsx?
.br{
&--red{
border:2px solid red;
}
}
If you use dash in an object's properties name(in this case, it's class name), for use of it you must use Bracket notation, and your property name should be in ' '(quotation or double-quotation).
<div className={layout['br--red']}>
<h1>Khan</h1>
</div>
You can read more about it in this article.
Adding on the comment above, you can also use dynamic variable in the brackets like so using backticks.
className={styles[`br--${color}`]}
I am trying to add custom class to my bindTooltip but the new class do not show up. My method based on this question.
My custom popup class is working fine but if I want to overwrite the tooltip class than it is now working.
My JS code:
var PopupClass={'className': 'class-popup'}
var TooltipClass={'className': 'class-tooltip'}
L.marker(
[46.17319713, 21.34458608],
{icon: OnlineMarker}
).bindPopup(
'Test Popup',
PopupClass
).bindTooltip(
'Test Tooltip',
{direction: 'top', permanent: true, offset: [10,0]},
TooltipClass
).addTo(MyMap)
My CSS code:
/* popup-class*/
.class-popup .leaflet-popup-content-wrapper {
background:#2980b9;
color:#fff;
font-size:10px;
line-height:10px;
}
.class-popup .leaflet-popup-content-wrapper a {
color:#2980b9;
}
.class-popup .leaflet-popup-tip-container {
width:40px;
height:20px;
}
.class-popup .leaflet-popup-tip {
background:#2980b9;
}
/* tooltip-class*/
.class-tooltip{
background: green;
border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
border-right-color: cyan;
}
You have 2 issues:
You try to specify your Tooltip class using a 3rd argument of .bindTooltip, which does not do anything as per Leaflet doc. Instead, you should merge your className key in the 2nd argument (options). For that, you can either:
write it directly within the options
extend your TooltipClass with your options: L.Util.extend(myOptions, TooltipClass)
use the ES2018 spread operator to do the same as the above point.
Your .class-tooltip selector in CSS is not enough to override the default Leaflet style. Increase your selector specificity, e.g. adding the Leaflet tooltip class: .leaflet-tooltip.class-tooltip
var MyMap = L.map('map').setView([46.17319713, 21.34458608], 11);
var PopupClass = {
'className': 'class-popup'
}
var TooltipClass = {
'className': 'class-tooltip'
}
L.marker([46.17319713, 21.34458608])
.bindPopup('Test Popup', PopupClass)
.bindTooltip('Test Tooltip', {
direction: 'top',
permanent: true,
offset: [10, 0],
//'className': 'class-tooltip'
...TooltipClass // using spread operator (ES2018)
}, TooltipClass) // 3rd argument does not do anything
.addTo(MyMap);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(MyMap);
/* popup-class*/
.class-popup .leaflet-popup-content-wrapper {
background: #2980b9;
color: #fff;
font-size: 10px;
line-height: 10px;
}
.class-popup .leaflet-popup-content-wrapper a {
color: #2980b9;
}
.class-popup .leaflet-popup-tip-container {
width: 40px;
height: 20px;
}
.class-popup .leaflet-popup-tip {
background: #2980b9;
}
/* tooltip-class*/
.leaflet-tooltip.class-tooltip {
background: green;
border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
border-right-color: cyan;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 180px"></div>
When a user 'tabs over' to an input, I want the focus effect to be normally displayed, but on click, I don't want it to be visible.
User hits tab, now focussed on toggle button, I would like the toggle button to have slight glowing outline, which I'm currently able to do.
Now,
User clicks on the toggle button or it's associated label, toggle changes as usual,
BUT, I want the glow to never appear in the first place, or to disappear as quickly as possible.
I know about .blur(), and right now I'm having to use a setTimeout for a lazy fix, but I'd like to know if there's a better way to accomplish this, or if there's possibly a CSS only solution
I think a lot of front-end developers struggle to find a balance between aesthetics and the best-practices for accessibility. This seems like a great compromise.
Here's how I do it. The idea is to toggle outlining on when the user uses the tab key and turn it back off when they click.
JS
document.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
$('body').addClass('show-focus-outlines');
}
});
document.addEventListener('click', function(e) {
$('body').removeClass('show-focus-outlines');
});
Styles
body:not(.show-focus-outlines) button:focus,
body:not(.show-focus-outlines) [tabindex]:focus {
outline: none;
}
I'm currently doing something similar for my company. Unfortunately you must use JavaScript since CSS doesn't support this use case.
Here's what I've done.
var btns = document.querySelectorAll('button');
var onMouseDown = function (evt) {
evt.target.dataset.pressed = 'true';
};
var onMouseUp = function (evt) {
evt.target.dataset.pressed = 'false';
};
var onFocus = function (evt) {
var element = evt.target;
if (element.dataset.pressed !== 'true') {
element.classList.add('focus');
}
};
var onBlur = function (evt) {
evt.target.classList.remove('focus');
};
for(var i = 0, l = btns.length; i < l; i++) {
btns[i].addEventListener('mousedown', onMouseDown);
btns[i].addEventListener('mouseup', onMouseUp);
btns[i].addEventListener('focus', onFocus);
btns[i].addEventListener('blur', onBlur);
}
* { box-sizing: border-box; }
body { background-color: white; }
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 100px;
margin: 0 1px;
padding: 12px 10px;
font-size: 15px;
color: white;
background-color: #646e7c;
border: none;
border-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
button:focus { outline: none; }
button:active {
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
}
button.focus {
font-weight: bold;
}
button.primary { background-color: #2093d0; }
button.success { background-color: #71a842; }
button.danger { background-color: #ef4448; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button>Default</button>
<button class="primary">Primary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
</body>
</html>
Basically instead of relying on browser's native focus I add/remove a focus class on my button depending on the situation.
If you use the what-input.js plugin you can apply styles specifically for keyboard users. You can use the following code to highlight a button that has been tabbed to. I've found what-input to be a reliable plugin (comes bundled with Zurb Foundation) and is currently regularly maintained.
// scss
body[data-whatinput="keyboard"] {
button {
&:focus {
// other highlight code here
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
}
}
or
/* vanilla css */
body[data-whatinput="keyboard"] button:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
I want to get this effect http://jquery.bassistance.de/validate/demo/ by Wordpress Contact Form 7.
I set in css
.wpcf7-not-valid{
border:1px solid #d73333!important;
}
But when I insert value into the field the red border do not disappear.
Got a good solution. In wp-content\plugins\contact-form-7\includes\js\scripts.js
Changed
$.fn.wpcf7NotValidTip = function(message) {
return this.each(function() {
var into = $(this);
into.append('<span class="wpcf7-not-valid-tip">' + message + '</span>');
$('span.wpcf7-not-valid-tip').mouseover(function() {
$(this).fadeOut('fast');
});
into.find(':input').mouseover(function() {
into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
});
into.find(':input').focus(function() {
into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
});
});
};
to this code
$.fn.wpcf7NotValidTip = function(message) {
return this.each(function() {
var into = $(this);
$theParent = into.parent("span");
$parentInp = $theParent.parent("input");
into.find(':input').css('border-color', '#d73333');
into.find(':input').mouseover(function() {
into.find(':input').css('border-color','#cccccc');
});
into.find(':input').focus(function() {
into.find(':input').css('border-color','#cccccc');
});
});
};
.wpcf7-validation-errors, .wpcf7-mail-sent-ng {
padding: 5px;
color: #E68B8B;
background-color: #FDF5F8 !important;
border: 1px solid #FDE2E2 !important;
width: 518px !important;
}
There is no universal solution because it all depends on how you styled your form
Anyway you can try use something like that:
span .wpcf7-not-valid {
border: 1px solid #ff0000 !important;
}
Note: using !important is never the best way to do anything with css
So I have a Gridview that I would like to modify the look of for only certain cells, and I would like to treat those cells as one (if possible).
So first I am changing some of the cells background color on RowDataBound:
if (e.Row.RowIndex > 1 && e.Row.RowIndex < 7)
{
e.Row.Cells[1].BackColor = Color.Red;
e.Row.Cells[2].BackColor = Color.Red;
e.Row.Cells[3].BackColor = Color.Red;
e.Row.Cells[4].BackColor = Color.Red;
e.Row.Cells[5].BackColor = Color.Red;
}
This will change a 5x5 area of cells to red. Now what I would like to do next is put a border around the outside of that 5x5 area. I found the borderStyle and BorderColor for a cell, but is there a way for me to only turn on a border for one side of a cell so I can create my border?
Thanks
I'd advise you to use classes instead, don't hard-code it like this. It will be easier to maintain etc.
I just thought I would post this as a solution, in case anyone else is looking to do this.
Here is my CSS
<style type="text/css">
.LeftUpperCorner
{
border-left:5px solid black;
border-top:5px solid black;
}
.Top
{
border-top:5px solid black;
}
.RightUpperCorner
{
border-right:5px solid black;
border-top:5px solid black;
}
.Left
{
border-left:5px solid black;
}
.Right
{
border-right:5px solid black;
}
.LeftLowerCorner
{
border-left:5px solid black;
border-bottom:5px solid black;
}
.Bottom
{
border-bottom:5px solid black;
}
.RightLowerCorner
{
border-right:5px solid black;
border-bottom:5px solid black;
}
and my code behind:
if (e.Row.RowIndex == 2)
{
e.Row.Cells[1].CssClass = "LeftUpperCorner";
e.Row.Cells[2].CssClass = "Top";
e.Row.Cells[3].CssClass = "Top";
e.Row.Cells[4].CssClass = "Top";
e.Row.Cells[5].CssClass = "RightUpperCorner";
}
if (e.Row.RowIndex == 3 || e.Row.RowIndex == 4 || e.Row.RowIndex == 5)
{
e.Row.Cells[1].CssClass = "Left";
e.Row.Cells[5].CssClass = "Right";
}
if (e.Row.RowIndex == 6)
{
e.Row.Cells[1].CssClass = "LeftLowerCorner";
e.Row.Cells[2].CssClass = "Bottom";
e.Row.Cells[3].CssClass = "Bottom";
e.Row.Cells[4].CssClass = "Bottom";
e.Row.Cells[5].CssClass = "RightLowerCorner";
}
It may not be the prettiest, but this has not real need to change, and will always be in the same location, so it fits my simple needs.