Set width of Fabrik Tip

[kootjoo]

I am using Fabrik to show a list of people with the DIV Template. All works as expected but I have set on Field to be truncated and show complete text on hover. This works but the width of the Popup is to small is there somewhere I can set this through .css. I really can't find it. For explanation see attached image.

 

[Bauer]

It's even worse if the tip is used in a list.
I've asked this same questions numerous times and all I heard was... [crickets].

It seems to me that it wouldn't be too hard to simply add a 'Tip width:' option to the Tips in the element xml.

 

[cheesegrits]

And as usual for these "seems to me it wouldn't be too hard" things ... if you wanna code it up and submit a PR, I'd gladly merge it.

-- hugh

 

[Bauer]

And as usual for these "seems to me it wouldn't be too hard" things ... if you wanna code it up and submit a PR, I'd gladly merge it.

-- hugh

If you'd like to give me a clue as to where to find the code that controls it, I just might. (I've already tried finding it and figuring that out, numerous times - but to no avail.)

 

[cheesegrits]

Exactly. I have no idea either.

-- hugh

 

[cheesegrits]

Which may sound weird, as I'm one of the authors, but you have to remember that Fabrik is about 1/3rd of a million lines of code, written over more than a decade. So even though the actual coding of a "seems like it shouldn't be too hard" thing may not be too hard, figuring out where and how to do it often is. So if you get "crickets" on these things, it's not because I can't be bothered to implement this kind of feature, it's that it would take me an inordinate amount of time to figure out how to do it, compared to the "value add", especially when the request in Community support, and I have paid support issue stacked up in the queue.

-- hugh

 

[Bauer]

I understand your situation, which is why I try helping around here when I have the time. I'm comfortable with myself as a community member with 'Support' level. I do what I can, but I live only on SS and struggle from month to month just to make ends meet. And this project that I've been working on for the past 3 years stopped paying ANYTHING about 18 months ago. I now only have an agreement with the client to share the income - if/when that starts coming in. That's why I'm anxious to get this thing working - and working in such a way that it will be more prepared for 'future' developments.

So I have a 'to do' list just like you. I wish I could do more to help.

 

[kootjoo]

He guys, it was just a question from me and this topic is taken over by the discussion you guys have. If it is not possible, then it is not possible. Every now and then I pay as a member if I am in a big project and need some help. This is just a small issue in a small project. I thought some simple .css could do the trick here.

 

[cheesegrits]

@Bauer - looks like the width is set dynamically in ./media/com_fabrik/js/tipsBootstrapMock.js, in show(), around line 198. I guess we'd have to add an extra option, and use that if set rather than using the offsetWidth.

@kootjoo - you could set a width for the popover class in a custom CSS, but that would affect all popups. Unfortunately you can't be more specific with a selector, as the tip doesn't get attached inside the table cell, it just gets appended to the end of the page DOM and uses absolute positioning.

-- hugh

 

[PaulV888]

I'll just leave this here

.popover {
    max-width: 800px;
}

Paul

 

[Bauer]

WOW! Thank you so much Paul!

The only problem I see is the need for a little flexibility. So I'm using code similar to this in the list_#.js file.

    jQuery("span.fabrikTip").mouseover(function() {
        /* Get the element name from the closet container that has the element name 
            in its class and use the [0] to identify which class name that is.*/
        var elName = jQuery(this).closest('.fabrik_element').prop('class').split(' ')[0];
        // for debugging... console.log(elName);  
        switch(elName){
            case 'fb_member_facilities___associated_parent_org':
                jQuery(".popover").css('max-width','400px');      
                break;
            default:
             /* this is the default max-width set for .popover in the boostrap.css file but
                  it could be whatever default max-width value you want in the list or form */
                jQuery(".popover").css('max-width','276px');          
                break;
        }
    });

This way in each list or form you can specify any custom widths (or other css styling too, I would assume) that you want for certain tooltips, depending on the element.

IMO, this is even better than having an option in the element configuration. I find it easier to work with the code (all in one function) rather than having to open each individual element in Fabrik.

If I get time today I'll add it to the Wiki - with examples for a list, form, or details view.

 

[Bauer]

If you'd like to give me a clue as to where to find the code that controls it, I just might. (I've already tried finding it and figuring that out, numerous times - but to no avail.)

I got around to working on this over the weekend. What branch at github should I use for you to check/test it out?

I added a 'Tip width' (tipwidth) to the XML and added the label and description to the En-GB language file.

In tipsBootstrapMock.js I added some code that sets the width to use the new width option (or the default) - and also prevents any wide tips from being truncated off the left or right edge of the browser viewport. I also added some code that sets the arrow to be X positioned where the mouse pointer was clicked (or as close to it as possible) - just because it always bothered me that for narrow elements with a wide tip the arrow could be pointing to an adjoining element!).

And there was one line added to elements.php to initialize the new tipwidth option.

I've been testing the hell out of this in a form with over 2 dozen elements. (Not so much in a list or details view - but don't see how that should matter.)
So it would be nice to get some feedback. I'm crossing my fingers that this isn't stepping on the toes of some other 3rd party templates (like my CSV popup that you 'reworked') - but it seems to work great in protostar.

 

[cheesegrits]

Yeah, sorry about that CSV stuff, it just flat out didn't work in several other template frameworks, had the window opening about a mile off screen.

PR against master.

-- hugh

 

[Bauer]

Yeah, sorry about that CSV stuff, it just flat out didn't work in several other template frameworks, had the window opening about a mile off screen.

PR against master.

-- hugh

OK - done.
BTW, once I got past my bruised ego and updated from github, your CSV Export changes still worked just fine. The big thing was being able to easily remove options in the options list via css - which can still be done.

 

[Bauer]

I've been anxiously waiting over a week for this PR to get merged so I can update form github without having to make all those edits again myself.
What's the story?

 

[cheesegrits]

I've been busy, with business trips, and then the July 4th holiday. I'll get to it today some time.

Sent from my HTC6545LVW using Tapatalk

 

[cheesegrits]

BTW, you know you can merge changes from upstream to your fork, right? So no need to have to make changes again. Just merge from upstream master (us) to your fork, then grab the zip from your fork.



Sent from my HTC6545LVW using Tapatalk