This question already has answers here:
Click through div to underlying elements
(17 answers)
Closed 2 years ago.
I have a <div> with an onClick handler that contains a fontawesome icon. Clicking anywhere in the div returns the correct element ID. Clicking on the fontawesome icon returns no ID. In the console, clicking on the icon shows the element being clicked on is the svg itself and not the <div>. How do I get around this short of writing code for both the icon AND the div?
CodeSandBox Example
use e.currentTarget.id instead of e.target.id
onClick={(e) => alert(e.currentTarget.id)}
Related
This question already has answers here:
How to style the option of an html "select" element?
(21 answers)
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed last month.
Usually when you create a <select> option field and use color to change the color.
This applies only to when the dropdown is clicked upon and is in an active state.
Is it actually possible to change the color of the option that is selected? So if you look at the code, only make the option Apple red that is selected (when another fruit is selected, make that red). However, the colors of the text need to black in the dropdown.
select option {
color: red;
}
<select>
<option>Apple</option>
<option>Banana</option>
<option>Peach</option>
<option>Strawberry</option>
<option>Pineapple</option>
</select>
Since this component is a re-used one, I can not edit the HTML structure of it.
I tried to give the options a color, but this resulted in changed all of the option in the active dropdown and not the item selected.
I also looked up other topics and answers in here but every provided code also changes the color in the active dropdown state or they modify the HTML.
This question already has answers here:
Move the mouse pointer to a specific position?
(10 answers)
Closed 4 years ago.
How can I make the cursor jump off an item when the item is clicked?
I have an image that acts different ways when hovered, clicked, double clicked etc, and I'd like the double click to throw the cursor to the other side of the screen or at least off the image or the div the image is in.
As in the image clicked would start repelling the cursor after click?
There is no mechanism for moving the mouse by javascript. However you can put a control like input and on the click on the image you put the focus on that control. So this way the mouse cursor moves to another part of the page.
The below jQuery code will help you.
So the click event of the img:
$("#img_id").click(function(){
$("#somecontrol_id").focus()
});
More information you can look at this link.
This question already has answers here:
Vuetify text field border missing
(2 answers)
Closed 4 years ago.
How to override a v-text-field?
Actually I am trying to make a text field that should initially have a thin line over which a label/placeholder will be displayed. When I click on it, the label must float up (like a superscript) and that line should become slightly thick along with change in color.
In Vuetifyjs such a text-field exists , but when I copy paste the component , nothing of that sort is happening. The colour isn't changing , infact when that text field is not selected , we cannot see any sort of line , just the label.
I tried using class="input-group--focused" but in that case , the label is already Floated up. The line is present but its opacity is high , ie its black instead of grey. Please help me , it would be great.
I looked at my dependencies , I am running the latest version of vuetifyjs: 1.0.10
Something like a GMail login Form
Ok I'll give it a go and presume you didn't wrap your app in v-app
From docs:
In order for your application to work properly, you must wrap it in a
v-app component. This component is used for dynamically managing your
content area and is the mounting point for many components.
<div id="app">
<v-app>
Put <v-text-field /> somewhere inside
</v-app>
</div>
And of course, check example layouts and see which one works for you.
If it doesn't work, see related question where OP included v-app.
This question already has answers here:
Bootstrap 3 - Change dropdown background colour
(4 answers)
Closed 8 years ago.
I have a dropdown pill that turns pink on hover and stays pink when clicked. However if you click it twice and then move the mouse away it turns grey.
It is the "recipient" link in the following example:
Example and code
Why is this? Is there some CSS I can use to overwrite this functionality? I'd rather the background went black again.
This is what I mean:
Thanks
I cant' reproduce your issue with the double click but I can see a gray background with Tab Navigation. Add also the state for the :focus. Try this:
.nav-pills>li>a:hover, .nav-pills>li>a:focus {
background-color: #FF6699;
}
BootplyDemo
This question already has answers here:
How can I change the size of a Bootstrap checkbox?
(10 answers)
Closed 3 years ago.
I am creating a mobile-targeted page using Twitter Bootstrap. Since it's mobile-targeted, I'd like all my form UI elements to be nice and big.
The input-lg class achieves this nicely for ordinary text inputs. But it has no effect on radio buttons or checkboxes, and I don't see an equivalent class for them mentioned in the docs.
How should I achieve the same result for checkboxes and radio buttons?
It is possible via CSS, you can add the class "form-control" to your checkbox or radio button and it will become bigger; input-* classes will not affect the size of the control, only with input-sm you can see a little difference.