CSS issue when using Product Finder

More
9 years 6 months ago #1953 by ron
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

Please Log in or Create an account to join the conversation.

More
9 years 6 months ago #1954 by andrea_4g
Replied by andrea_4g on topic CSS issue when using Product Finder
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.

Please Log in or Create an account to join the conversation.

More
9 years 6 months ago #1955 by ron
Replied by ron on topic CSS issue when using Product Finder
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

Please Log in or Create an account to join the conversation.

More
9 years 6 months ago #1956 by andrea_4g
Replied by andrea_4g on topic CSS issue when using Product Finder
There's still this script:
../templates/untitled/script.js
that throws an error (TypeError: $.browser is undefined)

Please Log in or Create an account to join the conversation.

More
9 years 6 months ago #1957 by ron
Replied by ron on topic CSS issue when using Product Finder
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

Please Log in or Create an account to join the conversation.

More
9 years 6 months ago #1958 by andrea_4g
Replied by andrea_4g on topic CSS issue when using Product Finder
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
Code:
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.


If you comment 'width: 12em;', you get the following result:


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.
Attachments:
The following user(s) said Thank You: ron

Please Log in or Create an account to join the conversation.

Time to create page: 0.185 seconds