Rank Question: Is it possible to adjust the width of the collumns?

Question

In my rank question I would like to make the first column (that containing the response options) to make it at least twice the width of the other columns. Is this possible?
I am using SSI Web 7.

Comments

I am surprised you couldn't simply change the INPUT BOX WIDTH (like in numeric type questions)?

I'm not a CSS wizard. I have some basic knowledge only but I believe you can keep it as a ranking question and modify the CSS file.

Can a Sawtooth member please confirm the details?

Answer 1

I would suggest setting it up as a grid question and make it column based.  Then assign the column to a type of "ranking".  This will give you the control over the widths of the columns that you want.

Answer 2

You can modify boxes using CSS.  If I had a question called RankThis and wanted to make the second input box 200 pixels wide, I could put this into the HEAD tag (or really anywhere on the page):

<style type="text/css">
#RankTopFive_2
{width:200px;}
</style>

It seems like a bit of an odd request, though, because typically the label of the thing you are ranking is much larger than the rank value, i.e. Brand A is longer than a 2.

Regarding Paul's comment, my best guess is that we don't have a box to change the width because it's probably never come up before.  I would imagine the vast majority of ranking question to be fewer than 10 items, so the default size works well for a single numeric input from the respondent?

Comments

Thanks for the responses. Really sorry, but just realised I told you it was a rank question - Its actually a GRID format.

It is the first collumn, with the label of the thing I am ranking (ie Brand A), that I wish to change the width of.

Im a little unclear on where #RankTopFive comes from in your answer. Is this the row label? Column A doesnt have a label, so Im not sure how to adapt your css script.

Thanks,

Ricky

---

CSS works by identifying things either by a class, or HTML tag or directly by name.  RankTopFive would have been my question name, and RankTopFive_2 is the name of the box for the second item in that question.

For a grid question, the first column is given a few classes to inherit styling, and one of those would be grid_c1.  If I wanted to make it 150 pixels wide and give it a red border, I could add this:

<style type="text/css">
.grid_c1
{width:150px;
border:solid red 3px;}
</style>