Increasing textbox wdith in new survey taking experience

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).

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:

input[type="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%;
}