Centred text not working with Classic layout | XM Community
Skip to main content
Solved

Centred text not working with Classic layout


Forum|alt.badge.img+3
  • Level 2 ●●
  • 14 replies

Hi all,

I want to use the Classic layout for space reasons. But when I use classic layout, centred text doesn’t display in the centre of the screen, but on the left.

All help appreciated :)

Best answer by Tom_1842

When previewing the survey through the Look & Feel, an !important is required for the centering to take. When previewing the survey through a Preview link, the centering worked without an !important. While it doesn’t look like the !important is needed for the live survey, I don't think it would hurt to have either. Try:

.Skin .Captcha label.QuestionText {
    width: 100% !important;
    text-align: -webkit-center;
}

 

View original

10 replies

rgupta15
Level 4 ●●●●
Forum|alt.badge.img+8
  • Level 4 ●●●●
  • 92 replies
  • September 28, 2023

Could you confirm if this query is regarding question text or header text?


Forum|alt.badge.img+2
  • 17 replies
  • September 28, 2023

@maybe : Wrap your text with a  tag and set its style to “text-align: center.” Here’s an example:

<div style="text-align: center;">
   Your centered text goes here.
</div>


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 14 replies
  • September 28, 2023

@rgupta15 This is about question text. In particular, question text for a CAPTCHA question. The CAPTCHA displays in the centre of the screen but question text displays on the left.

@Sameer.65 Thanks for the suggestion. With this, the text displays as if it were centred, with line breaks in the right place, but the block of text still displays at the left of the screen. I should have mentioned before that this is for a CAPTCHA question.


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+44
  • 1549 replies
  • September 28, 2023

@maybe 

If you’re using Captcha Question, you can use below CSS element if you have aligned it on center. Add it to your look n feel>style>custom CSS

.Skin .Captcha label.QuestionText {
    width: 100%;
    text-align: -webkit-center;
}

Hope it helps!

 

 


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 14 replies
  • September 28, 2023

@Deepak  Thanks for the response. This has the same effect as centring with HTML.  Relative to the other text in the block, each line is centred, but it doesn’t centre on the screen. Attaching an image.

 

 


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+44
  • 1549 replies
  • September 28, 2023

@maybe 

I believe some other CSS is overriding the code as I was able to achieve this with code mentioned.
Try including !important in front of CSS elements.
 

 


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 14 replies
  • September 28, 2023

@Deepak Is that using the Classic layout? Strange. Even with no custom CSS, mine still displays on the left.


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+44
  • 1549 replies
  • September 28, 2023
maybe wrote:

@Deepak Is that using the Classic layout? Strange. Even with no custom CSS, mine still displays on the left.

Yes it’s classic layout!


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • 876 replies
  • Answer
  • September 28, 2023

When previewing the survey through the Look & Feel, an !important is required for the centering to take. When previewing the survey through a Preview link, the centering worked without an !important. While it doesn’t look like the !important is needed for the live survey, I don't think it would hurt to have either. Try:

.Skin .Captcha label.QuestionText {
    width: 100% !important;
    text-align: -webkit-center;
}

 


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 14 replies
  • September 28, 2023

@Tom_1842 My hero! I foolishly put !important in the wrong place. It displays perfectly now :)

Thanks all for your help :)


Leave a Reply