Have an idea?

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

CBC Vertically bottom align elements in CBC task

How can I vertically align to the bottom all elements in my CBC task tables in Sawtooth 9.8?
asked Oct 6 by RafalNeska Bronze (590 points)
I don't know if there exists any vertical alignment in CBCs by default, but there is a decent amount of padding at the bottom of elements.  Would lessening that be useful for you?  Adding this to your CBC is an example that would get rid of all padding on the bottom of elements:

<style>
#[% QuestionName() %]_div .cbc_cell {
    padding-bottom: 0px;
}
</style>
Hi Zachary, thank you for your comment.
Getting rid of bottom padding does not seem to work. Level texts are still vertically aligned to the top of each CBC cell. Any other trick I could test to override the cbc defaults?
Oh, do you mean that some of your levels have different heights / number of lines?
yes, some of levels have  different heights / number of lines.

1 Answer

0 votes
 
Best answer
Please try adding this to your CBC:

<style>
#[% QuestionName() %]_div .cbc_cell:not(.none) {
    display: flex;
    align-items: flex-end;
}
</style>
answered Oct 6 by Zachary Platinum Sawtooth Software, Inc. (184,925 points)
selected Oct 6 by RafalNeska
Zachary, Thank you,
Any chance I could make it work only for one particular row/ attribute?
Sure, this will apply the rule to only the first attribute:

<style>
#[% QuestionName() %]_div .cbc_cell.att_1 {
    display: flex;
    align-items: flex-end;
}
</style>


You can replace that "1" as needed.
Thank you:)
...