fix(radiosfield): bad rendering of buttons when printing

Signed-off-by: Thierry Bugier <tbugier@teclib.com>

Author: btry

css/print_form.css

@@ -133,41 +133,3 @@ label[for] {
    height:16px;
    width:16px;
 }
-
-
-/** RADIO BUTTONS */
-
-.formcreator_radios input[type = radio] {
-   display: none;
-}
-.formcreator_radios input[type = radio] + label {
-   cursor: pointer;
-   padding-left: 22px;
-   position: relative;
-   display: block;
-   height: 26px;
-}
-.formcreator_radios input[type = radio] + label:before,
-.formcreator_radios input[type = radio] + label:after {
-   position: absolute;
-   content: "";
-   border-radius: 50%;
-   transition: all 0.3s ease;
-}
-.formcreator_radios input[type = radio] + label:before {
-   top: -1px;
-   left: 0;
-   width: 15px;
-   height: 15px;
-   background-color: #727272;
-   box-shadow: inset 0 0 0 13px #FFF;
-   border: 2px solid #727272;
-}
-.formcreator_radios input[type = radio] + label:after {
-   top: 40%;
-   left: 9px;
-   width: 54px;
-   height: 54px;
-   background-color: rgba(50, 50, 50, 0.1);
-   transform: translate(-50%, -50%) scale(0);
-}

css/styles.css

@@ -337,52 +337,46 @@ form.formcreator_form {
    border: 2px solid #727272;
 }
 
-
+.formcreator_radios .form-group-radio {
+   position: relative;
+   display: inline-block;
+   width: 16px;
+   height: 16px;
+}
+.formcreator_radios .form-group-radio + label {
+   margin-left: 7px;
+}
 .formcreator_radios input[type = radio] {
    display: none;
 }
-.formcreator_radios input[type = radio] + label {
-   cursor: pointer;
-   padding-left: 22px;
-   position: relative;
-   display: inline-block;
-   height: 26px;
+.formcreator_radios .radio {
+   padding: 2px 0;
 }
-.formcreator_radios input[type = radio] + label:before,
-.formcreator_radios input[type = radio] + label:after {
+.formcreator_radios input[type = radio] + label.label-radio span {
+   display: inline-block;
    position: absolute;
-   content: "";
-   border-radius: 50%;
-   transition: all 0.3s ease;
+   width: 16px;
+   height: 16px;
 }
-.formcreator_radios input[type = radio] + label:before {
-   top: -1px;
-   left: 0;
-   width: 15px;
-   height: 15px;
-   background-color: #727272;
-   box-shadow: inset 0 0 0 13px #FFF;
+.formcreator_radios input[type = radio] + label.label-radio .box {
+   background-color: #fff;
    border: 2px solid #727272;
+   border-radius: 50%;
 }
-.formcreator_radios input[type = radio] + label:after {
-   top: 40%;
-   left: 9px;
-   width: 54px;
-   height: 54px;
-   background-color: rgba(50, 50, 50, 0.1);
-   transform: translate(-50%, -50%) scale(0);
-}
-.formcreator_radios input[type = radio]:checked + label:before {
-   box-shadow: inset 0 0 0 2px #E0E0E0;
+.formcreator_radios input[type = radio] + label.label-radio .check {
+   left: 4px;
+   top: 4px;
+   width: 0px;
+   height: 0px;
+   opacity: 0;
 }
-.formcreator_radios input[type = radio]:checked + label:after {
-   transform: translate(-50%, -50%) scale(1);
-   -moz-animation: ripple 1s forwards;
-   -webkit-animation: ripple 1s forwards;
-   animation: ripple 1s forwards;
+.formcreator_radios input[type = radio]:checked + label.label-radio .check {
+   border: 6px solid #727272;
+   border-radius: 50%;
+   transition: opacity 0.3s ease;
+   opacity: 1;
 }
 
-
 .formcreator_form .select2-container-multi .select2-choices  {
    width: 650px;
    min-height: 24px;

inc/fields/radiosfield.class.php

@@ -101,15 +101,24 @@ public function displayField($canEdit = true) {
                if ((trim($value) != '')) {
                   $i++;
                   $checked = ($this->value == $value) ? ' checked' : '';
-                  echo '<p>';
+                  echo '<div class="radio">';
+                  echo '<span class="form-group-radio">';
                   echo '<input type="radio" class="form-control"
                         name="' . $fieldName . '"
                         id="' . $domId . '_' . $i . '"
                         value="' . $value . '"' . $checked . ' /> ';
-                  echo '<label for="' . $domId . '_' . $i . '">';
+                  echo '<label class="label-radio" title="' . $value . '" for="' . $domId . '_' . $i . '">';
+                  //echo $value;
+                  echo '<span class="box"></span>';
+                  echo '<span class="check"></span>';
+                  //echo $value;
+                  echo '</label>';
+                  echo '</span>';
+                  echo '<label class="label-radio" title="' . $value . '" for="' . $domId . '_' . $i . '">';
                   echo $value;
                   echo '</label>';
-                  echo '</p>';
+                  echo '</div>';
+
                }
             }
             echo '</div>';