Radio buttons unresponsive

#1

Whilst attempting a torturous upgrade to Meteor 1.6.1.1 I’ve run into an issue where the radio buttons in the application are completely unresponsive to mouse clicks/touches. There’s nothing in the console and no clue as to what’s going on, but I can select one with a bit of jquery in the console, e.g. $(’#unresponsive-button’).click().

In case it’s of any use, here’s the html for the relevant page:

https://bitbucket.org/knirirr/beecount3/src/master/imports/views/edit_project.html

There’s no problem with these buttons on the production version of the application, still running a 1.6 beta. Can anyone suggest how to proceed?

#2

That sounds bizarre, if the html output is correct, they should just work.
Doesn’t look like there’s any problems in particular in the template code

Can you attach an event listener to see if the clicks are getting through to the radio button? Maybe some element is in the way?

#3

Thanks for your reply.
I tried a listener in Template.EditProject.events, using both the class and ID of various radio buttons, and the clicks don’t seem to register. The various buttons on the page are OK, though.
I can’t at present work out how to determine what might be intercepting these clicks.

#4

Eventually the problem turned out to be this class applied to the div surrounding all the radio buttons:

.input-field {
    position: relative;
    margin-top: 1rem;
}

…but I’m damned if I know why.

#5

maybe setting position relative reset the stacking context, allowing another element to sit on top? :thinking:

Either way, a classic CSS problem :joy:

Glad you got there in the end

#6

hello,
Because you’ve different value for name attribute, they should have a common name value, just like you group items… for example

regards jayesh