Have an idea?

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

Set max-width for grid

If I set Grid Body Width at 500px then Set the body Alignment to Center I achieve the look I'm going for but if the window is resized the grid is locked at 500px and is not longer responsive. Is there an option to set the grid at a max-width of 500px so I can achieve the same look yet the grid is responsive in the window is resized?
Thanks!
asked Apr 16 by Chris Guth Bronze (780 points)

1 Answer

+2 votes
 
Best answer
The goal is to set a 500px width on wide screens but apply no set width for narrower screens, right?  You could achieve that if you cleared the width setting in the grid question and instead add CSS like this to your question:

<style>
@media only screen and (min-width: 800px) {
    #[% QuestionName() %]_div .inner_table {
        width: 500px;
    }
}
</style>
answered Apr 16 by Zachary Platinum Sawtooth Software, Inc. (121,725 points)
selected Apr 17 by Chris Guth
Thanks Zachary!
This accomplishes what I was looking to do.  Curious, is if possible to add a blank column to the grid? Originally I was hoping to add a blank column to the grid, then set custom column widths to center the grid and keep the alternating rows colors extending the width of the page. As it now, if I use alternating row colors they only extend the width of the grid (e.g. 500px). With a few row items I can turn off the alternating colors but with more items in the list, the alternating row colors is helpful. With a single response column in grid the formatting of the grid looks wacky.
Replacing that CSS above with this JS will add a wide additional column in the >800px case:

<script>
$(document).ready(function(){    
    if (SSI_ScreenWidth() > 800) {
        $('#[% QuestionName() %]_div .inner_table > tbody > tr').each(function(){
            var altColor = $(this).children().hasClass('alt_color1') ? 'alt_color1' : 'alt_color2';
            $(this).append('<td class="extraColumn ' + altColor + '"></td>');
        });
    
        var tableWidth = $('#[% QuestionName() %]_div .inner_table').width();
        var numberOfOriginalColumns = $('#[% QuestionName() %]_div .inner_table > tbody > tr:first-child > td').length - 1;
        $('#[% QuestionName() %]_div .inner_table > tbody > tr > td:not(.extraColumn)').width(500 / numberOfOriginalColumns);
        $('#[% QuestionName() %]_div .inner_table > tbody > tr > td.extraColumn').width(tableWidth - 500);
    }
})
</script>
awesome. thank you!
...