Adding JavaScript to center a text entry, javascript placement | XM Community
Skip to main content

I found this other community post with the code:

 

 <style> .ChoiceStructure { text-align: center; } </style>

 

but cannot figure out WHERE I am supposed to place it. When I open the JS I am shown this, I have tried to place it in a combination of places and cannot figure out how to get it to display correctly. 

 

 

Hi ​@kgillis  — you’re super close!

Since <style>...</style> is HTML, not JavaScript, you’ll want to place it in the question text itself, not inside the JavaScript editor.

Here’s what to do:
    1.    Open the question you’re trying to center (like the one in your screenshot).
    2.    Click the </> (HTML View) button in the Rich Content Editor.
    3.    Paste this at the very top of the question text:
<style>.ChoiceStructure { text-align: center; }</style>

That should immediately center your response box (or radio buttons, checkboxes, etc.) on that question. No need to touch the JavaScript panel at all for this one.

Let me know if it doesn’t work.

-- Rochak

 


@rochak_khandelwal 

So this partially worked, it centered the text box, bot it pushed my question text back over to the left.

 


@kgillis 
The CSS rule is targeting .ChoiceStructure, which centers the input element, but it doesn’t affect the question text above it — and sometimes, depending on layout, it can break the alignment of the question label.

Try wrapping the question text itself in a <div style="text-align:center;"> tag. Like this:
<style>.ChoiceStructure { text-align: center; }</style>
<div style="text-align:center;">
  How many hours per week do you work on <strong>contracts</strong>?
</div>

 

This should independently center both the question text and the response box without affecting each other. Let me know if it doesn’t work.


@kgillis 
The CSS rule is targeting .ChoiceStructure, which centers the input element, but it doesn’t affect the question text above it — and sometimes, depending on layout, it can break the alignment of the question label.

Try wrapping the question text itself in a <div style="text-align:center;"> tag. Like this:
<style>.ChoiceStructure { text-align: center; }</style>
<div style="text-align:center;">
  How many hours per week do you work on <strong>contracts</strong>?
</div>

 

This should independently center both the question text and the response box without affecting each other. Let me know if it doesn’t work.

@kgillis, let me know if the solution above works so I can mark it as ‘Best Answer’. This is a popular topic that many would be interested in knowing about!


Leave a Reply