Horizontal Fields

That can be accomplished with a simple CSS override. Unfortunately the PPOM plugin doesn’t specify what type of input element is contained within a field wrapper. So you either have to use a universal method or apply it to a specific element using it’s PPOM-associated data name.

Universal Method

@media screen and (min-width:768px){
	.ppom-field-wrapper > .form-group > label{
		display:inline-block;
		vertical-align:top;
		width:50%;
	}
	.ppom-field-wrapper > .form-group > select{
		display:inline-block;
		vertical-align:top;
		width:50%;
	}
}

Media screen at min-width 768px was included because that is usually the minimum width that displaying form label and select elements inline would look okay. Anything smaller may make them unusable. Keep in mind the above code would apply the 50% width to ALL labels and not just labels before a select field.

Element-Specific Method
If you only want this applied to a specific select and its respective label then add a secondary class of the data name of the select to the .ppom-field-wrapper. The class should be whatever is populated (or entered by you) in the Data name field of the select field you added in the PPOM fields in the admin section.

On a side note it is also a good idea to use unique data names to identify your input fields. Instead of just “size” enter a unique data name like “size001”.

Example using size001 as data name:

@media screen and (min-width:768px){
	.ppom-field-wrapper.size001 > .form-group > label{
		display:inline-block;
		vertical-align:top;
		width:50%;
	}
	.ppom-field-wrapper.size001 > .form-group > select{
		display:inline-block;
		vertical-align:top;
		width:50%;
	}
}

• This reply was modified 5 years, 10 months ago by brozra. Reason: spelling correction
• This reply was modified 5 years, 10 months ago by Andrew Nevins.

Hi there,

PPOM currently have only one layout for fields, we have the plan to make changes so each field can be overridden in the theme’s templates.

@brozra thanks for the update

Thanks a lot, will try!!

Worked as a charm!! easy to override on same page!

• This reply was modified 5 years, 10 months ago by gatech0.

Thanks, we try our best to make PPOM the BEST.

If you love our support/plugin please rate it ??