Have an idea?

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

Maximising the other specify box dimesions for all devices

Using Lighthouse Studio v9.1.0.

I'd like to apply some CSS that will enable the other specify box to widen so that it looks good and utilises the screen width for all devices.

When the device and/or orientation increase in screen width, the other specify box currently stays the same size.

It's no good I insert fixed dimensions as that will have the other specify box too wide for the smaller devices and introduce horizontal scrolling.

Thanks.
asked Sep 18, 2016 by Paul Moon Platinum (62,800 points)
edited Sep 19, 2016 by Paul Moon

1 Answer

0 votes
This CSS should work very well for select questions and mobile select questions:

<style>
.response_body, .response_column {
    width: 100%;
}

.options label {
    white-space: nowrap;
}

.option_cell {
    width: 100%;
    max-width: 100%; /* Firefox fix */
}

/* Single line OS */
.other_specify_table, .other_specify_table tr > td:nth-child(2) {
    width: 100%;
}
 
.other_specify_table input {
    width: 95%;
}

/* Multiple line OS */
.options textarea {
    width: 95%;
}
</style>


The 95% is arbitrary.  I found that using 100% looked bad in mobile select questions, so I lowered it by a smidgen.

I reckon this will be sufficient, but I can try to make the code work for other question types upon request.

EDIT: Edited the CSS to add functionality for multiple-line other specify fields.
answered Sep 19, 2016 by Zachary Platinum Sawtooth Software, Inc. (84,025 points)
edited Sep 20, 2016 by Zachary
...