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

Question

Question

How to put just a check box in a table field

asked on March 10, 2020

Okay, this may be a very simple question but I am working on a form with a deadline and have never tried this before.  Thanks for your patience! 

I need a table with statements and then 4 possible responses.  I have the table built and my only problem is I need check boxes in the fields..... I have designated the columns as check boxes but don't want to put verbage in the field (choices).  I just want the check box - help!

0 0

Replies

replied on March 10, 2020

You might take a look at this question. It looks similar to what you are after.

1 0
replied on March 10, 2020

Apparently I need more hand holding.  I have copied the css into my form, nothing, I tried adding the #q31 to the front - nothing.  I feel like there is just something in the process that hasn't clicked with me.  The example in the question you referenced for me is exactly what I want.  I'm sorry. 

 

0 0
replied on March 10, 2020

Hi Cindy,

To make the referenced CSS work, add the custom CSS class of "radioFields" into the radio buttons. 

You'll also need to add the custom CSS class "leftSide" to the questions that you want to appear to the left of the radio buttons. 

If you open the CSS/Javascript/Formula Example business process from the business process library, you'll want to make sure that your fields match the fields in the survey layout. 

1 0
replied on March 10, 2020

Okay, I have just had an epiphany about what I am looking at.  This isn't a table!  These are individual questions and then radio buttons.  It's still not looking right though...... thank you so much for your help! This is what I am seeing now... I have entered the css and put the radioFields in the advanced tab of the radio buttons and the leftSide in the advanced tab of the question.  ?? 

0 0
replied on March 10, 2020 Show version history

Did you also set the class name on the question labels?

I just did a quick test form and duplicated what is the in the sample process that @████████ mentioned, and it works fine. It falls apart a little when the window is narrower, but that's probably not a big deal, since it's still usable.

0 0
replied on March 10, 2020

I did.....

0 0
replied on March 10, 2020

I am still struggling.  This is what I have now...

0 0
replied on March 10, 2020

Can you post a screenshot of the preview on the CSS and Javascript tab?

Also, double check that you have all of the CSS from the sample in the CSS box.

/*set the appearance of the labels on the left side*/
.leftSide {
  display : inline-block; 
  width : 20%;
  text-align : right;
}

/*set the appearance of the labels on the right side*/
.rightSide {
  display : inline-block; 
  width : 18%;
}

/*set the appearance of the radio buttons in the center*/
.radioFields  {
  display : inline-block; 
  width : 62%;
}

.radioFields .cf-field {
  width : 100%; 
}

.radioFields .choice .form-option-label, .radioFields .cf-label {
  display : none;
}

.radioFields .choice {
  width : 20%; 
  text-align : center;
}

This is tricky stuff, so don't worry if you struggle with it. Web programming is hard!

0 0
replied on March 10, 2020

I double checked and it all looks the same except I don't have the coding for rightSide.

0 0
replied on March 10, 2020

0 0
replied on March 10, 2020

I got to thinking, I don't know that the resolution is great enough to read - here is just the preview pane:

0 0
replied on March 10, 2020 Show version history

It appears that you have a period at the beginning of the "leftSide" class that you have defined on the question. (see q52) Try getting rid of that.

0 0
replied on March 10, 2020

Devin Goble is correct, you have an extra . before the custom CSS Class.

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

Sign in to reply to this post.