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

[goble]

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 !

[Pavel-ww]

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

[goble]

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.

[Pavel-ww]

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]

Thanks I will and post results here ;-)

[goble]

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

[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.

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

[goble]

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

[Pavel-ww]

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]

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)

[Pavel-ww]

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]

Hi and thanks !

Working Perfectly ! ;-)

[Pavel-ww]

You are wellcome