Support

Support is part of Event Gallery Extended.

Please get a subscription if you need support. Feel free to use the ticket system or the contact form for reporting defects or pre-sale questions. Make sure you're logged in in order to be able to create a new ticket.

For general information you can also jump to the manual.

Subscribe now!

#4627 Event Tiles list

Posted in ‘Event Gallery Extended’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

PHP Version
8.1.26
Joomla Version
Joomla! 4.4.0 Stable
Test URL
http://lado.erelversoft.hu/hu/muveszek

Latest post by ricso on Wednesday, 06 December 2023 09:20 UTC

ricso

Hi !

"eventgallery-tiles-list" > position: absolute
Is it possible to change the number of tiles displayed per row?

==========================================

<div class="eventgallery-tiles-list eventgallery-events-tiles-list">
    <div class="eventgallery-tiles" style="height: 1015px;"                        
<div class="eventgallery-tile" style="visibility: visible; position: absolute; float: none; left: 0px; ..
<div class="eventgallery-tile" style="visibility: visible; position: absolute; float: none; left: 442px; ..
<div class="eventgallery-tile" style="visibility: visible; position: absolute; float: none; left: 884px; ..

 

 

sbluege

Hi, 

Yes, it is. Always consider, that the numbers of items per row will differ for different view sizes. What you see in is the calculation result of a JavaScript-snippet. It uses the initial width of the tiles to calculate the layout. By changing CSS, you can change that width. I tried to put together some hints in the FAQ-section of the manual. Maybe that already helps. 

https://www.svenbluege.de/joomla-event-gallery/event-gallery-manual/customize-responsive-layout

https://www.svenbluege.de/joomla-event-gallery/event-gallery-manual/customize-eventlist

https://www.svenbluege.de/joomla-event-gallery/event-gallery-manual/customize-event-grid-layout

ricso
This seems to have helped:

 

One column (100%):
=============================

.eventgallery-tiles-list .eventgallery-tile {
    width: 100% !important;
    float: left !important;
    position: relative !important;
    left: inherit !important;
    top: inherit !important;
}

 

Three columns (33.333%)
=============================

.eventgallery-tiles-list .eventgallery-tile {
    width: 33.3333% !important;
    float: left !important;
    position: relative !important;
    left: inherit !important;
    top: inherit !important;
}

 

Four columns (25%)
=============================

.eventgallery-tiles-list .eventgallery-tile {
    width: 25% !important;
    float: left !important;
    position: relative !important;
    left: inherit !important;
    top: inherit !important;
}

Five columns width value: 20%
Six columns width value: 16.6666%
(etcetera, etcetera...)

 

Very important for mobile layout:
=============================
@media (min-width:200px) and (max-width:768px){
 .eventgallery-tiles-list .eventgallery-tile {
    width: 100% !important;
    float: left !important;
    position: relative !important;
    left: inherit !important;
    top: inherit !important;
}
}


A successful setup for everyone!

sbluege

Please don't do that! Never ever use !important is possible. Make CSS-selectors more specific if you want to overload something (I added the div. for this below). Furthermore, there is no need to define float, position, left and top. To test, change the CSS and reload the page. The JavaScript will pick up your changes and adjust the layout. It'll not work if you use the browsers development console. 

Try this instead: 

@media (min-width:200px) and (max-width:768px){
   div.eventgallery-tiles-list .eventgallery-tile {
      width: 100%;
  }
}

ricso

The CSS code you suggested did not work in any browser by itself.
I was forced to override the value of the "position" attribute and the area positions.

Now it works flawlessly and perfectly!

Of course, I always use the forced "!imortant" option because I want to change the effect to permanent. If you think that my private comment is dangerous for others, please delete it or make it unavailable to others..

Thank you for the otherwise excellent EventGalleryExtended component, good luck with the development!

(sorry for my incomplete knowledge of English, Google translator came to my aid)

sbluege

Alright, I see what you're doing. You still only need to overwrite the width-attribute. Leave the !important there, that will also overrule the media-queries for different screen sizes. The other attributes are set via JS anyway.

ricso

It's okay but we don't understand each other, but that's okay.
(believe me, I tried it, but it didn't work .. I say no problem, it's fine for me, the way I set it up)

sbluege

Alright :) If you run into trouble, we'll join forces. 

ricso
That's right ! Let's war for world peace! .. ))) (That's right! Let's continue the war for world peace!) .. from Google Translate      
From: Sven Bluege [mailto:info@svenbluege.de]
Sent: Wednesday, December 06, 2023 9:49 AM
To: Ricsi LzlBR>Subject: Reply to your public ticket #4627 Event Tiles list [Event Gallery Extended]