Customise form layout

Finally someone who’s asking for this! ??

You can download a three column pure CSS solution here:
https://code-manager.com/code/?wpda_search_column_code_id=45

Credits go to my Italien friend Vincent! ??

You can probably rewrite this to a two column solution I think? And share it…? ??

Is this what you are looking for?

Thanks,
Peter

Hi Peter,

It looks feasible – I will have to get to grips with Code Manager for the first time but I’ve seen the documentation.

What about the second use case – having a textarea element for a specific sql data type (e.g. mediumtext)

Thanks again

Hi Kevin,

>>> What about the second use case – having a textarea element for a specific sql data type (e.g. mediumtext)

I’m not a CSS pro like Vincent… His three column solution is grid based. I don’t know if you can do this with a grid. Maybe flex would be more appropriate for your use case?

Does anyone else reading this know how to do this?

Thanks,
Peter

Hi there,

I’m going to mark this as resolved as we haven’t heard from you in a while.

Feel free to create a new thread if you have any other questions.

Thanks!

Thanks for this – but as reported in some follow up emails the CSS solution causes the ‘Show more’/’Show less’ buttons to go wrong (the less and more is inverted). Indeed the CSS seems to recognise this by hiding the buttons!

The more/less feature is very important to me as I want to hide the more obscure fields that aren’t used much.

Is there any way this could be fixed, or worked around in some way?

Hi Kevin,

I was hoping for some external responses from css wizards… ??

There are two things you can try:

(1) Remove the following rule from the css you downloaded from the Code Manager website:

.wpda_simple_table tr.row-show-less-more {
	display: none;
}

(2) Add this javascript code block to your web page:
https://code-manager.com/code/?wpda_search_column_code_id=47

Does this solve the issue?

Thanks,
Peter

Hi Peter

None of those things work as they stand – however they did give me an insight as to what is going on. I am not proficient enough in CSS or Javascript to determine the solution, but I’m hoping if I explain in detail you or someone can advise on the correct answer.

To recap we are trying to get multicolumn forms, but with the Show More/Less button functionality still working, initially hiding columns that have been ticked in the ‘Less’ column of the form template

In the normal case, such fields are marked with tr class of “row-show-less-more”. The CSS has ‘display:none’ for this, so the row is not displayed. When the Show More button is clicked, it executes jQuery(‘.row-show-less-more’).toggle() which introduces style=”display:table-row” to the tr element – revealing the missing rows. All as expected

In the multicolumm case, the principle is to introduce .wpda_simple_table tr CSS with a suitable width attribute and display:grid to get multiple tr into the same screen row
However this display:grid overrides the display:none of the row-show-less-more class and so you see all rows initially. If you click the Show More button, the toggle function still works and you get a style=”display:none” to hide the affected rows. But this means everything is backwards – rows are displayed initially and the Show More/Less button works the wrong way round.

Kevin

Hi Kevin,

Looks like the javascript code should be executed on page load to initialize the elements properly. That should fix it. I’ll have a look into this and get back to you…

Best regards,
Peter

Hi Kevin,

Please change the javascript code we previously discussed to this:

jQuery(document).ready(function() {
	jQuery('#show_more_less_button').on('click', function() {
		if (jQuery('#show_more_less_button').val() === 'show more >>>') {
			jQuery('.row-show-less-more').css('display', 'none');
		} else {
			jQuery('.row-show-less-more').css('display', 'grid');
		}
	});
	jQuery('.row-show-less-more').css('display', 'none');
});

This solves most of the issues for me. It initally just leave two cells on the second line and I have no idea why. But it might work for you as your table shows two columns in stead of three.

Best regards,
Peter

Hi Peter

Thank you – that works for me. Interestingly I had already tried that last jQuery at the beginning of the ready function but that didn’t seem to work

I appreciate all your help – this is really useful now and when I have tuned it, will post the full solution

Best regards
Kevin