div nf-field-container wrapped by nf-field

Karl,

That nf-field shouldn’t impact that all all. We have some built in classes that you can apply to the field container and it creates columns without a problem. That nf-field is a part of the programmatic process and shouldn’t impact structure at all.

We have not seen any collisions from that at least. If you are you can submit a support ticket at https://ninjaforms.com/contact/ and we can look into what you are experiencing specifically.

Hmm, okey, odd..

$(‘nf-field’).addClass(‘col-md-6’); in console gives me the exact outcome i’m looking for though. And the thing is that i cant place it as script in theme either, since the script cant find nf-field when executed from theme.

Yeah, If you submit a ticket at the address above we can investigate that better since we don’t internally use anything with bootstrap.

Thanks, will do!

overriding few clear-float may solve your issue.

.nf-field-container, #ninja_forms_required_items {clear:none !important;}

@xakbox This worked from a layout perspective, but it is giving trouble trying to focus on input for some reason.

I’m also having this problem. Ninja Forms, please remove the nf-field wrapper tag or place the classes on it instead of the child div inside it. It’s impossible to style a form as multiple columns as specified breakpoints.

I developed a hack to remove the nf-field tag. I can now style nf-field-container divs into columns at specified breakpoints using CSS.

To prevent the user from seeing the form’s styles change, I also hide the form using CSS by default. Once the form is rendered and the nf-field tag wrapper is removed, the form is shown.

Ninja Forms has a way to override the field template html, but that doesn’t work to remove the field wrapper, only the contents of it.

		<script type="text/javascript">
			(function($) {
			var formExists = setInterval(function() {
				if ($('.nf-field-container').length) {
					$('.nf-field-container').unwrap('nf-field');

					$('.nf-form-cont').show();
					clearInterval(formExists);
				}
			}, 100); // check every 100ms
			})(jQuery);
		</script>

• This reply was modified 7 years, 9 months ago by depiction.

I’m going to add to this call to remove the wrapping nf-field tag, or apply size classes to it. It might not impact the layout if you’re using floats, but it kills using flexbox.