Moving Select Button in CBC

Question

Would it be possible to move the select button to the left side of the concept?

Comments

So the same vertical position, but positioned right next to the left border of each concept?

---

No actually different vertical and horizontal position. Sorry I meant to the right of the concept.
I have 2 concepts stacked in rows. I want the select button to be positioned right next to the middle of the right border of each concept.

Thank you!

---

That sounds like it should be doable, but I'd need some more info:

1.  What version of Lighthouse Studio / SSI Web are you running?
2.  What settings have you applied to the CBC to get it to look this way?  Maximum number of concepts per row?  Menu based choice?
3.  Do you have any custom CSS already applied to this page?

---

Hi!

1- We're using Lighthouse Studio Version 9.14.2
2- We have 2 concepts per task with 1 concept as the maximum number of concepts per row. We have the discrete choice set up.
3- No we haven't applied any custom CSS to this page.

Thank youu!

---

Hi Zachary!

Thank you for your reply and your help.

The code worked - but I was hoping we could do some tweaks.

The concepts are in the first 2 rows - and in the 3rd row we are asking a yes/no question.
All the buttons have moved to the side of the box (as requested) - but I was wondering if we could keep the yes/no buttons in the middle (as they would be in default mode) for the last row (which would be the question).

Also, is it possible to change the button from a "Select" button to a radio button?

Thanks again for your time and help.

---

I've posted a modified script below.

Answer 1

Please try adding this to your CBC and see if it gets us close to what you're after:

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .cbc_concept').each(function(){
        $(this).children(':not(.cbc_response_cell)').wrapAll('<div class="concept_levels"></div>');
    });
})
</script>

<style>
@media only screen and (min-width: 801px) {
    #[% QuestionName() %]_div .attribute_label_column .cbc_response_cell {
        display: none;
    }
    #[% QuestionName() %]_div .cbc_concept {
        flex-direction: row;
    }
    #[% QuestionName() %]_div .concept_levels {
        flex-grow: 1;
        margin-bottom: 24px;
    }
    #[% QuestionName() %]_div .cbc_response_cell {
        display: flex;
        flex-direction: column;
    }
}
</style>

Comments

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .cbc_concept:not(:last-child)').each(function(){
        $(this).children(':not(.cbc_response_cell)').wrapAll('<div class="concept_levels"></div>');
    });
    $('#[% QuestionName() %]_div .task_select_button').each(function(){
        var clickable = $(this).children('.clickable');
        $(clickable).removeClass('HideElement');
        $(this).after(clickable);
        $(this).hide();
    });
})
</script>

<style>
@media only screen and (min-width: 801px) {
    #[% QuestionName() %]_div .attribute_label_column .cbc_response_cell {
        display: none;
    }
    #[% QuestionName() %]_div .cbc_concept:not(:last-child) {
        flex-direction: row;
    }
    #[% QuestionName() %]_div .concept_levels {
        flex-grow: 1;
        margin-bottom: 24px;
    }
    #[% QuestionName() %]_div .cbc_response_cell {
        display: flex;
        flex-direction: column;
    }
    #[% QuestionName() %]_div .cbc_concept:last-child .cbc_response_cell {
        height: auto !important;    
    }
}
</style>

---

Hi Zachary,

Thank you so much for your help.

It works - but the radio button for the second is on a new row (instead of next to the concept).

Also, I am so sorry - but is there a way to put the concept levels (the text) before the concept so the display would be:
Concept levels (text) - Concept (image) - Select button (as radio head)
All of them on the same row.

Thank you again for your help and time.

---

Try this with the conditional display being set to the bottom of the concept:

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .cbc_concept:not(:last-child)').each(function(){
        $(this).children().slice(0, -2).wrapAll('<div class="conceptTexts"></div>');
    });
    $('#[% QuestionName() %]_div .task_select_button').each(function(){
        var clickable = $(this).children('.clickable');
        $(clickable).removeClass('HideElement');
        $(this).after(clickable);
        $(this).hide();
    });
})
</script>

<style>
#[% QuestionName() %]_div .attribute_label_column > :nth-child(n + 4) {
    display: none;
}

#[% QuestionName() %]_div .cbc_concept:not(:last-child) {
    display: flex;
    flex-direction: row;
}

#[% QuestionName() %]_div .conceptTexts {
    flex-grow: 1;
}

#[% QuestionName() %]_div .cbc_response_cell {
    display: flex;
    flex-direction: column;
}

#[% QuestionName() %]_div .cbc_concept:last-child .cbc_response_cell {
    height: auto !important;
}
</style>