Tables do not display correctly in feedback when using Calculated Mulitiplechoice questions

Tables do not display correctly in feedback when using Calculated Mulitiplechoice questions

by Patrick Thibaudeau -
Number of replies: 0

You can add tables to answer feedbacks while editing the question. However, after attempting the question and the feedback is displayed, the table does not come out formatted as a table.

Table not displaying properly

The issue is with the css in the question type plugin itself.

.que.calculatedmulti .answer .specificfeedback {
    display: inline;
    padding: 0 0.7em;
    background: #fff3bf;
}

.que.calculatedmulti .answer .specificfeedback * {
    display: inline;
    background: #fff3bf;
}

I tried to override this by setting the following in the Raw SCSS settings of Boost.

.que.calculatedmulti .answer .specificfeedback {
    display: unset !important;
}

.que.calculatedmulti .answer .specificfeedback * {
    display: unset !important;
}

I also tried adding this above code to my own theme. Still tables do not display properly. I also tried with every single display property knowing full well that some would not work: inline, block, contents, flex, grid, inline-block, inline-flex, inline-grid, inline-table, list-item, run-in, table, table-caption, table-column-group, table-header-group, table-footer-group, table-row-group, table-cell, table-column, table-row, none, initial, inherit.

Inherit was the closest to getting a table display but, everything was put into one column.

I even tried with jQuery using $(".que.calculatedmulti .answer .specificfeedback").css('display',''); hoping it would delete the display property. No luck.

The funny thing is that anything else I change in the css works. For example, if I put display: none;, the feedback disappears as it should. I just can't cancel out/remove the display property.

The only solution I have found is to comment out the display parameter in the styles.css in the question type itself. That is a core change, which I try to avoid at all cost.

.que.calculatedmulti .answer .specificfeedback {
    /*display: inline;*/
    padding: 0 0.7em;
    background: #fff3bf;
}

.que.calculatedmulti .answer .specificfeedback * {
    /*display: inline;*/
    background: #fff3bf;
}

Then I get exactly what I want.

Table displaying properly after core change


I can't seem to figure out how to override this and I don't want to do a core change. Any suggestions?


Average of ratings: -