Text box width autosizing

Eden_Ravenwood

Textbox prompts on a request offering automatically size to half of the available width while the page is formatted for a wide browser window, but they automatically size to use all the available width when the page is formatted for a narrow browser window.  Can anyone advise me what the custom css would be to make text boxes automatically resize to use all the available width when the page is formatted for a wide browser window?

john_doyle

Hi Eden,

It may take some time for your browser to pick up that changes have been made to the custom.js file. You can try a hard refresh, or clear the browser cache to see if that helps.

The differences in how the controls are rendered in different browsers is expected. I tested the customization in IE11 and it seems to work for me.

john_doyle

Hi Eden,

I wouldn't advise on a css solution to this, because the width of the controls on the request forms is determined by the use of bootstrap classes.

You could try adding this script to your custom.js file:

$(document).ajaxStop(function () {
        $(this).unbind('ajaxStop');
    if ( $( "div.question-container" ).length ) {
        $("div.question-container > div.col-md-6").removeClass("col-md-6");
        $("div.question-container > div.col-md-4").removeClass("col-md-4");
    }
});

Eden_Ravenwood

Thanks for the response, my area of expertise is not web development so using css was not a preference just an assumption, and I'll take whatever works.  Unfortunately though the custom.js snippet you've provided hasn't resulted in any change in the behavior of the text box resizing.  My custom.js was completely blank, can the snippet above be added as is to an empty custom.js file or does it require some additional wrapping?

I don't know if its relevant at all but I notice in IE11 the control that appears on the right-hand edge of a text box prompt is a vertical scrollbar, whereas in Chrome (58) the control on a textbox prompt is a resize corner on the bottom right corner.  Is that expected?

john_doyle

Hi Eden,

It may take some time for your browser to pick up that changes have been made to the custom.js file. You can try a hard refresh, or clear the browser cache to see if that helps.

The differences in how the controls are rendered in different browsers is expected. I tested the customization in IE11 and it seems to work for me.

Eden_Ravenwood

Yep clearing the browser cache got it working.  Thanks.