I have a multiple choice question that uses loop and merge to display 100 message pairs. For each pair, one message is the English source message and the other is the machine translation of that message. I would like to display these messages next to eachother in the question text to make it easy for the respondents to compare the messages. However, when I use a table to display the messages next to eachother, the widths of the ‘message 1’ and ‘message 2’ columns vary (see screenshot below). Is there a way to make sure the widths of these two columns are always 50%?
In addition, I’m looking for a way to align the sentences in these columns. See the screenshot below for an example of what I mean by “sentence-aligned”. The sentences are separated by </br>’s in the loop and merge, but I can easily replace these separators by something else if needed.
Any help would be greatly appreciated!
Best answer by TomG
MargotF wrote:
TomG wrote:
Set the widths of the Message1 and Message2 cells to 50%.
If you add table rows and make each sentence a table cell (<td></td>) and set vertical-align to top they will align. Then you just need to style the cell borders (side borders only, then add top border to cells in top row and bottom border to cells in bottom row).
Another way would be to put every sentence in a <div></div> and either:
Scrap the table and use a grid instead
Set the minimum height of each div to match the max height of the tallest div in the row.
Thank you for your answer! I see how the two solutions you suggest would work with a regular question, but I haven’t been able to make them work with my loop & merge question, where the messages are piped text (see screenshot). I think both solutions you suggest would require a data structure like <sentence 1>, <translation sentence 1>, <sentence 2>, <translation sentence 2>, … I don’t think I can have a structure like that in a loop & merge question.
If you use the table approach, you could either create a loop & merge field for each sentence or use a delimiter between each sentence, split them with JS, and update the table cells.
If you use a grid or flex-boxes you need to put each sentence within a <div> and apply the correct CSS. If you use flex-boxes you’ll need to apply JS to set the heights to align.
Set the widths of the Message1 and Message2 cells to 50%.
If you add table rows and make each sentence a table cell (<td></td>) and set vertical-align to top they will align. Then you just need to style the cell borders (side borders only, then add top border to cells in top row and bottom border to cells in bottom row).
Another way would be to put every sentence in a <div></div> and either:
Scrap the table and use a grid instead
Set the minimum height of each div to match the max height of the tallest div in the row.
Set the widths of the Message1 and Message2 cells to 50%.
If you add table rows and make each sentence a table cell (<td></td>) and set vertical-align to top they will align. Then you just need to style the cell borders (side borders only, then add top border to cells in top row and bottom border to cells in bottom row).
Another way would be to put every sentence in a <div></div> and either:
Scrap the table and use a grid instead
Set the minimum height of each div to match the max height of the tallest div in the row.
Thank you for your answer! I see how the two solutions you suggest would work with a regular question, but I haven’t been able to make them work with my loop & merge question, where the messages are piped text (see screenshot). I think both solutions you suggest would require a data structure like <sentence 1>, <translation sentence 1>, <sentence 2>, <translation sentence 2>, … I don’t think I can have a structure like that in a loop & merge question.
Set the widths of the Message1 and Message2 cells to 50%.
If you add table rows and make each sentence a table cell (<td></td>) and set vertical-align to top they will align. Then you just need to style the cell borders (side borders only, then add top border to cells in top row and bottom border to cells in bottom row).
Another way would be to put every sentence in a <div></div> and either:
Scrap the table and use a grid instead
Set the minimum height of each div to match the max height of the tallest div in the row.
Thank you for your answer! I see how the two solutions you suggest would work with a regular question, but I haven’t been able to make them work with my loop & merge question, where the messages are piped text (see screenshot). I think both solutions you suggest would require a data structure like <sentence 1>, <translation sentence 1>, <sentence 2>, <translation sentence 2>, … I don’t think I can have a structure like that in a loop & merge question.
If you use the table approach, you could either create a loop & merge field for each sentence or use a delimiter between each sentence, split them with JS, and update the table cells.
If you use a grid or flex-boxes you need to put each sentence within a <div> and apply the correct CSS. If you use flex-boxes you’ll need to apply JS to set the heights to align.
Set the widths of the Message1 and Message2 cells to 50%.
If you add table rows and make each sentence a table cell (<td></td>) and set vertical-align to top they will align. Then you just need to style the cell borders (side borders only, then add top border to cells in top row and bottom border to cells in bottom row).
Another way would be to put every sentence in a <div></div> and either:
Scrap the table and use a grid instead
Set the minimum height of each div to match the max height of the tallest div in the row.
Thank you for your answer! I see how the two solutions you suggest would work with a regular question, but I haven’t been able to make them work with my loop & merge question, where the messages are piped text (see screenshot). I think both solutions you suggest would require a data structure like <sentence 1>, <translation sentence 1>, <sentence 2>, <translation sentence 2>, … I don’t think I can have a structure like that in a loop & merge question.
If you use the table approach, you could either create a loop & merge field for each sentence or use a delimiter between each sentence, split them with JS, and update the table cells.
If you use a grid or flex-boxes you need to put each sentence within a <div> and apply the correct CSS. If you use flex-boxes you’ll need to apply JS to set the heights to align.
I did some more experimenting and managed to get one of your proposed solutions to work (the one with the delimiter). Thank you!
