3 items in a row for my category

My website is www.casino-online.bz username: gavick password: gavick. Override template is enabled.
My goal is having 3 items in my www.casino-online.bz/scommesse category for any row.
Here are my category settings:

gavick-categoria-settings.png

But when I have for example 4 items in the scommesse category then the last item becomes very big while I would it of the same width of the others.
This is what I have:

gavick-category-3.jpg

This is what I would get:

gavick-ultima-pagina-categoria.png

I took the screenshoot from http://www.derki.com/politik?start=126

I mean always the same width for all the items, never mind how many items are show in the category, I need to have the same width for anybody.

Can you tell me how to realize that?

Hi

Please try rename /html/com_content to /html/_com_content and let me know if this worked.

It did not work. Nothing has changed.

Hi

Ok. I think I understand. You mean that side blocks are a little narrower than the middle on. Right ? Try add this to css:

Code: Select all

#gkMainbody .itemList {
    padding: 0 12px;
}


No wrong. We are not talking about side blocks. We are talking about width of items inside a category.
If the number of items inside a category is 3, 6, 9, ... everything is good.
But if items inside a category is different, 4 for example, then the 4th item became very big.
I would the same width for any item independently from the number of items inside a category. Just like:
http://www.derki.com/politik?start=126
Please have a look there at the last item with title "Ne Oldu Bize?". It is the same width of all others, but mine "Secondo articolo per le scommesse categoria" on www.casino-online.bz/scommesse is taking almost all the space.

We are talking about itemContainer css class that have 33.2% width, but on the last row they change such percentage. My goal is ALWAYS keeping such percentage for any item, for any number of items inside a category.

Hi

I think I know why I cannot understand the task. I think it's not about width, but a lacking border on last element. Try add this to override.css:

Code: Select all

.itemContainer {
    border-left: medium none;
    border-right: 1px solid #e5e5e5;
}

.itemContainerLast {
    border-right: medium none;
}


It does not work.

Hi

Please allow using override in template, so override file will be included.

Of course it is enabled. Please read my first row in my first post in this thread.

Hi

In such case You must have a serve cache or some extra extension restrict this file from being used since it's not present in website's code. Please send me an access to joomla panel so I'll check.

This is not my website. You are watching derki.com, but my website is www.casino-online.bz/scommesse

Hi

Ok, now I understand why nothing was working

Please send me an access to ftp. Looks like K2 is not adding style="width: 33.2%;" to html.

Message sent, but of course it is waiting in my outbox.

Hi

Ok. This sounded like an easy task, but I'm starting to think it's impossible to do without a lot of additional codding. I'm gonna show this to programmers and if they will not come up with an easy solution I'm gonna code it like I think it should be.

"By additional code" you mean editing php files?
Can I send a message from this forum to serki.com to ask what was his solution?

Hi

Problem is the css attribute "display: table-cell"

This attribute makes box cover 100% of available space if there in no any other boxes in a row. So this was designed this way.

I was able to break it with this code:

Code: Select all

.gkListCols3 .itemContainer {
float: left;
width: 33.2%;
}


but it looks bad than. So I'll decided to wait for programmers.

If they will not come up with a solution I'll implement a code to count the height of boxes and make them equal so the mentioned class will work.

You can use forum's PM to contact Him. Unfortunately He never told me Him e-mail address.

In the meaning time I already added your css code. I will wait for your (or developer) answer here. Please keep me informed.

Hi

Still no answer, so I'll just implement the script I have thought about.

Added this to override.css

Code: Select all

.itemListRow {
width: 100%;
display: block;
}


and this to /layout/blocks/head.php

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
   var icHeight = 0;
   var icHeightMax = 0;
   $('.itemContainer').each(function(){
      icHeight = $(this).height();
      if( icHeight > icHeightMax ) {
         icHeightMax = icHeight;
      }
   });

   $('.itemContainer').height( icHeightMax );
});})(jQuery)</script>


Now You need to get rid of the jQuery conflict caused by loading 2 different versions at the same time by installing Easy jQuery plugin and let me know if this worked. I could not have done it myself because my joomla panel access is not working any more.

On override.css do I have to keep
.gkListCols3 .itemContainer {
float: left;
width: 33.2%;
}

or do I have to remove it?

Hello Teitbite, I enabled you again on my joomla control panel, if you can proceed yourself it would be better for me. Can you do it?

Hi

Easy jQuery plugin installed and set to use only libraries which came with joomla. After that my code worked, but I had to switch Highlighter to use Mootools since the jQuery was too new for it.

Thank you Teitbite for your precious work.
I noticed there is a lot of blank space between the text and the image of the bottom item in the same column. I signed it with a red X in the next image:

gavick-spazio-immagini.jpg

Can we erase that blank space or at least reduce it a lot?

Hi

You are impossible

Here is an updated code to fit the height per row:

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
   $('.itemListRow').each(function(){
      var icHeight = 0;
      var icHeightMax = 0;
      $(this).find('.itemContainer').each(function(){
         icHeight = $(this).height();
         if( icHeight > icHeightMax ) {
            icHeightMax = icHeight;
         }
      });

      $(this).find('.itemContainer').height( icHeightMax );
   });
});})(jQuery)</script>


I know I am a big pain in the ...
I do not know who said "In life you only get what you have the courage to ask for"

Hi
..., but I had to switch Highlighter to use Mootools since the jQuery was too new for it.

That means I cannot use Highlighter anymore?
Because arrows on Highlighter do not work, and its links to articles are wrong too.

Hi

Och. I didn't know arrows stop working ;/ Try update Highlighter. Maybe newest version is using most recent jQuery version, actually we do not need most recent one, just so not multiple jQuery versions are not loaded. If updating Hightlighter will not work than we can try using the jQuery version Highlighter is compatible with.

I got an answer from programmers. They advice to use this solution: http://osvaldas.info/flexbox-based-resp ... t-fallback . Mine it simplier

Hi, I already have the last version of Hightlighter (1.1). After visiting derki.com I believed this layout change would easy to get, but I just realized it is very complicated and I risk to broke other things that are working. So please I ask you to restore everything as at the beginning (we can disable Easy JQuery rather than disinstall) and remove then all the code we added.
You will have the advantage to close finally such activity.

Hi

That's a pity. I put a lot of work into this. Ok. Please make my ftp access to Your server work again and I'll remove it. Or You can remove it. I've explained which code was added to which file couple of posts before.

You are right, it is a real pity, I wish a lot that update because I can show more articles in a single page and the layout is more clean, but I am not an expert and I do not wish conflicts. Furthermore hilighter does not work, then ...
My FTP server is running with your password. I did not disabled anything. I prefer you restore it because I risk to make mistakes.
Please let me know.

Hi

All reversed.

Hilighter seems not working good. Rotation works, arrows works, but if you go over the link with the mouse the link works only if you click on the first words.
It is a strange thing: if you go with the mouse on the last characters/word of the link you are unable to visit the link.
Only the first part of the link.
I tried it with firefox and chrome.

Hi

Please replace the highlighter module with a different one. I need to send this to programmers. It was the cause of the javascript conflict and now this error. Hopefully they will be able to fix it.

Teitbite, I am not a Joomla expert. This is my first Joomla website, for this reason I said "Please restore your updates".
What do you mean with a new module? Where do I find a new module?

It would be really appreciated if you could let it work yourself, because before your updates the highlighter module worked good. If you restored everything why it does not work?

Hi

I'm afraid highighter was broken from the start, You have just not noticed that. I've reported this to programmers, so soon there will be a fixed version to replace it.

Hi

Programmers send me some modified files for highlighter to replace at:

mod_highlighter_gk5/interface/css/style.css
mod_highlighter_gk5/interface/scripts/engine.jquery.js
mod_highlighter_gk5/interface/scripts/engine.mootools.js

Please try it. Check mootools and jquery library in module settings.

thank you, it has been fixed.
It shows trashed articles that of course have been deleted. How can I avoid to show erased k2 item articles?

If you click the arrows, then you are unable to click on the link served by the Highlighter.

Hi

What browser You have this problem in ? I'm looking in firefox and safari and there is no such problem.

Acctually no other way than to watch out for the source manually or select to show by category.

Let's concentrate only on one problem: trashed articles appears on Highlighter.
To proof that I created a k2 item and deleted it. Its title is "Juventus Madrid Poland"


I am able to see it with all browsers:

gavick-highlter.jpg

Are you able to see it too?
If yes please click on it and you will get 404 cause it is trashed.

Do you agree the Highlighter shows trashed articles?

Hi

Och. I missunderstood. I thought You are still not able to click the item. I will let programmers know about that.

Good, now please do this test:
click one arrow of the Highlighter on the right and right away try to pass the mouse over ALL the item link from left to right and from right to left several times. Do you see the pointer or the hand of the mouse while moving the mouse from left-right-left-right?
By my side I see the pointer and I am not able to click on the link.
I made such test on your demo template.http://demo.gavick.com/joomla25/news2/

Please let me know if it is the same for you.