How to prevent radio button wrapping by span and div

[Lakshmanan PHP]

When I use radio buttons inside my theme, it is automatically wrapped by div and span.

 

How to get rid of this?

 

When I tried changing styles by CSS, the element is not clickable

 

 

 

Thanks in advance

[CartExpert.net]

Hi.

 

Have a look at '[THEME_NAME]/js/autoload/15-jquery.uniform-modified.js' lines 1072 to 1081.

You could also try to remove the file, but you would have to remove all the lines that refer to it.

 

 

Regards.

Robin.

The CartExpert Team

[Lakshmanan PHP]

Hi Robin,

 

Thanks for your support.

 

Your solution works!!! I've removed the 15-jquery.uniform-modified.js file. 

 

Thanks again!

Lakshman

[CartExpert.net]

Happy I could help.

 

Please mark the topic as solved.

 

Regards.

Robin.

The CartExpert Team

[Aldeag]

I´ve got the same problem. Using the 1.6.0.14 the radio buttons appear for half a second and then vanish to a very tiny almost impossible to see.

I don´t dare to delete the complete 15-jquery.uniform-modified.js file

Is it possible to only modify some lines and which ones?

 

Check it in my shop:

http://shop.aldeaglobaltarifa.com/es/inicio/62-havaianas-origine-ii.html

[Aldeag]

Can any body help?

 

This is the problem that I have. When the page loads, for a second, radio buttons are as they should be, and then disappear as seen in the image, to be almost invisible not easy to see if it needs to be selected.

 

I'm using Presto-Changeo Attribute Grid. The error occurs with this module "on" or "off", so it's not the module.

 

In the following Product, it happens that, if I delete the file 15-jquery.uniform-modified.js in the themes/default-bootstrap/js/autoload, radio buttons look as they should, but in duplicate if Attribute Grid is active, and when a combination is selected, it does not deselect the previously selected.

 

I think we should correct a line in that file, 15-jquery.uniform-modified.js but I do not know which line.

 

Edited July 12, 2015 by Aldeag (see edit history)

[Delorien]

If you don't wanna remove 15 - jquery.uniform - modified.js , just disable for the specific elements :
 

$(window).load(function() {
  $.uniform.restore(".noUniform");
});

<ul>
	<li>
		<label>
			<input class="noUniform" type="radio" name="my-radio"/>
		 </label>
		 .
		 .
		 .
	</li>
</ul>

[Arethusa]

Thank you very much!! I solve the problem with your solution! 

[Aldeag]

 

If you don't wanna remove 15 - jquery.uniform - modified.js , just disable for the specific elements :

 

$(window).load(function() {
  $.uniform.restore(".noUniform");
});

<ul>
	<li>
		<label>
			<input class="noUniform" type="radio" name="my-radio"/>
		 </label>
		 .
		 .
		 .
	</li>
</ul>

Where do I have to modify this? Do I have to add or delete somewhere? Where and how?

I´m facing again a very old problem

 

Thanks.

[Aldeag]

If I delete that file completely I get problems registering customers

[Aldeag]

Where do I have to modify this? Do I have to add or delete somewhere? Where and how?

I´m facing again a very old problem

 

Thanks.

 

 

If you don't wanna remove 15 - jquery.uniform - modified.js , just disable for the specific elements :

 

$(window).load(function() {
  $.uniform.restore(".noUniform");
});

<ul>
	<li>
		<label>
			<input class="noUniform" type="radio" name="my-radio"/>
		 </label>
		 .
		 .
		 .
	</li>
</ul>

If I do this I get problems registering customers

[DrawdeX]

Hi,

 

This may be a little late to reply on this post, but it might be helpful for other people visiting here.

Sorry if my grammar isn't understandable, but I'm doing my best.

 

Have a look at '[THEME_NAME]/js/autoload/15-jquery.uniform-modified.js' lines 1072 to 1081.

You could also try to remove the file, but you would have to remove all the lines that refer to it.

Deleting '15-jquery.uniform-modified.js' file removes any css design applied for the input types, or other possible problems that might occur.

 

----------

Here's my solution:

On '15-jquery.uniform-modified.js' file, find the keyword 'radio' until you'll see this code below. You can delete or comment this one. Though, it removes any css design applied for radio buttons.

{
	// Radio buttons
	match: function ($el) {
		return $el.is(":radio");
	},
	apply: function ($el, options) {
		var ds, $div, $span;
		ds = divSpan($el, options, {
			divClass: options.radioClass
		});
		$div = ds.div;
		$span = ds.span;

		// Add classes for focus, handle active, checked
		bindUi($el, $div, options);
		bindMany($el, options, {
			"click touchend": function () {
				// Find all radios with the same name, then update
				// them with $.uniform.update() so the right
				// per-element options are used
				$.uniform.update($(':radio[name="' + attrOrProp($el, "name") + '"]'));
			}
		});
		classUpdateChecked($span, $el, options);
		return {
			remove: unwrapUnwrapUnbindFunction($el, options),
			update: function () {
				classClearStandard($div, options);
				classUpdateChecked($span, $el, options);
				classUpdateDisabled($div, $el, options);
			}
		};
	}
},

Refresh the page and done!

[DrawdeX]

If I delete that file completely I get problems registering customers

 

Hi,

 

I didn't get what you mean by "problems registering customers", but maybe this topic will solve your problem.

[Aldeag]

Hi,

 

This may be a little late to reply on this post, but it might be helpful for other people visiting here.

Sorry if my grammar isn't understandable, but I'm doing my best.

 

Deleting '15-jquery.uniform-modified.js' file removes any css design applied for the input types, or other possible problems that might occur.

 

----------

 

Here's my solution:

On '15-jquery.uniform-modified.js' file, find the keyword 'radio' until you'll see this code below. You can delete or comment this one. Though, it removes any css design applied for radio buttons.

{
	// Radio buttons
	match: function ($el) {
		return $el.is(":radio");
	},
	apply: function ($el, options) {
		var ds, $div, $span;
		ds = divSpan($el, options, {
			divClass: options.radioClass
		});
		$div = ds.div;
		$span = ds.span;

		// Add classes for focus, handle active, checked
		bindUi($el, $div, options);
		bindMany($el, options, {
			"click touchend": function () {
				// Find all radios with the same name, then update
				// them with $.uniform.update() so the right
				// per-element options are used
				$.uniform.update($(':radio[name="' + attrOrProp($el, "name") + '"]'));
			}
		});
		classUpdateChecked($span, $el, options);
		return {
			remove: unwrapUnwrapUnbindFunction($el, options),
			update: function () {
				classClearStandard($div, options);
				classUpdateChecked($span, $el, options);
				classUpdateDisabled($div, $el, options);
			}
		};
	}
},

Refresh the page and done!

 

I deleted this lines of code and it works as I want giving better appearance to radio buttons, but then it happens I got problems with customers registration which I solved changing from One step Checkout to 5 steps.

Edited June 11, 2017 by Aldeag (see edit history)

[Aldeag]

If I delete the code you mention, it gives the appearance I was looking for the radio buttons, but then the customer cannot register. I get an error message:

 

TECHNICAL ERROR: unable to send login informations

Details:
Error thrown: [object Object]
Text status: parsererror

 

AND:

 

Error occured: TypeError: jsonData is null
http://aldeaglobaltarifa.com/themes/default-bootstrap/cache/v_93_2ba1965672a2a61063cf04e5e32ebb5e.js
 on Line: 796

[Aldeag]

If I delete the code you mention, it gives the appearance I was looking for the radio buttons, but then the customer cannot register. I get an error message:

 

TECHNICAL ERROR: unable to send login informations

 

Details:

Error thrown: [object Object]

Text status: parsererror

 

AND:

 

Error occured: TypeError: jsonData is null

http://aldeaglobaltarifa.com/themes/default-bootstrap/cache/v_93_2ba1965672a2a61063cf04e5e32ebb5e.js

 on Line: 796

Well, I solved this this way:

In Preferences-> Orders:

Instead One page checkout I changed to 5 steps and that solved this issue.  Thanks.

[petrutz91]

To solve this problem first:

• relax
•  try to be happy becasue you are almost solve it
• apply the solution of Delorien, is working

Quote

$(window).load(function() {
  $.uniform.restore(".noUniform");
});

<ul>
	<li>
		<label>
			<input class="noUniform" type="radio" name="my-radio"/>
		 </label>
		 .
		 .
		 .
	</li>
</ul>

 

Edited December 21, 2017 by petrutz91 (see edit history)