Have an idea?

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

Format Scale of Calibration Section

Hi guys,

in the last year I conduct an acbc and got some old screenshots, where the scale has portrait format. Now I try my best to copy this style but it's always in landscape format. Scale is going from left to right instead of top to bottom.

How can I change it?

Thanks!
asked Jan 13 by Honeybadger Bronze (535 points)

1 Answer

0 votes
Positioning the inputs differently was a design decision made by the company, but I understand that that look might not be everyone's preference.  Can you try adding this CSS to your calibration question to achieve a look more like the original?

<style>
#[% QuestionName() %]_div .acbc_calibration_options {
    flex-direction: column;
}

#[% QuestionName() %]_div .clickable {
    display: flex;
    flex-direction: row-reverse;
}
</style>
answered Jan 13 by Zachary Platinum Sawtooth Software, Inc. (192,600 points)
Thanks for your fast answer but this look doesn't fit. It is portrait indeed but looks really bad no alignment nothing...
How do you want it to look?  Center the options in the middle of the page?
yes and one liner, not about two lines
<style>
#[% QuestionName() %]_div .question_body {
    display: flex;
    flex-direction: column;
}

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

#[% QuestionName() %]_div .clickable {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    width: 100%;
}

#[% QuestionName() %]_div .options {
    display: flex;
    align-items: center;
}
</style>
Thank you this code works well. Is there additionally an opportunity to put a frame around the scale ?
Does adding this CSS rule to the other "acbc_calibration_options" rules work?

border: 1px solid #c4c4c4;
...