[SOLVED] Validation message appearing in bottom left of screen

[NickC4555]

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.

 

[troester]

Fabrik3.1/2 needs a standard Joomla bootstrap template (like Protostar coming with Joomla).

 

[NickC4555]

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?

 

[troester]

Do you have a link to your form?

 

[NickC4555]

http://stoneseed.nanagram.co.uk/it-advisory-request-more-information

It's on a test site. Thanks for your help.

 

[NickC4555]

Update: I just noticed that there are no error messages when you submit this form with validation errors too. The main contact form on the website works fine, error messages display and there are no validation pop ups: http://stoneseed.nanagram.co.uk/contact

 

[cheesegrits]

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:

.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

 

[NickC4555]

All fixed, thank you very much. It turns out Bootstrap wasn't loading.

 

[NickC4555]

... except I can't get the labels back on the left again!

 

[troester]

http://stoneseed.nanagram.co.uk/it-advisory-request-more-information
is displaying labels left in my browser (Firefox).
Maybe you have to clear your browser cache.

 

[NickC4555]

Strange. To the left in FF and above in Chrome.

 

[NickC4555]

Fixed.

 

[cheesegrits]

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

 

[NickC4555]

I found a way to load Bootstrap. My template framework has an obscure setting that doesn't load it if the Less compiler is off.

 

[cheesegrits]

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

 

[NickC4555]

It's the YJSG framework from YouJoomla. V2 has different settings, so it only applies to sites running 1.x

 

[cheesegrits]

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

 

[NickC4555]

Thanks, hugh.