Have an idea?

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

Displaying a code list in 2 columns not working

I am currently using v9.1.0. My survey is using the oceanic style sheet.

I have a number of lengthy code lists being used in select questions. I am displaying each list in their respective select questions in 2 columns.

What I am finding in some cases is the code lists are being displayed in 1 column rather than 2 columns that I have set in the settings.

I can see this is due to some codes having a lengthy description.

Is there a simple solution to get around this?

Using a <br> is not ideal as it makes the lengthy code look ugly in mobile / tablet views.

I understand for mobile / tablet views that the displaying of the code lists will always appear as 1 column. That's fine. It's the desktop view that I am referring to.

Thanks.
asked Oct 21, 2016 by Paul Moon Platinum (65,230 points)

2 Answers

+1 vote
CSS can be used to require that both response columns only take up half of their total allotted space.

<style>
.response_column {
    width: 50%;
}
</style>


As is, that code performs poorly for mobile respondents.  This JavaScript will ensure that only non-mobile respondents see the above CSS:

<script>
$(document).ready(function(){
    if ([% ScreenWidth() > 800 %]) {
        $('.response_column').css('width', '50%');
    }
})
</script>
answered Oct 21, 2016 by Zachary Platinum Sawtooth Software, Inc. (91,500 points)
Thanks Zachary. When I inserted the CSS script you kindly provided, I had the desktop view displaying the codes across 2 columns. That's perfect.

When I viewed in mobile phone / tablet view, the display was poor where the codes appeared in 1 column taking up 50% of the allowable screen (as you indicated).

So I popped in your JavaScript code which had no affect?

I then realised your JavaScript needed to be tweaked as follows ...
<script>
$(document).ready(function(){
    if ([% ScreenWidth() < 800 %]) {
        $('.response_column').css('width', '97%');
    }
})
</script>

The CSS script was setting the columns to 50% and the JavaScript needed to change it back to something like the maximum width (I used 97%) if the screen width was <800 pixels.

Thanks as always. You are a saviour once again. Onya mate.
Oh sorry, I should have worded my answer better.  You can just totally remove the CSS and only use the JS provided.  My JS will set the widths to 50% on wide screens and keep it at 100% on small screens.
Aaahh, got it. Nice solution and apologies for the misunderstanding.

At least I am understanding your script.

As usual, a champion! The forum is so much better with Mr Anderson aboard. Keep up the good work mate.
Hi Zachary, is this something that can be implemented into the next version release? It makes sense to have it as a default. Happy to hear your thoughts.
Hi Paul.  I filed this behavior into our system earlier this week, but I can't speak as to when it might be changed.  Perhaps there is a reason why the software was made this way that I'm simply unaware of.  I can speak to a dev on Monday and get their opinion on this.
0 votes
Paul, I've had this problem as well and have discussed it with them.  It is due to the longer description text on some.  In the past I thought it had always wrapped as needed and this wasn't a problem.  I'm hoping they are working on a solution but I'm not aware of one as of yet.
answered Oct 21, 2016 by Jay Rutherford Gold (26,800 points)
Yeh, I agree Jay. I can't recall this being a problem in the past?

I thought it should and did wrap around?

I'll check it out with the Sawtooth Software crew. I'll get back to you.
Great stuff Zachary. Jay Rutherford and I couldn't see a reason as to why it should not be implemented.

Maybe there is a reason we are all unaware of?

If you could touch base with the development crew and confirm, that would be great.

Hoping it does go in and no hurdles get in the way.

In the meantime, we will use your neat solution.

Thanks mate.
The dev I talked to was unaware of any reason the current behavior might be necessary.  It may be too late to get this into the next Lighthouse release, but it may be able to make it into the release after that.
Sounds like a plan Zachary. Thanks.
...