You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours:
Monday To Friday
From 09:00 To 17:00 Europe/London (BST)

Please post your question in the Forum and we will get back to you as soon as we can.

  Thursday, 20 February 2020
  23 Replies
  5.8K Visits
I love the new column feature. It's a gamechanger! I've begun using it on client sites. Almost, without exception, I'm requested to add more space between the columns so that the right side of the text isn't so close to the left side of the text in the next column. Is this possible to adjust?

Thanks.

- Pete
more than a month ago
·
#103195
I love the new column feature. It's a gamechanger! I've begun using it on client sites.


Thank you, and this is just the start. I hope to add improvements and new features in Columns in the future, which brings me to...

Almost, without exception, I'm requested to add more space between the columns so that the right side of the text isn't so close to the left side of the text in the next column. Is this possible to adjust?


I am working on an additional option to set in the Columns dialog to select a spacing value, eg: Small, Medium, Large, but until then, you can use css in you template stylesheet to add custom spacing, eg:


[data-wf-columns] > div,
.wf-columns .wf-column {
margin: 0 1em;
}

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#103694
Ryan do you still intend to add the above mentioned feature to increase the gap between columns i.e., increase the gutter etc. and if yes can you please advise an estimated release date? It would be very handy for those of us who are not members of the coding fraternity. Cheers.... Rod
more than a month ago
·
#103696
Yes, I plan to add this in JCE Pro 2.8.11, hopefully by the end of April.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#103698
Thank you for then update Ryan. Stay safe. Rod
more than a month ago
·
#104036
Afternoon Ryan. Please advise if this addition is still on track?
Cheers.... Rod
more than a month ago
·
#104044
Not for 2.8.11 unfortunately as I hit a snag with the Bootstrap framework, which requires me to recode that part. But almost definitely 2.8.12 ;)

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#104285
Ryan did this update occur with 2.8.12 and if yes is it a setting in the parameters location?
Cheers.... Rod
more than a month ago
·
#104294
Not yet, still working on this...

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#104630
G'day ryan. Hate to be a pest but is this item expected in the near future or should one be looking at an alternative solution to address the column spacing issue?
Cheers.... Rod
more than a month ago
·
#104664
Ryan please disregard this item/question. I have a solution. Cheers
more than a month ago
·
#104803
The solution to add the CSS code worked great. Without the css, the columns come within a single space of one another. With the CSS, however, when the columns wrap under each other for narrower screens, the 2nd column indents from the first column. Suggestions? columns.JPG
more than a month ago
·
#104805
Change the margin so it is only applied to the right of each box, eg:


[data-wf-columns] > div,
.wf-columns .wf-column {
margin: 0 1em 0 0;
}


In a few weeks, when Chrome 84 is released, you can use the gap property instead (currently only supported in Firefox), eg:


[data-wf-columns,
.wf-columns {
gap: 1rem 0;
}

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#104862
Hi,

With the provided code, the bad alignment of the column is still happening but I managed to fix it until JCE devs implement the column gap option in the core component.

Here is the CSS code to add into your template CSS :


@media (max-width: 960px){
.wf-columns-stack-medium>.wf-column {
width: 100%;
margin-left: inherit !important;
margin-right: inherit !important;
flex: auto !important;
}
}

.wf-columns .wf-column {
max-width: 100%;
margin-left: 15px;
box-sizing: border-box;
flex: 1;
}


Hope it helps! :)
more than a month ago
·
#104865
Please try JCE Pro 2.8.15 RC3 - https://www.joomlacontenteditor.net/downloads/editor/pro/development

This now uses the css gap property for spacing between columns, with overrides for IE10/11 and Safari.

The gap property is now supported in the latest version of Firefox and Chrome, Edge and Brave (Chromium 84+)

I intend to release this version on Thursday at the latest, so would appreciate feedback on the change.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#104877
Hi Ryan,

Does that mean the there is now an option somewhere in JCE settings to change the space between columns? If yes, can you tell us where it is? I can't find such an option anywhere. Or do we still have to do a CSS over right in our templates?
more than a month ago
·
#104878
Not yet, but recent widespread support for the gap property makes this easier to implement. I will attempt to add an option in JCE Pro 2.8.16

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#104879
The following styles will be used to set the gap size in the next update. These are available to use now in 2.8.15:


.wf-columns-gap-small {
gap: 0.25rem;
}

.wf-columns-gap-medium {
gap: 0.5rem;
}

.wf-columns-gap-large {
gap: 1rem;
}

.wf-columns-gap-none {
gap: 0;
}

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#104880
OK thanks!
more than a month ago
·
#108264
I love the new column feature, too. Before I spent hours with divs! Many, many thanks for that!

I have a layout like:

Picture / Text
Text / Picture
Picture / Text
Text / Picture

On widht screens this is perfect. But by smaler screens it staple vertical (thats good) but I get:

Picture
Text
Text
Picture
Picture
Text.

Any chance to tell a div to staple from left to right oder right to left? At the end I would like to have:

Picture
Text
Picture
Text
.....
On small screens.
more than a month ago
·
#108266
@globinli - Assuming you are using the "Generic" CSS Framework for Columns, add the following to your template stylesheet:


@media (max-width: 640px) {
.wf-columns + .wf-columns:nth-of-type(2n) > .wf-column:first-child {
order: 99;
}
}

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#108275
Many thanks! I will try it so.

In your Jce I can choose the layout 2-1, 1-2, 3-1 and so on. But what, if I need a very speciel layout? Something like 1-5 or 45%-55% or 200px - 850px?
more than a month ago
·
#108276
But what, if I need a very speciel layout? Something like 1-5 or 45%-55% or 200px - 850px?


At this stage you would have to create the css for that yourself.

In order to make Columns workable, they had to be kept simple, therefore limiting the number of options available and reducing the ability to customize.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#108285
Many thanks. Yes, for me anyway as simple as possible :-D Thanks for anwsering my questinos :D
  • Page :
  • 1
There are no replies made for this post yet.
Be one of the first to reply to this post!