Chris Rousseau asked 6 months ago
Hi all,
I have a search form in Formidable that shows results on the same page in grid layout that works great.
My one question is that I can't seem to figure out how to conditionally change the CSS of specific items in the grid layout, that is, if an item was marked as "Featured" as a category, then that grid item should have a different border color and interior color in the results list.
However, in the markup, the style of the border is on an empty <div> that I don't see marked up anywhere in the HTML in FF for me to target based on instructions I've read on how to use an 'if'. I can set CSS on the dashboard, but am not sure how I can target that empty div since I can't find it in the markup in FF anywhere.
The Inspector markup looks like this and the bold div is where the border color is set in the Inspector:
<div class="frm_grid_container with_frm_style frm-grid-view frm_no_grid_750" style="--v-tl-grid-column:span 4/span 4;grid-gap: 20px 2%;"> <!-- Entire grid -->
<div> <!-- Individual grid item start -->
<div class="frm_grid_container">...
Any thoughts welcome and thanks!
Please login or Register to submit your answer
Staff replied 6 months ago
While I don't have an answer, I have a comment. I moved away from using the FF grid views for this reason, that is not enough control of individual grid items.
Staff replied 6 months ago
Bobby - I was waiting for someone to say that before I did . I did the same thing. Frequently, I'll create a view as a grid and then convert it to classic style so I can get the benefit of a grid and take it over so I can style it.
replied 6 months ago
Thanks Rob and Bobby. You've confirmed what I suspected that the best way to customize the grid is to use the classic style.
After reading this, I just started customizing the HTML markup after switching from the grid to the classic style. I can already tell this will allow more control by targeting the elements with CSS.
I was afraid I was missing something simple, but thanks for confirming I'm not going cuckoo. 🙂
Cheers!
-Chris
Staff replied 6 months ago
Actually, there is a way to do it in code with a grid view. When rendered on the front end, a grid view is just HTML. You might have to incorporate a custom HTML field wrapper in the view design to target as a class or element on the front end with JavaScript. With JavaScript, you can apply any additional CSS classes to any element based on your logic. I just built a view-handler for the connector I'm writing for a headless WordPress environment driven by Formidable Forms on the back end, but more on that later. I know what's possible to do with views on the front end even if it's not a feature of Formidable Forms yet.
Staff replied 6 months ago
That's a good point with defining a custom class to the view to be able to target things specific to that view and then link the elements within. It just seems a bit counterintuitive when you're working with a "visual" form designer where you would expect to be able to control it more easily through the builder.