[Html-widget] FormFu - css question

[Carl Franks]

On 21/03/07, Mario Minati <mario.minati at googlemail.com> wrote:
> tried/managed to create a multi element that aligns part of his content right
> aligned?
>
> Goal is to create a line of buttons where the submit button is on the left
> side and the reset and cancel buttons are on the right side.

Below is an example form, consisting of 2 text fields, then a multi
containing the 3 buttons.
Below that there's some css you should add to the end of the
examples/vertically-aligned.css file.

Because xhtml doesn't define a cancel button, you need to just use
another submit button, and have your app decide which was clicked
according to which name was submitted.
I've picked 'cancel' as the button's name - if you change it, you'll
need to change the input[name="cancel"] part of the css accordingly.
Also, because of the way css align:right works - to get the cancel
button to sit on the right side of the reset button, it has to be
before the reset button in the markup. It's just a css quirk you have
to remember.

Carl

*** yaml form ***
---
id: form
auto_id: %n
auto_fieldset: 1
elements:
  - type: text
    name: text1
    label: Text1
  - type: text
    name: text2
    label: Text2
  - type: multi
    elements:
      - type: submit
        name: submit
      - type: submit
        name: cancel
        value: Cancel
      - type: reset
    container_attrs:
      class: buttons

*** css ***

fieldset {
	width: 24em;
}

fieldset .multi.buttons {
	margin-left: 1px;
}

fieldset .multi.buttons input[type="reset"],
fieldset .multi.buttons input[name="cancel"]
{
	float: right;
}