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

Question

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!

Answer 1

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.

Comments

Thank you Zachary!
That's exactly what I was looking for.