Survey canvas area being stretch alittle on a second page of a matrix question | XM Community
Skip to main content

Hi All,

 

This is a question aimed for TomG but maybe someone else might be able to shine some light on it.  (Isn’t it annoying that you can’t post images and excepts of code in private messages!)

 

I've run into an odd sizing problem with the Bipolar Matrix (when using one of TomG’s functions but I would like to think this is not causing the issue). The problem is that the matrix stretches on the second page of statements.  This causes a problem in my new Theme (I’m moving from a static to dynamic theme) as it clips the statements and shows a horizontal scroll bar at the bottom.

 

Is there a way I can force the words of the statements to wrap around more and stick to the same width as the previous page so that I don’t get the clipping and scroll bar issue in the new dynamic theme?

Pic1 - page 1 and 2 of the bipolar matrix survey - you can see the width is wider. I've checked the JavaScript and HTML within the questions and there is nothing I can see that would force the stretch.

 

 

Pic 2 - this is page 1 of the bipolar matrix survey with the old static theme and the new dynamic theme I've created below. The widths are the same.

 

 

Pic 3 - this is the second page using the new dynamic theme where because the 2nd page is stretched, in the dynamic themed survey the statements are clipped. It would be nice to ensure the matrix question stays within the set page width and more wrapping of the words occurs.

 

 

note: My new dynamic theme uses the Classic mode with compact question spacing. I've reverse engineered and aligned as much as I can in terms of styles from what we had in the Static theme but I suspect there are some classes I have not yet managed to add into my css code and so this may well not be helping but the primary issue is that page 2 is wider / being stretched.

 

I’ll attach my css code here if necessary.

 

 

Thanks

 

Rod Pestell

 

Whilst investigation continues…. I’ve noticed that the issue can be caused if you increase the answer font size from 16px to 18px or higher in the theme setup.  Why it doesn’t affect the first page I’m not sure - it may be just by luck and the length of the statements in use.

 

So this possibly means that the static theme we have has some sort of min-width which expands if required whilst the dynamic themes in use (using the classic layout) has a fixed or max-width setting.   The mobile view is controlled better as it does use the whole width of the screen in the first place.

 

More to follow

The issue is cause by long words (e.g., accommodations) over-running the column widths. Possible solutions:

  1. reduce the size of the column label widths by reducing the horizontal padding
  2. allow long words the break using ­
  3. use the minDesktopWidth option in the mfBipolarMatrix function call

Thanks TomG for your guidance and support on this.

For info for anyone else I have reduced the amount of padding that was in the left and right statements as per the screen shots above and this has stopped the rows from overrunning in the Question area.  I did this by adding a style section in the question HTML part so that it wasn’t going to impact the whole survey.  Below is my style code and the last line is the additional part reducing the padding of the statements.

 

Thanks

 

Rod Pestell

 

Which of the following statements comes closest to your view?

<style type="text/css">@media (max-width:480px) {
  .Skin .Matrix td.ColumnLabels tr.SpreadLabels th { padding:4px;font-size:0.7em;}
td.choiceLabelCell {font-size:0.9em;}
}

  .Skin .Matrix th.ColumnLabels {background:#add8e64d;overflow:hidden;border-radius:10px;}
  td.ColumnLabels {padding-top:20px}
.AnswerLeft {font-size:0.95em;}
.AnswerRight {font-size:0.95em;}
.Skin .Matrix .Bipolar th {padding-right:5px;padding-left:5px;}
</style>

 

 

Leave a Reply


Terms & Conditions