Answers

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  January 2020 edited January 2020

  Yes, that plug-in doesn't trigger an input event itself because it doesn't use input elements. Its a little bit of a cheat since it uses button elements.

  The way to make dependent() work with it would be to trigger a change event inside the click event listener.

  Allan
• blabablaba Posts: 47Questions: 19Answers: 0

  January 2020 edited January 2020

  Thank you Allan, I rethought the problem and have created a much smoother flow using radio buttons, dependent and trigger.

  My only issue with radios is styling. I want the radios to be presented in the 'datatables button style' ie class="inputButton". CSS is not my strong point so I did wonder if this has been done before.

  I had implemented your useful suggestion to make radios in the horizontal here: https://datatables.net/forums/discussion/39132/custom-field-type-for-horizontal-radio-buttons

  I would like to achieve a horizontal toggle button styling as shown in the plugin:

  https://editor.datatables.net/examples/plug-ins/fieldPlugin.html

  Is this possible with radios?

  Any help greatly appreciated
• blabablaba Posts: 47Questions: 19Answers: 0

  January 2020

  Hi Allan,

  I have solved the problem! The CSS solution for a button-formatted toggle using radio buttons with a flexbox is below, I hope it might help others.

  div.DTE_Field_Type_radio.DTE_Field_Name_{fieldName} div.DTE_Field_InputControl > div  {
    display: flex;
    justify-content: space-between; 
    flex-flow: wrap;
  
  }
  
  div.DTE_Field_Type_radio.DTE_Field_Name_{fieldName} div.DTE_Field_InputControl > div > div {
    flex: 0 0 49%;
  
  }
  
  div.DTE_Field_Type_radio div.DTE_Field_Input > div > div input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
  }
  
  div.DTE_Field_Type_radio div.DTE_Field_Input > div > div label {
    float: left;
    text-align: center;
    display: block;
    cursor: pointer;
    margin-left: 0px;
    padding: 6px 0;
    background: #F8F8F8;
    background: -webkit-gradient(linear, center bottom, center top, from(#CCC), to(white));
    background: -moz-linear-gradient(top, white, #CCC);
    background: linear-gradient(to bottom, white, #CCC);
    text-shadow: 0 1px 0 white;
    border: 1px solid #999;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 0px 0px 2px #999;
    -moz-box-shadow: 0px 0px 2px #999;
    -webkit-box-shadow: 0px 0px 2px #999;
    width: 100%;
  }
  
  div.DTE_Field_Type_radio div.DTE_Field_Input > div > div input[type="radio"]:checked + label {
    font-weight: normal;
    background: #02475A;
    background: -webkit-gradient(linear, center bottom, center top, from(#777), to(#333));
    background: -moz-linear-gradient(top, #333, #777);
    background: linear-gradient(to bottom, #333, #777);
    box-shadow: inset 0px 0px 2px #222;
    -moz-box-shadow: inset 0px 0px 2px #222;
    -webkit-box-shadow: inset 0px 0px 2px #222;
    color: white;
    text-shadow: none;
  }