You are viewing limited content. For full access, please sign in.

Question

Question

CSS to put single line next to checkbox

asked on March 2, 2016

Hello,

I want to create a form where I have 10 options in Checkbox, based on the selection an empty field should be displayed next to selected checkbox.

I can hide or display with Field Rules, but can't manage to put it in front of checkbox.

Please see the attached screenshot, I want the corresponding km fields to be opposite to checkbox.

The Single line field will not have any Text, this is just for understanding purpose...

 

Thanks in advance!

Sahil

0 0

Answer

SELECTED ANSWER
replied on March 8, 2016 Show version history

Hey Sahil:

Basically you can implement the suggested behavior with Table field, Field Rules and Javascript code.

Here is the steps:

  1. add Table field and config it in Layout:
    1. add Table field to the Form.
    2. Under Basic Tab:
      1. remove Field label default text
      2. type "Table" in Variable
      3. update Field type for Column 1 to be Checkbox.
      4. click Field options for Column 1, in the dialog:
        1. under Basic Tab: 
          1. remove Field label default text.
          2. Type "Column_1" in Variable.
          3. Only leave choice 1 in Choices
        2. under Advanced Tab, type "checkBoxName" in CSS class
        3. click Done and go back to Table edit.
      5. click Field options for Column 2, in the dialog:
        1. Under Basic Tab:
          1. remove Field label default text.
          2. Type "Column_2" in Variable.
        2. click Done and go back to Table edit.
      6. set 50 Percent for both columns
      7. in Number of rows, specify the Range of row to be 10 Min - 10 Max
      8. in Row labels, type "Schule/Kindergarten"(your Checkbox field name) in Name for column of row labels
    3. ​Under Advanced Tab, type "checkBoxTable" in CSS class
  2. ​add field rules in Field Rules:
    1. show Table>Column_2
    2. When All of the following is true:
    3. Table>Column_1 choice 1 is checked
  3. ​use JavaScript to update checkboxes' label and remove rows' label
    $(document).ready(function(){
        //checkBoxNameList contains all the checkboxes' name in order
        var checkBoxNameList = ['manuelles Eingabefeld', 'Kindergarten',
            'Primarschule', 'Sekundarschule',
            'Gymnasium', 'Fachmittelschule',
            'Berufsfachschule', 'Universitat',
            'ETH', 'Fachhochschule'
        ];
        //checkBoxes selects checkboxes' label HTML components
        var checkBoxes = $('.checkBoxTable').find('.checkBoxName label.form-option-label');
        //update checkboxes' label one by one
        for(var i = 0; i<checkBoxes.length;i++){
            if(checkBoxNameList[i]){
                $(checkBoxes[i]).text(checkBoxNameList[i]);
            }
        }
        
        //remove rows' label
        $($('.checkBoxTable').find('td.col0')).text('');
    });

     

After these steps, the checkbox should work based on your requirement. 

Please let me know if you have any other questions laugh

 

3 0
replied on March 9, 2016

I changed the second filed to single line & all is Perfect!!!

Thanks a million for taking out the time to help!

0 0
replied on December 21, 2018

This is a great explanation and it looks aesthetically great!!! However, what if instead of a single line field appearing next to all selections, you wanted to have a checkbox field appear next to ONE specific selection? I cannot seem to figure this one out.frown

 

0 0

Replies

replied on March 2, 2016

I found this: 

https://answers.laserfiche.com/questions/61914/turn-checkbox-choices-into-fillable-fields-with-checkbox

 

Although it does the job (more or less), is it still possible what I asked?

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.