CODEWITHSUNDEEP
joomlaconflict
user3338456
user3338456

Reputation: 1

Probably Javascript conflicts

I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure. http://goo.gl/v1GVWk if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck. Please help me. ..

Upvotes: 0

Views: 128

Answers (3)

Morgan Estes
Morgan Estes

Reputation: 223

Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.

Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.

One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:

jQuery("#ja-google-chart-wrapper-404 svg").resize();

Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.

Upvotes: 0

miguelmpn
miguelmpn

Reputation: 2017

I never used Google charts, but what you are experiencing also happens on Google Maps.

You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.

The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize

Hope it helps

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.

Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.

Upvotes: 1

Related Questions