response on right side

Question

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

Answer 1

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>

Comments

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>

---

Hello,

I have to versions for the survey one of them in Arabic which the text should appear from right to left. I have used two codes for this one that makes the text start from righ t left {<style type="text/css">
    body {
        direction: rtl;
        text-align: right;
    }
</style>}

but then the bullet points for response options start from the left and they have not aligned as well as the responses. They appear as follow:
                                                                                                               question in Arabic -1
                                                                                                                                     O option1
                                                                                                                                  O options 2
                                                                                                                                     O option3

So I tried the code you suggested here with the one for style and then the responses aligned to but to the left and the bullet points still at the left side. Is there any way to make the bullet points start from the right then all responses align from right to left?

---

Please try adding this between lines 23 and 24 of my previous script:

$(this).parent().append($(this));

---

So after adding this code still did not work. The bullet points look as follow:
                                                                                                               question in Arabic -1
                                                                                                                                     0 option 1
                                                                                                                                     0 option2
                                                                                                                                     0 option3
The text is aligned in the options aligned to the left with ullet in the left. what I am trying to achieve is to have the bullet start fro the right and the text aligned from the right to the left:
                                                                                                               question in Arabic -1
                                                                                                                                     option 1 0
                                                                                                                                      option2 0
                                                                                                                                      option3 0

The code I used one fixed the question to start from right to left but the response issue was the alignment.  The current code as follow:

<style type="text/css">
    body {
        direction: rtl;
        text-align: right;
    }
</style>

<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);
        $(this).parent().append($(this));
    });
     
    $(window).resize();
})
</script>

---

That's not the correct location.  The text that displays to the left of my code on this forum shows the code lines.  Please locate lines 23 and 24 using that, then add my script between those two lines.  Right after this:

if (thisWidth > maxWidth) {
    maxWidth = thisWidth;
}

---

It workes great thanks.  The bullet points started from the right and the options as well. However, there is one little issue. The text in the options is divided into two lines as follow:
                                                                                                                                  Question -1
                                                                                                                                     Option 0  
                                                                                                                                      one
                                                                                                                                     Option 0
                                                                                                                                      Two

So two issues appear here. The options bar did not but all the words even if it is a few letters in one line with huge space remain in the box of the option that can fit even a long sentence. Although I do have long sentences that appeared in one line in some questions. The second issue is that the second line is aligned from the left. The code I used as follow:


<style type="text/css">
    body {
        direction: rtl;
        text-align: right;
    }
</style>

<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;
            }
            $(this).parent().append($(this));
        });
        $('#[% 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>