Tim Hunt

Oops, the unstyled form should have the bits in the order

* Report type: {and the associated controls}
* Bogus lable: {and the associated controls}
* Search by: {and the associated controls}
* Sort by: {and the associated controle}

and I should add the the trick of using float-left like this to do multi-column layouts is a standard CSS trick. The quiz questions have been laid out like this since before I took over 18 months ago.

Ok, so start by making your moodle form look like this:

-------------------

Report type: o Summary o Detail

Search by: Job Title 1 [Choose... ] Job Title 2 [Choose... ] Job Title 3 [Choose... ] Job Title 4 [Choose... ]

Bogus lable: [Select saved query ]

Sort by: Level 0 [Choose... ] Level 1 [Choose... ] Level 2 [Choose... ]

(Get report) (Save Query) (Exit)

--------------------

Here, o is a radio button, [] is a dropdown () is a button.

The way to get several things on a line like this is http://docs.moodle.org/en/Development:lib/formslib.php_Form_Definition#addGroup. There are lots of examples in the code.


Once you are there, it is time to use CSS to make it not suck. Using your favourite tool (Firefox + Firebug, Web developer toolbar, or Dom Inspector would be my choice), find a container in the HTML that surrounds each of the four lumps

* Report type: {and the associated controls}
* Search by: {and the associated controls}
* Bogus lable: {and the associated controls}
* Sort by: {and the associated controle}

Work out how to refernce them in CSS, then set each of them to width: 49%; float: left. You may have to go smaller than 49% to get them to fit side-by-side.

Set the row of submit buttons to be clear: both.

Set the label "Bogus lable:" (but not the associate controls) to be display: none, or visibility: hidden, or something. (Or come up with a meaningful label for this control.)

Finally, work out how to get the line-breaks you want between the Job-title and level controls. I think that might be a case of making them display: block.

If you can get close, post the actual Moodle Form HTML, and CSS, and I may be able to help you tweak it, but right now, I am going to bed.

Well, I have to say, I would never want to make a form look like that! I realise you say it is a quick mock-up, but still.


To start with, I woudl copy the saved search interface from Bugzilla. That is, I would take it out of the search form. Instead, after you have done a search, there should be a "Save this serach as" option at the end, and somewhere there should just be a list of links, or a dropdown, to run any previously saved search.


For sort by, why don't you want to do what is done almost everywhere else in Moodle, and have clickable table column headings to do sorting?


If you do both of those, you are back to a simple linear form for the rest.

Well, it is going to involve using floats. It should be quite easy if you are prepared to have they laid out in the order

A B
C D

Somewhat harder if you want

A C
B D

where at the moment you have

A
B
C
D

Can you put the HTML somewhere public, so I can have a go with the web developer toolbar edit css thing

I'm afraid it depends. You will need to look in the PHP documentation.

See http://php.net/manual/en/function.error-log.php and http://php.net/manual/en/ref.errorfunc.php#ini.error-log.