Have an idea?

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

response on right side

Hi,

I need the response in the right side and note the left side, i try to do it from response option format, justify right but it is not working

Thanks
asked Nov 20, 2018 by Ossama

1 Answer

0 votes
Try adding this script to your select question and tell me what you think:

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .response_row').each(function(){
        $(this).append($(this).find('.input_cell'));
    });
    
    $(window).resize(function(){
        var maxWidth = 0;
        $('#[% QuestionName() %]_div .option_cell').each(function(){
            var thisWidth = $(this).width();
            if (thisWidth > maxWidth) {
                maxWidth = thisWidth;
            }
        });
        $('#[% QuestionName() %]_div .option_cell').width(maxWidth);
    });
    
    $(window).resize();
})
</script>
answered Nov 20, 2018 by Zachary Platinum Sawtooth Software, Inc. (108,875 points)
thanks, but this is not what I need what I need is the below, the response appears in the script on the left side like below

Brand1
Brand2
Brand3

what I need is the response to be on the right side like below

                                                                                                                                      Brand1
                                                                                                                                       Brand 2
                                                                                                                                       Brand3

Thanks
You want the question right justified?  Where would the radio buttons / checkboxes wind up?
Yes, i want the question to be right justified, as for radio buttons/ check boxes if it will be at right will be great if not then left will be OK
Try this:

<style>
#[% QuestionName() %]_div .response_column,
#[% QuestionName() %]_div .selectRowWrapper {
    margin-left: auto;
    margin-right: 10px;
}
</style>

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .response_row').each(function(){
        $(this).append($(this).find('.input_cell'));
        $(this).children().wrapAll('<div class="selectRowWrapper"></div>');
    });
    
    $(window).resize(function(){
        // Adjust label widths
        var maxWidth = 0;
        $('#[% QuestionName() %]_div .option_cell').each(function(){
            var thisWidth = $(this).width();
            if (thisWidth > maxWidth) {
                maxWidth = thisWidth;
            }
        });
        $('#[% QuestionName() %]_div .option_cell').width(maxWidth);
        
        // Mobile alignment fix
        maxWidth += Number($('#[% QuestionName() %]_div .input_cell').width());
        maxWidth += Number($('#[% QuestionName() %]_div .input_cell').css('margin-left').replace(/px/, ''));
        maxWidth += Number($('#[% QuestionName() %]_div .input_cell').css('margin-right').replace(/px/, ''));
        maxWidth += Number($('#[% QuestionName() %]_div .option_cell').css('margin-left').replace(/px/, ''));
        maxWidth += Number($('#[% QuestionName() %]_div .option_cell').css('margin-right').replace(/px/, ''));
        $('#[% QuestionName() %]_div .selectRowWrapper').width(maxWidth);
    });
    
    $(window).resize();
})
</script>
...