Issue with format of the inline question | XM Community
Skip to main content
Hi Guys!
I am just learning html so scuse the newbness.

I am trying to do an inline question in my survey distributed from our API.
I am having the below issues;
1) Very Difficult and Very Easy > I want to get these above the numbers so that the other numbers are all in a row > but I can't work out how to do this in the code as it's just one Choice option.
2) Random white line decided to join the party today (was not on earlier emails today and is now there). No change to code.

Is anyone able to point me in the right direction? I am okay to google pieces of code but I can't figure out what I'm trying to google to achieve what I need.

Pic and code below.

!

Code here:
<table align="center" border="0" cellpadding="0" style="padding: 16px; background-color: #026fc2; border: 1px solid #0260A8; border-radius: 3px; font-family: arial;">
<tbody>
<tr>
<td style="padding-bottom: 12px; font-size: 15px;"><strong><span style="color: #ffffff;">${q://QID1/QuestionText}</span></strong></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="5" cellspacing="5" style="text-align: center;" width="100%">
<tbody>
<tr>
<td style="background: #009FEE; border-radius: 3px;"><a href="${l://ChoiceLink/QID1/1}" style="display: block; font-size: 12px; text-decoration: none; color: #ffffff; border: 12px solid #009FEE; border-radius: 3px; background: #009FEE;">${q://QID1/ChoiceDescription/1}</a></td>
<td style="background: #009FEE; border-radius: 3px;"><a href="${l://ChoiceLink/QID1/11}" style="display: block; font-size: 12px; text-decoration: none; color: #ffffff; border: 12px solid #009FEE; border-radius: 3px; background: #009FEE;">${q://QID1/ChoiceDescription/11}</a></td>
<td style="background: #009FEE; border-radius: 3px;"><a href="${l://ChoiceLink/QID1/2}" style="display: block; font-size: 12px; text-decoration: none; color: #ffffff; border: 12px solid #009FEE; border-radius: 3px; background: #009FEE;">${q://QID1/ChoiceDescription/2}</a></td>
<td style="background: #009FEE; border-radius: 3px;"><a href="${l://ChoiceLink/QID1/3}" style="display: block; font-size: 12px; text-decoration: none; color: #ffffff; border: 12px solid #009FEE; border-radius: 3px; background: #009FEE;">${q://QID1/ChoiceDescription/3}</a></td>
<td style="background: #009FEE; border-radius: 3px;"><a href="${l://ChoiceLink/QID1/4}" style="display: block; font-size: 12px; text-decoration: none; color: #ffffff; border: 12px solid #009FEE; border-radius: 3px; background: #009FEE;">${q://QID1/ChoiceDescription/4}</a></td>
<td style="background: #009FEE; border-radius: 3px;"><a href="${l://ChoiceLink/QID1/5}" style="display: block; font-size: 12px; text-decoration: none; color: #ffffff; border: 12px solid #009FEE; border-radius: 3px; background: #009FEE;">${q://QID1/ChoiceDescription/5}</a></td>
<td style="background: #009FEE; border-radius: 3px;"><a href="${l://ChoiceLink/QID1/6}" style="display: block; font-size: 12px; text-decoration: none; color: #ffffff; border: 12px solid #009FEE; border-radius: 3px; background: #009FEE;">${q://QID1/ChoiceDescription/6}</a></td>
</tr>
</tbody>
</table>
</td>
Hi @emily_voc,

here is a mobile friendly solution for your first question:

HTML:

<div>Your quesion</div>
<div class="L">very hard</div><div class="R">very easy</div>

CSS:

.R{
float:right;
font-weight: bold;
font-size:11pt;
text-align: center;
padding-right:10px;
padding-top:10px;
}

.L{
float:left;
font-weight: bold;
font-size:11pt;
text-align: center;
padding-left:10px;
padding-top:10px;
}

.mR{
font-weight: bold;
font-size:11pt;
text-align: center;
display:none;
}

JavaScript:

function mobileLab(that) {
var Q = "#"+that.questionId;
jQuery(that.getChoiceContainer()).append('<div class="mR">' + jQuery(Q + " .R").text() + '<div>');
if(window.innerWidth < 753)jQuery(Q + " .LabelContainer ").css("width","222px");}

mobileLab(this);

Note: check that the threshold in the window width (753px) is correct for your survey. It was estimated experimentally.


Example - computer:
!

Example - mobile:
!
@emily_voc,

This question is in an email, correct? If so, @fleb's solution doesn't apply. You need to add a row to the html table for the scale text anchors and manually label the 1 and 7 endpoints. Your email html didn't render correctly when you posted, but it would be something like this after the Question Text:

```
...
<tr>
<td colspan="4" style="text-align:left">Very Difficult</td>
<td colspan="3" style="text-align:right">Very Easy</td>
</tr>
...
```
Further down, replace ${q://QID1/ChoiceDescription/1} with "1" and ${q://QID1/ChoiceDescription/7} with "7".
Hey Tom! thanks for the reply
That has mostly worked, but it has added the 'Very Easy' into its own column and it won't let me move it into the same column as Very Difficult (if I do, it goes to the left, even when I have align right.

Photo in email:
!

Code:
`<tbody>
<tr>
<td style="padding-bottom: 12px; font-size: 15px;"><span style="color:#ffffff;"><strong>${q://QID1/QuestionText}</strong></span></td>
</tr>
<tr>
<td colspan="4"><span style="color:#ffffff;">Very Difficult</span></td>
<td colspan="3"><span style="color:#ffffff;" text-align:right="">Very Easy</span></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="5" style="text-align:center;" width="100%">
<tbody>
<tr>
<td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/1}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">1</span></a></td>
<td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/11}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">${q://QID1/ChoiceDescription/11}</span></a></td>
<td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/2}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">${q://QID1/ChoiceDescription/2}</span></a></td>
<td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/3}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">${q://QID1/ChoiceDescription/3}</span></a></td>
<td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/4}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">${q://QID1/ChoiceDescription/4}</span></a></td>
<td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/5}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">${q://QID1/ChoiceDescription/5}</span></a></td>
<td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/6}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">7</span></a></td>`
> @emily_voc said:
> Hey Tom! thanks for the reply
> That has mostly worked, but it has added the 'Very Easy' into its own column and it won't let me move it into the same column as Very Difficult (if I do, it goes to the left, even when I have align right.
Put the new row inside the nested table:
```
<tbody> <tr> <td style="padding-bottom: 12px; font-size: 15px;"><span style="color:#ffffff;"><strong>${q://QID1/QuestionText}</strong></span></td> <tr> <td> <table border="0" cellpadding="0" cellspacing="5" style="text-align:center;" width="100%"> <tbody>
</tr> <tr> <td colspan="4"><span style="color:#ffffff;">Very Difficult</span></td> <td colspan="3"><span style="color:#ffffff;" text-align:right="">Very Easy</span></td> </tr>
<tr> <td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/1}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">1</span></a></td> <td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/11}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">${q://QID1/ChoiceDescription/11}</span></a></td> <td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/2}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">${q://QID1/ChoiceDescription/2}</span></a></td> <td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/3}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">${q://QID1/ChoiceDescription/3}</span></a></td> <td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/4}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">${q://QID1/ChoiceDescription/4}</span></a></td> <td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/5}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">${q://QID1/ChoiceDescription/5}</span></a></td> <td style="background:#009FEE;border-radius:3px;"><a href="${l://ChoiceLink/QID1/6}" style="display:block;font-size:12px;text-decoration:none;color:#000000;border:12px solid #009FEE;border-radius:3px;background:#009FEE;"><span style="color:#ffffff;">7</span></a></td>
```

Leave a Reply


Terms & Conditions