Support Forums : positioning of checkboxes

We encourage an open exchange of information. Ask your questions or make suggestions. We are here to help, but we also encourage all of you to help one another.
Click on the Subscribe Flag to be notified by email of replies to your post.
Current User: Guest Login Register
Please consider registering

positioning of checkboxes

Add a New Topic Reply to Post
UserPost

12:08
June 16, 2008


Olga

Guest

How can I adjust the positioning of my checkboxes? If the text next to a checkbox only consists of a single line, then the checkboxes are positioned perfectly. However, if I have multiple lines of text next to a checkbox, then the check box becomes positioned in the middle, which does not look very aesthetically pleasing. I have tried inserting breaks before the actual text to push the text down and allign it with the checkbox, and this generated a new problem: an excessive amount of space between the previous checkbox/text and the one I am trying to push down. How can allign the checkbox with the first line of the text that corresponds to it, and still maintain equal amounts of space between the different options that follow a question?

Thank you!

3:50
June 16, 2008


Chad

Moderator

posts 689

Hi Olga,
If you’re using one of our older templates it may not have this fix.

If you go to Edit Survey->Look & Feel->This Theme’s CSS Template and add the code to the bottom:

table.sg_Table td {
vertical-align:middle;
}

If this doesn’t do it for you. Could you send us the name of the survey and we’ll go take a look.

Thanks,
Chad

3:59
June 16, 2008


Olga

Guest

Chad,

Unfortunately, this solution did not alter the position of the textboxes, so it would be great if you could take a look and somehow modify the CSS style rules so that the checkboxes would be on the top and not the middle as they currently are. The name of the survey is RADAR. I am very new at this, so I really appreciate your help.

4:07
June 16, 2008


Mario

Moderator

Boulder, CO

posts 450

Olga,
Go into your Look & Feel CSS and find the following section (about 2/3rds of the way down):
input.sg_Checkbox {
border:none !important;
background:none !important;
margin:0px 10px;
vertical-align:absmiddle;
}

Change the last line to:
vertical-align:top;

That should give you the desired effect.

4:30
June 16, 2008


Olga

Guest

Chad, I went ahead and modified that line of the CSS code, but the checkboxes are still in the middle and not on the top. Did I do something wrong? Now that line says:

}
input.sg_Radio,
input.sg_Checkbox {
border:none !important;
background:none !important;
margin:0px 10px;
vertical-align:top;

Thank you for your help.

4:59
June 16, 2008


Mario

Moderator

Boulder, CO

posts 450

You’re absolutely right, I was in error.
Change that back to absmiddle as it was before, then find this line at the bottom of the CSS:
.
.
table.sg_Table td {
vertical-align:middle;
}
.
.
Replace it with:
.
.
table.sg_Table td {
vertical-align:top;
}
.
.
Tested this one, and it should work fine. Fair warning, this will effect more than just checkboxes that have a multi-line label.

5:18
June 16, 2008


Olga

Guest

Chad,

I just implemented your latest suggestion and it doesn’t look like anything changed. You are saying that changing “middle” to “top” will move all of the checkboxes throughout the survey to the top, right? Right now the checkboxes are still positioned in the middle of the individual options that are next to them, and I am trying to get the checkboxes to be at the top (next to the first sentence of each response). This middle positioning is not a problem for options that consist of a single line, but only a problem for options that consist of multiple lines. In the latter situation, it becomes unclear which checkbox the multi-line option corresponds to. This is why I am trying to move the checkboxes to the top. Am I still doing something wrong?

6:06
June 16, 2008


Olga

Guest

Mario (I apologize for calling you Chad earlier; my oversight).

The checkboxes are still in the middle and I noticed the following text on the bottom of the CSS code under “/* Required Lables, Messages, Errors etc */”

.sg_Matrix_Textbox table.sg_Table,
.sg_Matrix_Radio table.sg_Table,
.sg_Matrix_Checkbox table.sg_Table {
width:99% !important;

Could the error described above be the reason why I’ve been unable to move the checkboxes to the top?

6:24
June 16, 2008


Mario

Moderator

Boulder, CO

posts 450

Yeah, when you deleted the code Chad said to add, you deleted the closing curly brace for the code you just mentioned. I’ve fixed this by adding the } and it is working fine now in your survey.

7:10
June 16, 2008


Olga

Guest

I clicked “page refresh” several times, but the check boxes are still showing up in the middle throughout the survey even after you added the concluding curly brace. I am probably doing something wrong or explaining the problem wrong. Thank you for trying to help anyway!

7:24
June 16, 2008


Olga

Guest

Chad and Mario, I figured out my mistake! I’ve been looking at the survey in the edit mode after you’ve revised the CSS code, and it only now occurred to me to look at it in the “preview” mode. Everything looks great. Thank you so much for all of your help.

1:42
June 17, 2008


Mario

Moderator

Boulder, CO

posts 450

no problem, glad we could help!

Add a New Topic Reply to Post


Reply to Topic: positioning of checkboxes

Guest Name (Required):

Guest EMail (Required):

Guest URL (required)

Math Required!
What is the sum of: 3 + 2        (Required)

Topic Reply:


 
© Simple:Press Forum - Version 3.1.4 (Build 357)