Making forms that aren't so vertical

Making forms that aren't so vertical

by Justin Reeve -
Number of replies: 3

I'm trying to put a page together with the moodleform class that has input and textarea elements all over, in different [Bootstrap] columns. The way moodleform (i.e. quickform) displays is pretty much a vertical list style, but I'm trying to figure out how to extend the class to allow different positioning. Any tips on functions I particularly need to override to make this happen, or any other approaches I can take, without having to rewrite any of the form processing and field verification code?

Average of ratings: -
In reply to Justin Reeve

Re: Making forms that aren't so vertical

by Justin Hunt -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

I am not an expert on this. But since you asked this is what have done. I extend the mform class  with a function called tablify. I put elements into arrays and put them through the tablify function with a few parameters telling it how to lay them out. I shamefully user html tables for this, but I bet you could do it with nice CSS bootstrap columns. I attached a bit of code I had. Its from a pretty complex mod, and I cut the code back. But you can at least see my approach to it. 

Also note that you can add html elements to your forms like this to help with layout.

e.g $mform->addElement('html','<div class="qheader">');

Most form elements can be provided attributes in the fifth parameter to the add_element call. So you would add classes to elements there

e.g $mform->addElement('textarea','atextarea','my text area','wrap="virtual"',array('class'=>'mytextareaclass'));


Hope it helps.


Average of ratings: Useful (1)
In reply to Justin Reeve

Re: Making forms that aren't so vertical

by David Mudrák -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Plugins guardians Picture of Testers Picture of Translators
If it is a specific form, maybe you can achieve that via custom CSS only?
Average of ratings: Useful (1)
In reply to David Mudrák

Re: Making forms that aren't so vertical

by Justin Reeve -

I thought about this and I might end up doing it this way, but there are a few forms I need to set up with the column-based approach, and probably will have more in the future. It would be nice to just have a more flexible framework in general, I think.