Skip to content

Instantly share code, notes, and snippets.

@jetsloth
Last active May 28, 2022 00:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jetsloth/ff5f0440ce17bcbcc17a8bea607ef320 to your computer and use it in GitHub Desktop.
Save jetsloth/ff5f0440ce17bcbcc17a8bea607ef320 to your computer and use it in GitHub Desktop.
Create a horizontal scrolling container (with a scrolling bar) to display all image choices on a single line. You can add a HTML field to your form and put this script as its content
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment