CSS: Order Horizontally instead of Vertically in Layout Topic is solved

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
goble
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 233
Joined: Sat Jan 09, 2010 11:23 am

CSS: Order Horizontally instead of Vertically in Layout

Post by goble » Fri Jul 30, 2021 7:36 am

Hello,

Am using k2 extensions to display k2 items in a Masonry Style (because photos are not of the same height)

The link is here : https://explora.mu/hd-photos/most-popular

The photos are displayed correctly but not in the right order:

Code: Select all

I would like the output to be:
 
| item 1          | item 2          | item 3          | item 4 
| item 5          | item 6          | item 7          | item 8 
| item 9          | item 10         | item 11         | item 12 
 
how the items are being displayed now:
 
| item 1          | item 4          | item 7          | item 10
| item 2          | item 5          | item 8          | item 11 
| item 3          | item 6          | item 9          | item 12
CSS:

Code: Select all

.tagItemList {
    -webkit-column-count: 4;
  -moz-column-count:4;
  column-count: 4;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
   margin: 1.5em 0;
    padding: 0;
    font-size: .85em;
} 
 
.tagItemView {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 33px;
    width: 100%;
  -webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #aaa;
    border: 1px solid #eaeaea;
}
 
.tagItemView img {
    max-width:100%;
}
I think it's the way Column-count CSS works. Getting the layout in rows (i.e. same height adjusted to fit in one row) would surely sort out the issue but I prefer the Column-count layout.

Is there a simple trick (preferably without JS) that can make the ordering happen ?

P.S. The layout file (on override) is annexed.

Thanks !
You do not have the required permissions to view the files attached to this post.
My Joomla Stock Photo Download site https://explora.mu

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 376
Joined: Tue Jun 30, 2020 12:17 pm

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by Pavel-ww » Fri Jul 30, 2021 8:53 am

goble wrote:
Fri Jul 30, 2021 7:36 am
Column-count CSS works
Hi. Column-Count CSS module is designed only for text or for сontent of a separate article to get the distribution of сontent as in the newspaper. Its order can only be vertical. This module is not intended to build a layout. Use FlexBox CSS module or CSS Grid module.

For example

Code: Select all

.tagItemList {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 300px; /*for a demonstration only*/
	grid-row-gap: 30px;
}
.tagItemView {
	overflow: hidden; /*It's just a crutch for a demonstration*/
}
But keep in mind this code only as an example. It requires some refinement, removing all column-count properties and some other your styles. I found only some and deleted them. That is, you need to start from scratch using the properties suitable for this. JS is not required.
The result is in the screenshot:
3.jpg
You do not have the required permissions to view the files attached to this post.

goble
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 233
Joined: Sat Jan 09, 2010 11:23 am

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by goble » Fri Jul 30, 2021 12:22 pm

Hi and thanks for your help,

however "column-count" css was quite straight forward and even I who does not have a lot of knowledge in css was able to get the desired result quite easily. Am afraid that I won't be able to use your solution since it might need quite a lot of work.
My Joomla Stock Photo Download site https://explora.mu

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 376
Joined: Tue Jun 30, 2020 12:17 pm

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by Pavel-ww » Fri Jul 30, 2021 3:11 pm

goble wrote:
Fri Jul 30, 2021 12:22 pm
Hi and thanks for your help,

however "column-count" css was quite straight forward and even I who does not have a lot of knowledge in css was able to get the desired result quite easily. Am afraid that I won't be able to use your solution since it might need quite a lot of work.
Do not give up. It is not so difficult as it seems. If you learn CSS Grid, you will become Lord Of Layouts :) . Look a couple of lessons on [youtube].

goble
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 233
Joined: Sat Jan 09, 2010 11:23 am

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by goble » Fri Jul 30, 2021 3:49 pm

Thanks I will and post results here ;-)
My Joomla Stock Photo Download site https://explora.mu

goble
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 233
Joined: Sat Jan 09, 2010 11:23 am

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by goble » Sat Jul 31, 2021 12:26 pm

Hi Pavel-ww,

Maybe I read it wrong but CSS Grid examples (without JS) seems to apply only when you define each and very items width & height.

In the meantime, I found this codepen : https://codepen.io/andybarefoot/pen/QMeZda

I replicated the same code on a protostar template. After a few hours of testing (and I tried on different templates in case of JS conflicts) I still get the same issue. The layout will first load broken. If I change browser width, it will appear correctly.

Here's the link : http://k2.securemu.com/index.php/about
My Joomla Stock Photo Download site https://explora.mu

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 376
Joined: Tue Jun 30, 2020 12:17 pm

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by Pavel-ww » Sat Jul 31, 2021 3:17 pm

goble wrote:
Sat Jul 31, 2021 12:26 pm
Maybe I read it wrong but CSS Grid examples (without JS) seems to apply only when you define each and very items width & height.
By default, it depends on the size of the content inside. And then you can configure any sizes as you like.
You found too complex example. This example does not work without JS. I deleted JS, and it broke, just like on your page.
111.jpg
Start with something simple, to understand how it works.

Code: Select all

https://www.[youtube].com/watch?v=9zBsdzdE4sM

Code: Select all

https://dev.to/anobjectisa/build-a-pinterest-layout-using-html-css-2m2d
You do not have the required permissions to view the files attached to this post.

goble
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 233
Joined: Sat Jan 09, 2010 11:23 am

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by goble » Sun Aug 01, 2021 12:20 pm

Hello and thanks again,

both links explain about assigning classes to specific items so as to get the desired height. (Am I missing something here?) For me my k2 items are not static. I need the heights auto.

Here's another code pen where the items has specific classes.
https://codepen.io/jfoxy/pen/aBgyWx
My Joomla Stock Photo Download site https://explora.mu

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 376
Joined: Tue Jun 30, 2020 12:17 pm

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by Pavel-ww » Sun Aug 01, 2021 5:25 pm

goble wrote:
Sun Aug 01, 2021 12:20 pm
both links explain about assigning classes to specific items so as to get the desired height. (Am I missing something here?) For me my k2 items are not static. I need the heights auto.
Hi. The main principle in the second example is the creation of cards of several heights. Yes, each of them has a static height, but together they create the visibility of dynamic height.

In case of auto height, without JS It's not possible to do.

goble
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 233
Joined: Sat Jan 09, 2010 11:23 am

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by goble » Mon Aug 02, 2021 10:38 am

Hi @Pavel-ww and thanks again,

actually this is what I thought: I need JS.

Base on the codepen: https://codepen.io/andybarefoot/pen/QMeZda

My tests hereunder. Am using a custom HTML module to load the static items in this example to make it simple. I will use the JS with k2 once I find the solution.

Here's a way it will work:

Code: Select all

https://dev.explora.mu/custom
Above I have included the js in the same module.

Here's a way it won't work :

Code: Select all

https://dev.explora.mu/custom-2
In this case the JS is not part of the module.

Actually I require that the scripts to load on every page. What I have tried and which is not working:

1. I have included it in my Helix Template in Template > Style > Custom Code > Custom Javascript
2. Load the JS in a custom.js file / You can see that it is loaded in Firebug
3. Use 'Easy Includes' plugin and declare the code there (ensuring that the plugin is loaded at last)
My Joomla Stock Photo Download site https://explora.mu

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 376
Joined: Tue Jun 30, 2020 12:17 pm

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by Pavel-ww » Mon Aug 02, 2021 11:51 am

goble wrote:
Mon Aug 02, 2021 10:38 am
Actually I require that the scripts to load on every page. What I have tried and which is not working:

1. I have included it in my Helix Template in Template > Style > Custom Code > Custom Javascript
2. Load the JS in a custom.js file / You can see that it is loaded in Firebug
3. Use 'Easy Includes' plugin and declare the code there (ensuring that the plugin is loaded at last)
Hi. In the second example, your layout is spoiled because the script is performed before all DOM elements are loaded. To work correctly, you must first get all the DOM, then execute the script. The browser reads and executes the code just as you read the book - from left to right, from top to down.

The easiest way to solve it is to place the script at the very bottom, before </ body>.
You can use two options.

1) Delete custom.js. Wrap the code with <script></script> tags and place in Helix Template in Template > Style > Custom Code > Before body field
2) Rename custom.js and connect it in the same Before body field.
Through

Code: Select all

<script src="relative_path_to_your_js_file"></script>
About Custom Javascript field. There are placed scripts that are performed in a single stack of page scripts. If you do not know what it is, do not use this field.

goble
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 233
Joined: Sat Jan 09, 2010 11:23 am

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by goble » Mon Aug 02, 2021 12:32 pm

Hi and thanks !

Working Perfectly ! ;-)
My Joomla Stock Photo Download site https://explora.mu

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 376
Joined: Tue Jun 30, 2020 12:17 pm

Re: CSS: Order Horizontally instead of Vertically in Layout

Post by Pavel-ww » Mon Aug 02, 2021 3:20 pm

You are wellcome


Post Reply

Return to “Templates for Joomla! 3.x”