Responsive Checkbox Images

By: Fabian Pontén | Asked: 02/07/2023
ForumsCategory: Code HelpResponsive Checkbox Images
Fabian PonténFabian Pontén asked 2 years ago
Hey there! Trying to make the "Checkboxes as images" feature work better responsively. The native functionality is that the images are set to a fixed height/width, but I'd like to make them into percentages instead so that, for example, 4 checkboxes fill up an entire row horizontally by setting the width to 25% for example, and then the subsequent checkboxes continue in the same fashion below. This doesn't seem to work when I try it and I guess it has something to do with the flexbox settings, but not sure how to solve it.

Would love to hear if anyone has a solution, couldn't find anything about this in the community. Thank you very much! Best regards,
Fabian 
1 Answers
Victor Font answered 2 years ago

You need to examine the CSS in your browser's inspection to determine the class that governs the image size, then use your own custom CSS to overwrite the default setting.

Fabian PonténFabian Pontén replied 2 years ago

Hi Victor! Thanks for your response. I'm aware I need custom CSS, just couldn't figure out how to do it 😊 When I change the width of the images to % instead of fixed px the layout breaks.

Victor Font replied 2 years ago

Are you familiar with CSS Flax? If you look at the HTML Formidable generates, image based checkboxes and radio buttons are displayed as inline-flex. Each image is its own glex box within the inline-flex. Flex does not respond to the fixed width dimensions we might use otherwise for images. The HTML won't display here, so use your browser's inspection tool to examine the radio button HTML as I continue to describe the elements and flow.

The individual radio button code has 3 flex boxes it is displaying within the inline-flex container.. From the top down, the first div with the "frm_image_option_container frm_label_with_image" CSS classes is the flex container. Every element at the immediate child level is an individual flex box within this container.

The second div with the class "frm_selected_checkmark" is the checkmark flex box that displays in the upper left corner of the image when you click to choose it. The second flexx box is the image and the third is the nexted span with the option label.

The inline flex is instantiated in the .frm_image_options .frm_image_option_container class. Flex boxes can be set to a fixed with be adjusting the flex-basis, flex-grow, and flex-shrink properties. This article may help: <a href="https://usefulangle.com/post/351/css-flex-fixed-width-item&quot; rel="nofollow">https://usefulangle.com/post/351/css-flex-fixed-width-item</a&gt;

Fabian PonténFabian Pontén replied 2 years ago

Thanks a bunch Victor, will review your suggestions and see if I can figure it out, thanks!

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right