Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Optimising the O/E text box width for all devices within a grid

I have a simple grid ...

1/ Row direction
2/ One column
3 / Four rows
4/ All rows require single row text / open-ended responses

I'd like to make the text box use the majority (say 90%) of the grid column width when viewing on all devices.

If I don't set a width, the text box looks too thin and needs to be widened.

If I widen the text box to say a static 400 pixels, the desktop / laptop view looks okay but the tablet / mobile view stays the same - too thin.

I know I shouldn't be setting the text box width with a static setting because of the different devices.

What I require is some neat CSS to handle the text box width automatically for all devices.

Thank you.
asked Nov 6, 2016 by Paul Moon Platinum (98,670 points)

1 Answer

0 votes
Mobile grid's have an "input_cell" class that may be constraining the width of the open ends; setting it to have a 100% width should keep it from being a limiting factor.  Please try out this CSS and see if it looks good in your survey:

#GridQ_div .mobile_grid .input_cell {
    width: 100%;

#GridQ_div input.text_input {
    width: 90%;

"GridQ" should be replaced with the name of the grid question.
answered Nov 6, 2016 by Zachary Platinum Sawtooth Software, Inc. (205,575 points)
Worked like a charm. Thanks Zachary.
I ran into this same need and am on version 9.8.1.  I put that script into the header of my grid question and it doesn't seem to have any impact.  Would the script need to be different for this version?  It is identical with 4 rows each set as open end with one line.
Nevermind, typo on my part and all looks good.