• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

[SOLVED] Validation message appearing in bottom left of screen

NickC4555

Active Member
I have a form on a page for which the validation message appears in the bottom left corner of screen instead of as a pop up when the label is hovered over.

fabrik validation.jpg
 
Fabrik3.1/2 needs a standard Joomla bootstrap template (like Protostar coming with Joomla).
 
I can't change the template, the site has been live for a year. Is there any way to disable the validation hover notifications, please?
 
Can you updatde to lates github? There's been a small change to our tooltip JavaScript since your version. Probably won't immediately fix anything, but it wouldn't hurt to have the fix.

And try adding this, the main chunk of Bootstrap 'popover' related CSS from J!'s default Protostar template, in to your template's custom.css:

Code:
.popover {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    max-width: 276px;
    padding: 1px;
    position: absolute;
    text-align: left;
    top: 0;
    white-space: normal;
    z-index: 1010;
}
.popover.top {
    margin-top: -10px;
}
.popover.right {
    margin-left: 10px;
}
.popover.bottom {
    margin-top: 10px;
}
.popover.left {
    margin-left: -10px;
}
.popover-title {
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    margin: 0;
    padding: 8px 14px;
}
.popover-title:empty {
    display: none;
}
.popover-content {
    padding: 9px 14px;
}
.popover .arrow, .popover .arrow:after {
    border-color: transparent;
    border-style: solid;
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}
.popover .arrow {
    border-width: 11px;
}
.popover .arrow:after {
    border-width: 10px;
    content: "";
}
.popover.top .arrow {
    border-bottom-width: 0;
    border-top-color: rgba(0, 0, 0, 0.25);
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
}
.popover.top .arrow:after {
    border-bottom-width: 0;
    border-top-color: #fff;
    bottom: 1px;
    margin-left: -10px;
}
.popover.right .arrow {
    border-left-width: 0;
    border-right-color: rgba(0, 0, 0, 0.25);
    left: -11px;
    margin-top: -11px;
    top: 50%;
}
.popover.right .arrow:after {
    border-left-width: 0;
    border-right-color: #fff;
    bottom: -10px;
    left: 1px;
}
.popover.bottom .arrow {
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-top-width: 0;
    left: 50%;
    margin-left: -11px;
    top: -11px;
}
.popover.bottom .arrow:after {
    border-bottom-color: #fff;
    border-top-width: 0;
    margin-left: -10px;
    top: 1px;
}
.popover.left .arrow {
    border-left-color: rgba(0, 0, 0, 0.25);
    border-right-width: 0;
    margin-top: -11px;
    right: -11px;
    top: 50%;
}
.popover.left .arrow:after {
    border-left-color: #fff;
    border-right-width: 0;
    bottom: -10px;
    right: 1px;
}
did that using FF's "live edit" feature, and it seems to help ...
http://screencast.com/t/wf9VsXpSn
Ignore the "labels above" change, that was some other stuff I was trying.
-- hugh
 
Care to share the fix, in case anyone else is looking for a solution?

And did you wind up copying that CSS to custom.css, or find a way to load up Bootstrap?

-- hugh
 
Wow. Yeah, that is obscure! What template (and from which template site) is it? Just for my own records, in case I run in to this issue again.

Thanks for the update.

-- hugh
 
It's the YJSG framework from YouJoomla. V2 has different settings, so it only applies to sites running 1.x
 
danyj - just a heads up.

NickC4555 - danyj is one of the authors over at YouJoomla, who has been kind enough to work with us to resolve some other issues, to allow Fabrik and the YJ templates to play nicely together. If he sees my tag above, he may have some input.

-- hugh
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top