Issue with breaking groups over columns

Please try the parameter keep_together.

I will check if there is anything wrong with the setting “Always load shortcode scripts”. Sometimes you need to turn it on because WordPress cannot find the shortcode (for example, if the theme adds it later). So keeping it on is safer.

If you mean the tag style in the sidebar, it seems to use the class “widget_tag_cloud”.

So you could try to apply the same class:

[tag_groups_alphabetical_index column_count=0 div_id="responsive-tag-groups-alphabetical-index" append=" ({count})" largest=18 smallest=18 div_class="widget_tag_cloud" keep_together=1]

and then you probably also need in the CSS (to remove the underline):

.tag-groups-alphabetical-index .tag-groups-tag a {
 text-decoration: none;
}

PS: Please keep “Always load shortcode scripts” activated. Otherwise the CSS won’t load for the Alphabetical Tag Index. It’s a bug and will be fixed in the next release.

Thank you for your response.
I tried the shortcode and CSS for removing the underline. The tag style now looks as I want it to, but there is not always a single tag per line. Also, the parameter keep_together=1 unfortunately does not work.
After I turned on “Always load shortcode scripts” the parameter keep_together=1 works, but letters at the beginning of columns 2 and 3 do not show.

• This reply was modified 4 years, 4 months ago by galena.
• This reply was modified 4 years, 4 months ago by galena.

Yes, you still need the other class name, I forgot that:

[tag_groups_alphabetical_index column_count=0 div_id="responsive-tag-groups-alphabetical-index" append=" ({count})" largest=18 smallest=18 div_class="tag-groups-alphabetical-index widget_tag_cloud" keep_together=1]

The column break issue will be fixed in the next release. Or, if you cannot wait, you add to the CSS:

.tag-groups-keep-together {
break-inside: avoid;
}

Thank you very much. It’s perfect now.

Unfortunately, after today’s plugin update, the same issue with letters at the beginning of columns 2 and 3 has re-appeared. They do not show.

Before the update I used your CSS for fixing the column break issue and deactivated “Always load shortcode scripts”, which made everything work as expected. Now it doesn’t matter whether the “Always load shortcode scripts” setting is active or inactive, the same issue remains.

Additionally, when “Always load shortcode scripts” is activated, it has a strange interaction with my “filter by price” widget and seems to graphically add something that looks like a checked radio button to the left and right ends of my slider. Could you suggest some way to fix this?

Sorry, I cannot see the issue. Here is a screenshot: https://pasteboard.co/JkasH1n.png The letters are on top.

I noticed that you use Autoptimize. Maybe there is some issue with the cache.

On that page I don’t see “filter by price”. Where exactly is it?

I think I found the widget. Do you mean these things: https://www.galena-shop.cz/wp-content/plugins/tag-groups/assets/css/aristo/images/slider_handles.png ? These are the slider handles added by a jQuery UI theme.

So, either you could find a way to keep “Always load shortcode scripts” deactivated, or you could try to switch in the Tag Groups settings, Front End, Themes to another theme (or to “own” and leave the field empty).

I now saw the missing letter. That seems to be some kind of Chrome issue. The h3 is there correctly on the top, but for some reason it is invisible.

I think you will need some kind of hack to solve that issue. Please try this:

.tag-groups-alphabetical-index h3 {
 padding-top: 5px;
}

Hello,
Thank you, your hack works.
About the issue with “filter by price”, you are right – only the themes aristo and delta have this problem, but other themes don’t.
Also I tested the Alphabetical Tag Cloud widget with the shortcode [tag_groups_alphabet_tabs largest=14 smallest=14 separator=”?”] and I noticed when I click on the last letter in the row, a new row appears with only one letter at the end. You can see it in the following screenshot:
https://pasteboard.co/JkaOyoA.png
What am I doing wrong?

This is one of the problems of jQuery UI, if some other style definitions come in between.

You can try here:

.ui-tabs .ui-tabs-nav li {
  margin-bottom: 1px;
}

It depends on the theme and you have to adjust it individually. Mostly it is about the bottom margin.

Yes, it works.
Can you also help me with the parameters of the Alphabetical Tag Cloud widget? I am trying to change only the style of the tags without affecting the style of the letters by the shortcode:
[tag_groups_alphabet_tabs div_class=”widget_tag_cloud” largest=14 smallest=14 separator=”?”]
But I have changed both the style of the tags and the letters. Here is a screenshot:
https://pasteboard.co/JkbHPuK.png

In that case it will not work so easily. You need your own class identifier, like

[tag_groups_alphabet_tabs div_class="tag-groups-styled-tags" largest=14 smallest=14 separator="?"]

and then you use

.tag-groups-styled-tags .tag-groups-tag a {

}

and copy there the same styling that your theme uses for “.widget_tag_cloud a”. Please ask your web designer. I don’t want to take all of their work away. ??

Thank you very much.