Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
The first radio button (clr-radio-wrapper) in a clr-radio-container will not allow a click on the circular portion of the control. You must click on the label. This seems to be related to some display issue as
I am able to hack-fix this using a custom css override raising the z level of the control:
Go to any of the examples that have the wrapper class:
And you will see that you cannot click the circle on the first radio button.
## Expected behavior
I should be able to click the circle radio button, not just the label, to select the first radio button in a radio wrapper div.
## Versions
**App**
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@auth0/angular-jwt": "^2.0.0",
"@clr/angular": "^0.13.0",
"@clr/icons": "^0.13.0",
"@clr/ui": "^0.13.0",
"@webcomponents/custom-elements": "^1.0.0",
"angular-notifier": "^4.1.1",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"ng-cli-pug-loader": "^0.1.3",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"
**Device:**
* Type: Macbook Pro
* OS: OS X 10.13.6 (17G65)
* Browsers:
** Chrome 68.0.3440.106
** Safari Version 11.1.2 (13605.3.8)
## Additional notes
Here is a video of me clicking on the top button without success (the issue i am reporting), then changing the css zindex (the hack fix i implemented), verifying the proper behavior, then removing that css and verifying it again is not working as expected.
![sep 11 2018 12_26 pm](https://user-images.githubusercontent.com/33307206/45382768-1c6b2e00-b5be-11e8-9595-9bd7260768ff.gif)
Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.
Describe the bug
The first radio button (clr-radio-wrapper) in a clr-radio-container will not allow a click on the circular portion of the control. You must click on the label. This seems to be related to some display issue as I am able to hack-fix this using a custom css override raising the z level of the control:
However, if the clr-radio-container directive is removed, leaving two adjacent clr-radio-wrapper containers, both circles are clickable.
How to reproduce
This is reproducible on the docs site: https://vmware.github.io/clarity/documentation/v0.13/radio
Go to any of the examples that have the wrapper class:
Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.