Have an idea?

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

BYO styling issue. How to align conditional images to the attribute rows?

I use conditional display function to show product feature images in the right panel at the BYO question. Unfortunately, it's impossible to properly align the images with the attributes by defining the placeholder height, because every browser renders it slightly different (and I'm not not even talking about mobile versions).

Is there a way to add a fourth column to the BYO question, in which I can show the images?

I am grateful for any solution!
asked Dec 2, 2020 by Alex C. (350 points)

1 Answer

0 votes
Adding this to your BYO might get you closer to what you want:

<script>
$(document).ready(function(){
    // Parameters
    var attToCondRel = {
        1: 1,
        3: 2
    };
    
    // Run
    Object.keys(attToCondRel).forEach(function(att){
        var td = $('<td></td>');
        $(td).append($('#[% QuestionName() %]_rel_' + attToCondRel[att]));
        $('#[% QuestionName() %]_row_' + att).append(td);
    });
})
</script>

<style>
#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(1) {
    width: 30%;
}

#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(2) {
    width: 40%;
}

#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(3) {
    width: 30%;
}
</style>


The lines 5-6 area can be updated to represent which attributes should display which conditional display items.

I manually defined widths for each of the three columns (attribute labels, level labels, and conditional display fields) in the included CSS, but you could adjust the exact widths used to modify how the question displays.
answered Dec 2, 2020 by Zachary Platinum Sawtooth Software, Inc. (161,250 points)
Thank you Zachary!
That's exactly what I was looking for.
...