Formatting the Constant Sum Question

Hi @Steve_InforMedix 
Try using the below code in CSS section of look and feel.

.Skin .CS .SumInput input.InputText, .Skin .CS .SumTotal input, .Skin .CS input.SumInput {
width: 80px;
}
 

Thank you.  That worked!   I moved it up to 120.

Too bad this method seems to act on every question in the survey that uses this format.

Because I have a few, not all, but a few standard Form Field questions that present the wrong width -- AND I am unable to control the width by dragging it out and in while editing the question.  

“What is your zip code?” shows a box that would hold most of the alphabet.  No solution yet.  Any ideas?  

@Steve_InforMedix You can use this JS code in a specific constant sum question where you want to increase the box width.
 

Qualtrics.SurveyEngine.addOnload(function() {
    var customCss = '.Skin .CS .SumInput input.InputText, .Skin .CS .SumTotal input, .Skin .CS input.SumInput { width: 120px !important; }';

    var styleTag = document.createElement('style');
    styleTag.type = 'text/css';

    if (styleTag.styleSheet) {
        // For IE
        styleTag.styleSheet.cssText = customCss;
    } else {
        // For other browsers
        styleTag.appendChild(document.createTextNode(customCss));
    }

    document.head.appendChild(styleTag);
});

OK thanks again.  I will try this.

I spent a year working with ‘C’ back in the 1980’s and this looks even worse than that.

Seems that once you advance beyond the simple and easy-to-use Qualtrics survey interface, you must become quite a good coder.  I just looked at the Code Academy and API Reference, but that looks like a career choice, not a Help resource.

So thanks again, omkarkewat.

.

For example, this code looks like it will work for Constant Sum questions, but there is nothing in it that suggests how to modify it so it works for my Form Field “what is your zip code?” question.

It’s in here, I can tell. 

.CS .SumInput input.InputText, .Skin .CS .SumTotal input, .Skin .CS input.SumInput

But I would need to study up to know how to modify it for a Form Field question.

@Steve_InforMedix You will have to target the element ID of that particular question type/input box.

This should work for form field.

Qualtrics.SurveyEngine.addOnload(function() {
    var customCss = '.Skin input { width: 40px !important; }';

    var styleTag = document.createElement('style');
    styleTag.type = 'text/css';

    if (styleTag.styleSheet) {
        // For IE
        styleTag.styleSheet.cssText = customCss;
    } else {
        // For other browsers
        styleTag.appendChild(document.createTextNode(customCss));
    }

    document.head.appendChild(styleTag);
});

Great. Thanks very much for your help!

A couple of observations…

1. It would be a lot easier just to add a <style> tag to the question text html rather than adding it with JS. If you are going to use JS, you might as well add the styles directly to the elements using jQuery’s css function.
2. If you want an input to be a specific character width use em instead of px to specify the width.

Thanks very much, Tom.
Unfortunately, I don’t know how to do anything that you just said, but these are good directions for research for me.

Click on question text, click HTML view, then at the bottom of the question text add your <style> tag. For example:

<style>
.Skin .CS .SumInput input.InputText, .Skin .CS .SumTotal input, .Skin .CS input.SumInput { width:7em; }
</style>

Use of  !important should be avoided as much as possible.

Thanks again, TomG.

Working on this…

• Steve