[SOLVED] List of membership plans: radio buttons not in the right place

Hello,

I recently noticed a very weird display issue concerning CBSubs.

When the list of membership plans is displayed, the radio buttons for each plan are displayed in the wrong spot. Instead of showing in front of the title of each plan, they are too far to the right and appear over the title text instead.

The attached image will show what I mean.

I tried to figure out which css conflict was causing this, but the only solution I could think of was this override css in the CB Default template:

With this css code, the buttons are showing correctly again - in the frontend at least.
Unfortunately, it also seems to have an effect on the radio buttons in the backend. So when I go to someone's user profile, and to the CBSubs tab which lists the active and/or available membership plans, the radio buttons are not in the right place. They were, before I implemented the above code, but after adding the css code, the radio buttons in the backend were moved 75px to the left as well, meaning that they now fall off the screen (clicking to select a plan still works, but you just can't see if you selected it or not).

I have contacted the developer of my template, assuming that this was a template css conflict. However, they responded that it is an internal CB CSS code issue and not template-related, so they couldn't help with it (they have been very helpful with other issues, so it's not that they just want to shove it off to be rid of it).

For now, I have the above css code still enabled, because at this point it is more important that the frontend looks correct rather than the backend, but it would be nice to have the radio buttons show correctly again in both.

I hope you can help me figure out this strange issue?

Note: one thing that is weird, is that this issue only appears for the round radio buttons. The square ones and any others (such as the green checkmark for active subscriptions) are unaffected by any of this, and show correctly in both the frontend and the backend.

P.S. I just noticed that I posted this in the general support forum and not in the specific CBSubs forum. If it needs to be in there instead, can you move it, or let me know if I need to repost it? Thanks and sorry.

That looks like a CSS conflict coming from likely your Joomla template. I could not confirm locally or on our demo site. Try switching to default Joomla protostar template, clearing cache, then seeing if issue persists.

On the Protostar theme, the radio buttons appear correct. I will contact the developer of the template again.

I received a response back.

The issue was resolved by putting the css code I mentioned before into the template's main css file, rather than in the override of the CB default template. This way, the radio buttons are now only moved in the front-end with my current template, while the backend remains unaffected. In both places, the radio buttons are now in the right place.