Increasing textbox wdith in new survey taking experience | XM Community
Skip to main content

I want to increase the wdith of the text box in my survey via CSS, but it doesn’t work.

 

I’ve inspected the elements necessary and thought I’m doing the right adjustments, but the textbox always converts back to a width of 45rem, whereas I want the box to stretch across the whole question container width.

 

How can I fix that?

 

My CSS code:

.te .question-content .text-input, .te .question-content textarea {
    width: 100rem;
    max-width: 100rem;
}

How it looks like visually:

 How it looks in the source code:

 

Hi,

try this:

.te .question-content .text-input,
.te .question-content textarea {
    min-width: 100%
}

.te .question-content .resize-wrapper {
    max-width: 100%;
    width: 100%;
}

 

Thanks ​@vgayraud This does work in a blank theme, so I have to finde out why it’s not working with my own theme.

 

Note: I have applied a theme with its own CSS and then tried to add this textbox adjustemt directly in the project.

ok, adding it to the theme does work.

 

​@vgayraud Not sure if necessary, but in the min-width code - do we need a semicolon at the end? I added it in my own code, just in case.

 

Note to myself: using CSS from a theme + adding additional CSS code to the project does not work - the project’s CSS code seems to get ignored (even though it doesn’t contradict with the theme’s css).

Horizontal overflow in some situations.

Including your other post, the best is probably something like this:

.questions-container {
    width: 90%;
}

.question .question-display {
    width: 100%;
    max-width: none;
}

.te .question-content .text-input,
.te .question-content .textarea {
    width: 100%;
}

.te .question-content .resize-wrapper {
    width: 100%;
}

 

Thanks ​@vgayraud . Could you please elaborate a bit on the horizontal overfloww and what you mean with it?

 

I’m currently using this code for increasing the width of the survey container:

/* sizes and puts shadows to the survey container */
main#survey-canvas {
    width:auto;
    max-width: 95%;
    box-shadow: 0px 0px 10px rgba(0,0,0, 0.4);
    margin: 0 auto;
    border-radius: .5rem!important;
}

So do I need this “.question-container 90%” code?

 

And could I simplify the last two code snippets to

.te .question-content .text-input,
.te .question-content .textarea,
.te .question-content .resize-wrapper {
    width: 100%;
}

?

I’m by no means an expert front-end developer, so if anyone else wants to jump in to ensure best practices, they’ll be more than welcome! :)

But usually, max-width is considered “safer” since it cannot make an element wider than the viewport.

You don’t need the .question-container css in addition to your #survey-canvas css.

You can regroup the .question content properties together, it’s just a question of readability.

​@vgayraud I have received some alternative CSS code from a colleague:

inputptype="text"],
textarea {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    box-sizing: border-box;
}

Do you think this code is better/makes sense? I’m asking because I have no idea if one or the other would have more/less side effects.

Comparison would be my code above:

.te .question-content .text-input,
.te .question-content .textarea,
.te .question-content .resize-wrapper {
    width: 100%;
}

 

Terms & Conditions