Grid question width in % format

Question

Within a grid question, we have a setting for "Width of Labels Column (%)". Great feature to have.

With Sawtooth Software v9 now being mobile friendly, wouldn't it be a good idea to have a setting "Question Width (%)"?

In the meantime, what's the best approach around this problem? I refer to all grid data entry types - numeric / text / radio buttons / check boxes / etc.

In particular, I need a grid numeric solution.

Thank you.

Comments

To clarify, is your goal to define how much of a mobile device's width the mobile grid questions take up, effectively creating margins that take up X% of each side of the screen?

---

Yes Zachary.

I'd like to set the question width to say 90%. Then the label width takes up a % of the question width.

Answer 1

This code will center each mobile "card" and give them all a width of 90%:

<style>
.mobile_grid_card {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.mobile_grid_card .text_input {
    width: 90%;
}
</style>

I noticed that single-line open ends could potentially stretch out of narrow cards, so I added the ".text_input" part to clean that up.

Am I going down the right path?  I'm not sure what you need in regards to the label width as there isn't really a labels column in mobile grids.

Comments

Thanks Zachary. You are correct - the labels column % refers to desktops / laptops. If the device is a desktop / laptop, then apply the label column width %. If a mobile device, ignore it.

I was referring to the label width setting as it acts the way I would like the question setting to act for all devices. Enter in a % rather than pixels. Entering in pixels is great for the larger devices but not so the mobile devices.

I will check your script out a little later today and report back.

Onya buddy.

---

I see.  I agree - setting widths with a pixel count is archaic in the mobile age.  It would be nice to replace pixel-based widths with percentage-based widths eventually.

---

Yes, agree totally. Another one for the developers mate but I think it is a relevant setting that most users would find extremely useful.

---

Hi Zachary, whilst on this topic, what's the best method to set the question width via a % approach for the larger devices. So I don't want this to affect the mobile phones (small / medium / large), just the desktop / laptop view.

I used this which works nicely but I want this to only apply to the larger devices ...

<style>
.question
{
    width: 70%;
}
</style>

---

If you want code that applies a width to every question for non-mobile users only, the easiest option would probably be to use JavaScript to apply certain CSS rules only for certain screen widths.  For example:

<script>
if ([% ScreenWidth() %] > 800) {
    $('.question').css('width', '70%');
    $('.question').css('margin-left', 'auto');
    $('.question').css('margin-right', 'auto');
}
</script>

You'll want to preview your survey well after using CSS like this.  You may need additional CSS to make wider page contents (e.g., grids, multiline open ends, CBCs) look nice with the smaller width.

---

Thanks Zachary. That appear to work okay. I am not applying this to all questions, just a numeric grid which looks too wide on a desktop / laptop when asking for dollar figures to be entered in.