Collapsed List Link

Ninpo

Member
I noticed that with the latest version of Fabrik "3.8.1" a change was made that if a list is in a collapsed state, the link to expand the list is now limited to the Arrow icon and not the "Group By" element. Was this an intentional change? Please see attached screenshots for detailed description.
 

Attachments

  • Screen Shot 2018-03-02 at 9.59.57 AM.png
    Screen Shot 2018-03-02 at 9.59.57 AM.png
    48.8 KB · Views: 24
  • Screen Shot 2018-03-02 at 10.00.46 AM.png
    Screen Shot 2018-03-02 at 10.00.46 AM.png
    51.8 KB · Views: 27
Yeah, I wasn't too happy about that myself.

From reading the github commits, if I remember correctly, I believe there was a problem with images used in the group header labels.

As I recall that was just days after I had changed the css to fix the image problem and to make the span take up 100% of the width so that clicking anywhere in the td would toggle the group.:(

Anyhow - it's already been changed and I doubt Hugh will want to change it back.
But you can fix all that with code similar to this in the list_xx.js javascript file...
JavaScript:
    jQuery(document).on("click", "span.groupTitle", function() {
        jQuery(this).closest("td").find("a i[class^=icon-arrow-]").trigger( "click" );
    });
(This is for the standard bootstrap list template)

You can also add this css code to the custom_css.php file if you want to change the mouseover cursor to a pointer and allow the span to fill the width of the td so that clicking anywhere in the td is the same as clicking the right/down arrows. The width% can be adjusted depending on the image, if used.
CSS:
    span.groupTitle {
        display: inline-flex;
        width: 97%;
        cursor: pointer;
    }

    /* optional - I use this because I include a small icon image in the group header */
    span.groupTitle img {
        border: 1px solid darkgrey;
        border-radius: 5px;
        margin: 0px 10px;
    }
 
Thank you for the information. I can see both sides of the argument and I do agree that there is probably a better way to solve this. My main concern is that the system I work on is used on both mobile and desktop and the hit box for the arrow is a bit small, not quite as noticeable and cumbersome on mobile devices. I have over 100 lists that need to be tweaked now. I will figure out a solution for my situation. Thankfully, I have not updated my production system to this new version yet, I am still testing in a sandbox.

** EDIT **
After I posted this, I found a quick "global" solution by reading the JLayouts documentation on "http://fabrikar.com/forums/index.php?wiki/jlayouts/" and doing a quick override.
 
Last edited:
That's what overrides are for. There are thousands of design decisions in Fabrik's layouts, and not everyone likes all of them (what a surprise!). So we provide easy ways to override pretty much all of them, on a per-thing, per-Fabrik-template or per-site-template basis.

In this case, I had an urgent issue to solve for a client who pays (Relatively) Big Bucks for us to maintain their site, so I hit the problem with a hammer to fix it "now". If enough people (who aren't paying (Relatively) Big Bucks, and therefore aren't putting coffee in my cup and feeding my dogs) complain, I'll probably go and make that change a little more selective, maybe remove any conflicting markup before wrapping a link round the text. This is just one of those issues with dynamically building markup, and fixes tend to be incremental.

-- hugh
 
Actually Hugh, now I think about it, it might be difficult to be selective as I suggested - because some grouped headings might contain links and others not. Your suggestion sounds better - to remove any links before creating the grouped headings. Presumably a single preg_replace would achieve it.

If Hugh agrees that this approach still meets the needs of his "big bucks" client, anyone up for creating a PR to put the code back to where it was whilst removing any links?
 
We are in need of some funding.
More details.

Thank you.

Members online

No members online now.
Back
Top