[Resolved] Bootstrap radio buttons

[Author]

Posts

[toolset-dave]

Hi,

I would like to have Bootstrap version of radio buttons as you can see in attached image. But I don´t know how to make it functional. I have found documentation here: hidden link

Original CRED field:

[cred_field field='doruceni-zdarma' post='poskytovatel' value='' urlparam='' output='bootstrap']

My attempt implement it:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="doruceni-zdarma" id="elektronicky" autocomplete="off" checked> Elektronicky
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="doruceni-zdarma" id="posta" autocomplete="off"> Poštou
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="doruceni-zdarma" id="osobne" autocomplete="off"> Osobním odběrem
  </label>
</div>

[Noman]

Hi,

Thank you for contacting Toolset support. I am trying to reproduce this at my end, and will get back to you soon with an update.

Thank you

[Noman]

You can achieve this using following CSS and JS.

1. Please use your post radio field like this:

<div class="bootstrap-radio">
[cred_field field='doruceni-zdarma' post='poskytovatel' value='' urlparam='' output='bootstrap']
</div>

2. Please add JS in CRED JS Editor:

jQuery(document).ready(function( $ ){
            	$('.bootstrap-radio').find('li').on('click',function(){
                            	$('.bootstrap-radio').find('li').removeClass('active');
                            	$(this).addClass('active');         	
            	});
});

3. Please add following CSS in CRED CSS Editor:

.bootstrap-radio li {
  background-color: #337ab7;
  border-radius:4px;
  border:1px solid #204d74;
  cursor:pointer;
  float:left;
 }
 
.bootstrap-radio li:hover,
.bootstrap-radio li.active{
	background-color: #286090;
}
 
.bootstrap-radio input {
            	clip: rect(0px, 0px, 0px, 0px);
	pointer-events: none;
	position: absolute;
}
 
.bootstrap-radio li label {
  color: #fff;
  cursor:pointer;
  margin:0;
  padding: 6px 12px;  
}
 
.bootstrap-radio li:not(:first-child):not(:last-child) {
	border-radius: 0;
}
 
.bootstrap-radio li:first-child:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
 
.bootstrap-radio li:last-child:not(:first-child),
.bootstrap-radio li:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
 
.bootstrap-radio li+li {
	margin-left: -1px;
}

Thank you

[toolset-dave]

Thank you for the code, it works. However there are two problems: If user saves the form and has something required not filled, the form will load again with some validation message, that´s ok, but the before selected radio button will not be checked. Also when you load the form for the first time, the preselect default button is not checked.

[Noman]

Okay, please provide temporary access (WP-Admin and FTP Login info) to your staging site.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please add the Links to the [CRED Form] Edit Screen and [Page] Edit Screen where you have inserted this Form.

Thank you

[Noman]

Hello,

I’ve updated following CSS and JS code, and it appears to be working good:

.bootstrap-radio ul {
	padding-left: 0;
}
 
.bootstrap-radio li {
  background-color: #337ab7;
  border-radius:4px;
  border:1px solid #204d74;
  cursor:pointer;
  float:left;
  list-style:none;
 }

jQuery(document).ready(function( $ ){
            	$('.bootstrap-radio').find('input:checked').parents('li').addClass("active");
    $('.bootstrap-radio').find('li').on('click',function(){
        $('.bootstrap-radio').find('li').removeClass('active');
        $(this).addClass('active');            
	});
});

Thanks

[toolset-dave]

Thank you. It works.