Message
  • EU e-Privacy Directive

    This website uses cookies to manage authentication, navigation, and other functions. By using our website, you agree that we can place these types of cookies on your device.

    View Privacy Policy

Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: CSS issue when using Product Finder

CSS issue when using Product Finder 7 years 10 months ago #1953

  • ron
  • ron's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
I installed the PF yesterday and so far I like the product. It does what I was looking for. But, when i integrate PF in my site, my main menu that used to work fine, shifts to the left when I select the PF.

To see what happens, please visit www2.premiumbrokerexchange.com. Look at the main menu position. It remains in position for all menu options except when you select "Opportunities" (which starts the questionnaire).

I tried to find what goes wrong here, but I could not find it. Please advise if possible.

Thanks,
Ron
The administrator has disabled public write access.

CSS issue when using Product Finder 7 years 10 months ago #1954

  • andrea_4g
  • andrea_4g's Avatar
  • OFFLINE
  • Administrator
  • Posts: 1122
  • Thank you received: 163
Apparently there's a problem with jQuery.

Your own template includes jQuery 1.7.1.

Product Finder includes and uses jQuery 1.10.x that in turn supports jQuery Mobile 1.4.x.

When both jQuery libraries are loaded at the same time they both stop to work.
The administrator has disabled public write access.

CSS issue when using Product Finder 7 years 10 months ago #1955

  • ron
  • ron's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
Thanks for looking into this. But.. I now included jquery 1.10.2 from CDN, but it still gives the same effect.

Could this be something else?

Thx,
Ron
The administrator has disabled public write access.

CSS issue when using Product Finder 7 years 10 months ago #1956

  • andrea_4g
  • andrea_4g's Avatar
  • OFFLINE
  • Administrator
  • Posts: 1122
  • Thank you received: 163
There's still this script:
../templates/untitled/script.js
that throws an error (TypeError: $.browser is undefined)
The administrator has disabled public write access.

CSS issue when using Product Finder 7 years 10 months ago #1957

  • ron
  • ron's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
I managed to kill the jquery.js from the template by commenting it out. Next, I made some changes to the CSS to position the Slogan and tagline correctly. Worked fine... I thought we could get started.... :-(

Please have a look at the Product Finder... for some reason the CSS of the product finder is now messed up. There are strange radio buttons outside the selection boxes. I did not touch the PF css, so again there must be something interfering here.

I'm sure your very nice product works with Joomla 2.5, but if it is this sensitive to certain templates, I may have to look for another extension. This costs too much time. The template btw is generated using Artisteer version 4. Also something I have used many times before in combination with dozens of other modules and components. I'm really surprised soo much "hacking" needs to be done to get PF working. I'm not a programmer, just a "power user". I hope I do not have to start modifying code.

Thx
Ron
The administrator has disabled public write access.

CSS issue when using Product Finder 7 years 10 months ago #1958

  • andrea_4g
  • andrea_4g's Avatar
  • OFFLINE
  • Administrator
  • Posts: 1122
  • Thank you received: 163
I think you managed to fix the JS incompatibility issue.

Still a few CSS problems persists.

I've been able to isolate the following one at:
../templates/untitled/css/template.css line 2112
fieldset label {
    display: inline-block;
    width: 12em; /* <== This */
}
That broadly-scoped 'width' statement effects all fieldset labels, therefore causing the underlying radio button to be exposed.
pf-width-12.jpg


If you comment 'width: 12em;', you get the following result:
pf-width.jpg


As you can see, even a single line of code is able to significantly alter the rendering of the elements.

We could not possibly make Product Finder compatible with all existing templates. We put effort into making it compatible with standard Joomla templates (those that come with the Joomla package) and with the Gantry framework.
So, some troubleshooting and thinkering with CSS is somehow expected when integrating a complex extension
like PF (that relies on jQuery mobile's enhanced interface) with custom templates. There's no way to avoid that.
The administrator has disabled public write access.
The following user(s) said Thank You: ron
  • Page:
  • 1
  • 2
Time to create page: 0.079 seconds