16

I'm developing a website using Joomla 3.2.1, K2 and creativia template. I've already done quite a lot of customization and everything works fine. I've only one, big problem. When I select a category to have a list of items, it results in a mess of overlapped images (meaning that all items are displayed but the layout does not work). If I simply reload the page (or even open firebug to check the page properties), everything is back correctly to his place.

You can check the problem here: http://www.nicolamontera.it/NewVersion

Just open the menu item Architettura or Grafica (it happens from time to time).

EDIT: From further investigation I found that the attribute height in the container DIV changes quite randomly when loading the page. If I get a small value, then everything is messed up. It seems to be something related to a timing in evaluating that value (which is calculated dynamically).

How can I fix that?

vard
  • 4,057
  • 2
  • 26
  • 46
Deddicool
  • 161
  • 4
  • If you upload the page somewhere it would be easier to debug! I quite don't get it. If its a timing thing it might be waiting for a javascript(jquery) to finish loading then it sets the attributes to the elements! is the height of the container fixed in the css like .container { height : 200px } or .container { min-height : 200px }, or does the height change programaticaly from a script? – Alen Saqe Nov 09 '14 at 14:45
  • Thanks Alen, you're right ... it would be much more useful to have it uploaded. I'll try to do that this evening and let you know the URL by updating this post. Anyway, the height of container is set to auto so I assume it is a result from a jquery (I already found that code). Possibly I just need a way to wait for the correct result to be evaluated before page is displayed. – Deddicool Nov 10 '14 at 14:23
  • @alen-saqe I had a lot of problem uploading the new website to a temp folder but finally I did it... [link]http://www.nicolamontera.it/NewVersion just check the Architettura or Grafica item of the menu – Deddicool Nov 12 '14 at 09:19
  • 1
    This is a scripting problem! Not html not css from what i see its that the script does not fire on document ready and for some sort of reason it gets stuck! jquery.isotope.min.js is used to make the dynamic layout! I'll see what it causes it and if i can help! I updated you question and reply to me in a couple of hours so i can investigate the issue!@ – Alen Saqe Nov 12 '14 at 10:23
  • Yes, I'm pretty sure that it's all about scripting (but it took me a lot of time to understand that). I actually think it is something related to a race condition since sometimes it works and sometimes it does not ... in any case thanks in advance for your help and support – Deddicool Nov 12 '14 at 10:26
  • There are two things you should consider the first one that the jqeury should go after $(document).ready(function(){ code here }); So the script loads after the document is ready there is another thing that is window.load that the script fires after all the images are loaded so it can calculate the images heights and widths – Alen Saqe Nov 12 '14 at 10:43
  • You just have to run the script after $(window).load(function(){ //code goes here to calculate height and width of images! }); – Alen Saqe Nov 13 '14 at 19:57
  • No problem @Deddicool! For anything else contact me! – Alen Saqe Nov 17 '14 at 18:25
  • " I've already done quite a lot of customization" just my 2 cents but maybe, it's time to be open to start a web from scratch if you have the knowledge. CMS's are made to make people create webs the "easy" way (even if often it's not that easy) but once you know a bit of html and css, so, so often it's easier to make a web from zero... unless not static web and you need programming and constant communication with a data base, which it doesn't look as it in your web except by your contact form (which you could deal with just surfing a bit the net) – Alvaro Menéndez Sep 29 '15 at 21:22
  • I'm getting a 500 error, I've worked with Joomla custom templates, so I may have a hint or two – William Nov 12 '15 at 09:52

1 Answers1

1

Use a clearfix that will fix this problem you are having. Please let me know if it works.

so i used the class "group" and put that as a div in HTML where it is collapsing. If you have a container over these elements you have issues with the put this class with the container along side.

.group:after{
    content: "";
    display: table;
    clear: both;
}
Zergham Choudhary
  • 39
  • 1
  • 6