Update the blue line to white - javascript

Do I change the color of the blue line that is generated when I clicked?
class Hello extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(
<div>
<p tabIndex={-1}
style={{}}
onKeyDown={event => alert(event.keyCode)}>
Click to focus, then hit a key.
</p>
</div>,
document.getElementById('container')
);
https://jsfiddle.net/s7bjk42m/

You need to alter the :focus selector of the css. You can remove the outline by using the below and then replace it by adding a border when the :focus state is active.
#container p:focus{
outline:none;
border:1px solid #000;
}

To remove the outline:
This is happening because the paragraph element takes the default browser outline on focus. You can change the code to this to fix this. I have removed the outline that's being added on focus to the paragraph element:
class Hello extends React.Component {
render() {
return <div > Hello {
this.props.name
} < /div>;
}
}
ReactDOM.render( <
div >
<
p tabIndex = {-1
}
style = {
{
outline: "none"
}
}
onKeyDown = {
event => alert(event.keyCode)
} >
Click to focus, then hit a key. <
/p>
<
/div>,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
Alternatively, you can add this in your css file:
p {
outline: none;
}
To change the outline color:
As #Akiba suggested, in your css file you could add border instead. Borders are much more flexible than outline (Although it is possible to just style the outline, it would not be a recommended approach for many reasons).
p {
outline: none; //Removes outline
border: 1px solid red; //Sets 1px solid red border
padding: 5px; //optionally add padding to space it out
}

Related

React how to prevent a parent's onclick event from firing when a child is clicked?

I have set the onClick prop on my div which will navigate to a new page when clicked. svg is absolutely positioned. How do I avoid the click event on the svg element?
I've already tried stopPropagation() but it doesn't work.
<div
className={classes.container}
onClick={() => navigate(`${props.productName}`)}
>
<img src={props.image} alt="" />
<svg></svg>
</div>
Well the obvious answer would be to put it outside of the div.
But if you really can't, you can always use CSS for this.
Try using pointer-events
Example:
HTML -
<div
className={classes.container}
onClick={() => navigate(`${props.productName}`)}
>
<img src={props.image} alt="" />
<svg className='no-events'></svg>
</div>
CSS -
.no-events {
pointer-events: none;
}
Check to see if e.target === e.currentTarget.
function Example() {
function handleClick(e) {
if (e.target === e.currentTarget) {
console.log('Only container clicked');
}
}
return (
<div
className="container"
onClick={handleClick}
>
<button>Click me!</button>
</div>
);
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);
#react { padding: 0; border: 0; margin: 0;}
.container { border: 5px solid white; padding: 1em; background-color: lightblue; }
div:hover { border: 5px solid cornflowerblue; }
div:hover, button:hover { cursor: pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>
You can achieve by doing these.
Check for the target element tag when event is triggered.
Assign Id's to the elements and execute your code based on the Id.
Use CSS pointer-events to disable pointer events of that element.

How to set border-radius to ant design Select component

I am using ant design and I want to change border-radius of Select component but it is not working. The code is below. And i tried to classname method but it doesn't work.
import React from 'react'
import { Select } from 'antd'
const { Option } = Select;
const Dropdown = ({placeholder ,...restProps}) => {
return (
<Select
style={style}
{...restProps}
placeholder={placeholder}
>
</Select>
)
}
const style = {
width: 450,
borderRadius: '10px',
margin:3
}
export default Dropdown;
If you inspect the element you could find that the style is going to the div with classname ant-select. But the border is set in the inner div element with classname ant-select-selector.
Ant Design doesnt give any prop to override the style for it, but you can override by using CSS.
you can wrap with a custom div and provide CSS to override the style set by ant.
Example,
<div className="my-select-container">
<Select
style={style}
{...restProps}
placeholder={placeholder}
>
</Select>
</div>
and in CSS file,
.my-select-container .ant-select .ant-select-selector {
border-radius:20px;
}
A bit hacky but works quite nice.
Set bordered={false} in the select component (will remove the default border)
Apply the following style to the select field:
.borderedSelect {
border-radius: 10px !important;
background-color: white;
border: 1px solid darkgray;
&:hover {
border-color: #356796 !important;
border-top-color: rgb(53, 103, 150);
border-right-color: rgb(53, 103, 150);
border-bottom-color: rgb(53, 103, 150);
border-left-color: rgb(53, 103, 150);
}
}

Hide extra text instead of scrolling or overflowing parent div

I have a very limited space where I can display text, and I would like to hide anything extra instead of doing a line break, scrolling or overflowing parent div.
In this case my text is inside an anchor tag, so I made a small component to exemplify what I want to do here:
function App () {
return (
<div style={{ width: 100, border: 'solid 1px black'}}>
<a style={{ overflow: 'hidden'}} href='#'>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
</div>
)
}
ReactDOM.render(
<App/>,
mountNode
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container" style="padding: 24px"></div>
<script>
var mountNode = document.getElementById('container');
</script>
Anyway, how do I hide all that extra text in order to keep the text content of the anchor tag just one line?
Move overflow hidden to the div and add whiteSpace no wrap to the link
function App () {
return (
<div style={{overflow: 'hidden', width: 100, border: 'solid 1px black'}}>
<a style={{ whiteSpace:'nowrap'}} href='#'>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
</div>
)
}
ReactDOM.render(
<App/>,
mountNode
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container" style="padding: 24px"></div>
<script>
var mountNode = document.getElementById('container');
</script>
You're missing white-space: nowrap and display: block.
1) white-space: nowrap prevents line wrapping.
2) display: block ensures the anchor inherits its parent's width, as opposed to its text's width.
div {
width: 100px;
border: 1px solid black;
}
a {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* optional */
display: block;
}
<div>
<a>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
</div>
You can use the css overflow property "hidden".
<div style="overflow:hidden; width:100px; height: 100px; border: 1px solid black">hide any text that would cross the parent divs border instead of line breaking to make it longer</div>

Different hover colors when an item is clicked and not clicked in Jquery

I want the color of the active elements to change when it's hovered, and when it's not active the hover color should be different.
"highlightbutton" class is not removed after the "toggleclass" and I can't seem to manage to apply a code to change hover color when the item is clicked and when it's clicked back to default unclicked state it should revert back to original hover color when hovered.
Here is my code:
$(".toggle").hover(function() {
$(this).addClass("highlightbutton");
}, function() {
$(this).removeClass("highlightbutton");
});
$(".toggle").click(function() {
$(this).toggleClass("active");
$(this).removeClass("highlightbutton");
});
css
.active {
background-color: #E8F2FF;
}
.highlightbutton {
background-color: #E4E4E4;
}
As #connexo has said, this is more of a css case.
you can either add an id to the thing you want to highlight do this:
.toggle:hover{
//Colour changing
}
.toggle:active{
//Colour changing
}
or you could add an ID to the element and do it this way:
#toggle:hover{
//Colour changing
}
Use jQuery to add and remove your .active class. Everything else can be handled by CSS
$(".toggle").click(function() {
$(this).toggleClass("is-active");
});
.toggle:hover {
background-color: #E4E4E4;
}
.toggle.is-active {
background-color: black;
color: white;
}
.toggle.is-active:hover {
background-color: #666;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle">toggle button</button>
The toggling of an active class can also be achieved with vanilla JS:
[...document.querySelectorAll('.toggle')].forEach(toggle => {
toggle.addEventListener('click', e => e.target.classList.toggle('is-active'));
})
.toggle:hover {
background-color: #E4E4E4;
}
.toggle.is-active {
background-color: black;
color: white;
}
.toggle.is-active:hover {
background-color: #666;
}
<div class="toggle">toggle button</div>
<div class="toggle">toggle button 2</div>
<div class="toggle">toggle button 3</div>
Just edited my fiddle, here is your answer : https://jsfiddle.net/csdgyhof/2/
$(".toggle").hover(function() {
$(this).addClass("highlightbutton");
}, function() {
$(this).removeClass("highlightbutton");
});
$(".toggle").click(function() {
$(this).toggleClass("active");
});
CSS
.active {
background-color: #E8F2FF !important;
}
.highlightbutton {
background-color: #E4E4E4;
}
On the click event you removed the needed class. Instead of using !important (hard to override) look into css priorities.

jQuery: style hover on parents() and children()

I am wondering if it is possible to change the style of child when its element was hovered, while its css was also styled when its parent was hovered?
To make my question clear, I wrote down a basic code below:
//styling child while mouse is inside child element
$('child').on('hover', function(e){
if (e.type == 'mouseenter'){
$(this).css('background','yellow');
}
})
// styling child while mouse is inside parent
$('child').parents().on('hover', function (e){
if (e.type == 'mouseenter'){
$(this).css('background', 'blue');
}
})
So, basically once user enters space of parent to make child's bg blue, and once it enters space of child to change from blue to yellow bg.
I saw a comment on why I do not use css, so this is a little explanation: I am unable to select parent element. I can only do it from child using parents(). And as long as css does not support parents() method yet I went with jquery. :)
CSS Alone:
div {
padding: 20px;
border: 1px solid black;
}
/* something hovered that have .child as direct child => change .child color to blue */
*:hover > .child {
background-color: blue;
}
/* .child element hovered => override the above color and set it to yellow (note that the above rule is still taking effect when this is taking effect) */
.child:hover {
background-color: yellow;
}
<div>
PARENT
<div class="child">CHILD</div>
</div>
<div>
PARENT
<div class="child">CHILD</div>
</div>
<div>
PARENT
<div class="child">CHILD</div>
</div>
is that the behaviour you expect ?
$('#child').parent().on('mouseover', function(e){
if(this===e.target){
$(this).children().css('background','blue');
}else{
$(this).children().css('background','yellow');
}
}).on('mouseout', function(e){
$(this).children().css('background', 'green');
});
#parent{
width:200px;
height:100px;
background-color:#f00;
}
#child{
width:30px;
height:30px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child"></div>
</div>

Categories

Resources