I have buttons that I'd like each line within which to have different styling, and I want to be able to add a class so the user knows which button they selected. I'd like the class to be added regardless of where I click on the button, but it's only being added when I click on the background. No style is added if I happen to click the text of the button, which is in spans. Does anyone know what I might be doing wrong?
Here is my code.
<a href="#" role="button" onClick={e => {
e.preventDefault();
let el = e.target;
setAgeSelection('0-3');
el.classList.toggle('selected');
}} className="btn-resume btn-resume-large btn-resume-blue">
<span className="txt-36px bold-txt">0-3 years</span><br />
<span className="txt-22px italic-txt">Career explorer</span>
</a>
And here it is in codepen:
https://codepen.io/ybilal253/pen/GRNdLzw
Please let me know if any further information is needed.
Thank you in advance!
Related
Hello :) I'm using Bootstrap to make an offcanvas component that can render a modal for each item in an array passed to it. However, when clicking open my modals, they each display omly the first items props. Why? And, how can I fix it? I recreated it here in codesandbox codesandbox recreation
If i can improve my question let me know in a kind way, please.
The way you have done is not the correct way of building Modal in React .
However just to give you clarity about the mistake you have done:
The prop letter is passed correctly. The problem is the way you're calling the modal.
If you see your code in Example.js , you have used data-bs-target="#exampleModal". And id="exampleModal" for the modal to show up.
So all the handlers are pointing to exampleModal id . Hence After you click on the buttons only the first modal shows up.
To solve this , you need to assign the data-bs-target and id dynamically. Something like below :
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target={`#exampleModal${props.letter}`}
>
click to view prop
</button>
and then in Modal set id as :
<div
class="modal fade"
id={`exampleModal${props.letter}`}
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
It should work as expected.
here is the working example : Demo
So, what I want to achieve is that the wrapping link I have to be clickable on all places, instead when the button is clicked don't call the function or click the item
<a href="test.com">
<img />
<title />
<button>
Add to Cart
</button>
</a>
First of all, mixing a link and a button isn't a good idea Can I nest a <button> element inside an <a> using HTML5?
Second of all use event.preventDefault()
I use reactstrap. I have this kind of <button> with an icon inside :
{this.props.mode === "update"
?
<Button
className="btn btn-danger btn-sm"
onClick={() => this.deleteQuestion()}
>
<i className="fa fa-trash"></i>
</Button>
: null
}
If I click on the icon, the function in not triggered.
If I click outside the icon (but inside the button), the function is triggered.
What is this mystery? I am a beginner in React and react-strap.
The reason it behaves this way is because icon captures click before it is propagated to the button. The easiest way to fix this is to add the following in your css
.btn i.fa{
pointer-events: 'none';
}
it will fix it for all the buttons in your project
There is a concept called event capturing and event bubbling in JavaScript. Take a look at Event Capturing and Event Bubbling. This concept helps you overcome the problem that you're facing currently.Take a look at this. You can add the same function onClick to the icon too. This will help you as well!!.. There are so many design templates available you can try those too. For eg. There's Ant Design. Hope it helps!!.. Happy Coding!!
I am trying to implement segmented control button instead of normal radio button in Angular
Although If i remove CSS class, normal radio button is working fine and remain selected on navigating to another page os clicking anywhere on the same page, but after adding CSS, radio button selection do not remain intact and deselects.
Please help with this
HTML Code :
<div class ="segmented-control">
<div ng-repeat="p in LP">
<a href="#" class="list-group-item">
<label> {{p.label}}
<input type ="radio" ng-model="test" name="test" value="{{p.value}}" ng-click="getElement($event)"></label>
</a>
</div>
</div>
CSS :
.segmented-control input[type="radio"] {
visibility:hidden;
}
.segmented-control .list-group-item {
display: inline-block;
}
In controller.js
calling below function to get the value of radio button
$scope.getElement= function(obj){
$scope.test = obj.target.value;
}
There are 2 issues with your code:
You have nested elements <div><a tag><label><radio></label> but the ng-model will be set only when you click exactly on the label. If you click little outside the label the ng-model will not be updated.
The gray color change that you see when you click on the segmented button does not mean that the radio button is selected. It is applying the following bootstrap class a.list-group-item:focus which means the button is in focus. That is why when you click outside the button the color changes back to white.
To solve this you have to add extra class to highlight the selected button and make sure your ng-model is updated no matter where the user clicks inside the div.
I have created a sample jsfiddle to demonstrate both the issues. Good luck and welcome to Stackoverflow!
i did not found the answer i was looking for, so that why i'm creating this question. I have a div that shows another one on click but i need to hide it (the div that appears on click) after the user selects one of the options, how can i do that?
When user's click on "#showmenu" the div ".mob" appears, after clicking in one of the ".mob" li's the ".mob" div dissapears.
P.S: Sorry for my bad english.
HTML:
<div id="showmenu"><img src="images/mobile.png" /></div>
<div class="mob" style="display: none;">
<ul>
<a data-scroll href="#home"><li>INÍCIO</li></a>
<a data-scroll href="#servicos"><li>EU FAÇO</li></a>
</ul>
</div>
Code:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.mob').slideToggle("fast");
});
});
I dont have any idea of the bootstrap or jquery plugins you are using but based on what is given, i'd say this should work.
$(document).ready(function() {
$('#showmenu').click(function() {
$('.mob').slideToggle("fast");
$('.mob a').click(function () {
$('.mob').slideToggle("fast");
});
});
});
Point to note there is a performance issue here , i.e code could be optimized better to search for classes or elements within a specific div than the whole document
Should those really be <a> if you don't intend to go anywhere? Can they just be <li>?
After that I think you want to give id's to the <li> that you have and then create a function much like the one you did for $('showmenu').click... that would hide the .mob.
Or if the <li> all get treated the same, maybe give them all the same class and just have one function for the class.