In the add/edit listing, show attributes in two columns

General
1

I have an attribute that has more than 30 values. Right now it shows in a single column, thus adding vertical scrolling and making the page very long. How can I make it to show it 2 columns for that specific attribute.

3

Sorry for the delay. Unfortunately there’s no such layout option in forms yet, but this may be possible via CSS, if you’re familiar with CSS please try changing the field container width to 50% for the .hp-form--listing-update .hp-form__field selector.

4

Thanks! I found the css to have the checkbox values in two columns, however it is targeting all the checkboxes in my listing update page, because the div doesn’t have an id I could target. Is there a code snippet I can use to add id to certain fields? In this case I would like to have hp-field–checkboxes have different id so that i can enable two columns just for certain checkbox lists with many values.

7

Hi,

Unfortunately, the id is only available on the inputs themselves, not the wrappers, but we plan to add more CSS classes to allow for customization. As a workaround, please try using the nth-child parameter.

8

Unfortunately I have not have much success using the ntn-child parmater
I have tried these options to no success

 .hp-form--listing-submit .hp-field--checkboxes:nth-of-type(4) {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

And this:

.hp-field--checkboxes div:nth-child(4){
	columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

and lastly this:

div:nth-child(4 of .hp-field--checkboxes){
	columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

Do you have any other suggestions? It seems like the nth-child parameter doesn’t work well with complex css class structures. Maybe there is php snippet I can use to add ids to div?

Thanks

10

Please try this selector instead:

.hp-form--listing-update .hp-form__field:nth-child(4)

It targets the fourth field in the listing submission and edit form, so by adding other selectors via a space you can target inner elements. Just setting the number of columns via columns: 2; may not work, this requires further changes like setting 50% width for inner elements (e.g. label, each checkbox is wrapped with the label HTML tag).

Hope this helps.

12

Here is what worked for me:

.hp-form--listing-submit div:nth-of-type(4) > .hp-field.hp-field--checkboxes {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2; 
}
13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

14

image
image766×250 24.2 KB

15

Hi,

Unfortunately, there’s no such feature, it would require a custom implementation. Please check this similar topic.