Black Friday Sale Now on! Learn More
Skip to content

Images choices horizontal with a scrolling bar

Add the following Javascript to create a horizontal scrolling container (with a scrolling bar) to display all images on a single line in your form.

<script type="text/javascript">
(function($){

	function scrollableImageChoices( formId ) {
		var $fields = ( typeof formId !== 'undefined') ? $('#gform_' + formId + ' .image-choices-field') : $('form[id^="gform_"] .image-choices-field');
		if (!$fields.length) {
			return;
		}
		$fields.each(function(){
			var $field = $(this);
			var $fieldsWrap = $field.closest('.gform_fields');
			var $scroller = $field.find('.ginput_container');
			var $scrolling = $field.find('.ginput_container > .gfield_radio, .ginput_container > .gfield_checkbox');
			$field.width( $fieldsWrap.width() );
			$scroller.css('overflow-x', 'scroll').css('max-width', $fieldsWrap.width() + 'px');
			$scrolling.css('width', '');
			var totalWidth = 0;
			$scrolling.find('.image-choices-choice').each(function(){
				totalWidth += $(this).outerWidth(true);
			});
			$scrolling.width( totalWidth );
		});
	}

	var debounce;

	$(window).on('resize', function(e){
		clearTimeout(debounce);
		debounce = setTimeout(scrollableImageChoices, 100);
	});

	$(document).bind('gform_post_render', function(e, formId, currentFormPage){
		clearTimeout(debounce);
		var styles = [
			"display: -webkit-box",
			"display: -ms-flexbox",
			"display: flex",
			"-webkit-box-orient: horizontal",
			"-webkit-box-direction: normal",
			"-ms-flex-direction: row",
			"flex-direction: row",
			"-webkit-box-align: start",
			"-ms-flex-align: start",
			"align-items: flex-start",
			"-webkit-box-pack: start",
			"-ms-flex-pack: start",
			"justify-content: flex-start"
		];
		$('head').append('<style type="text/css"> .image-choices-field .gfield_radio, .image-choices-field .gfield_checkbox { ' + styles.join("; ") + '; } </style>')
		debounce = setTimeout(function(){
			scrollableImageChoices( formId );
		}, 100);
	});

	if (window.gform && window.gform.addAction) {
		window.gform.addAction('gform_post_conditional_logic_field_action', function (formId, action, targetId, defaultValues, isInit) {
			clearTimeout(debounce);
			debounce = setTimeout(function(){
				scrollableImageChoices( formId );
			}, 100);
		});
	}

})(jQuery);
</script>