Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions

Displaying two form fields inline


Reply

5 Posts   1583 Views

Avatar
Tama

19 July 2010 at 3:52pm Community Member, 130 Posts

Howdy

I have a form where I want to run two of the text fields inline. This is the form fields:

      $fields = new FieldSet(
         new TextField('street_from', 'Street Number from'),
         new TextField('street_to', 'to'),
         new TextField('street_name', 'Street Name')
      );

Which currently displays like this:

Street Number from
#####################

to
#####################

Street Name
#####################

I'd like to make the form display like this:

Street Number from #### to ####

Street Name
#####################

What is the best way of changing this to my required format?

Cheers
Tama

Avatar
Tama

22 July 2010 at 9:57am Community Member, 130 Posts

Any ideas from anyone?

Avatar
TotalNet

22 July 2010 at 10:47am Community Member, 181 Posts

Hey Tama,

The quickest way is to update your form.css and add a rule with the id (of the containing div) as the selector

e.g.

#EditableTextField1, #EditableTextField2 {float: left}
#EditableTextField3 {clear:left}

It's not a perfect workaround but I'm about half way through a patch to UserDefinedForm to allow adding a class to a form field. Guess I should get back on that again.

Rich

Avatar
Tama

22 July 2010 at 11:14am Community Member, 130 Posts

Thanks heaps Rich, that worked well. I ended up using this CSS:

#street_from, #street_to {float: left;}
#street_from input.text, #street_to input.text {width: 138px;}
#street_from .middleColumn, #street_to .middleColumn {width: 144px;}
#street_name {clear:left}

Avatar
TotalNet

22 July 2010 at 11:42am (Last edited: 22 July 2010 11:43am), Community Member, 181 Posts

Oops, Just realised you're not using UDF.

There is a much cleaner way of doing it :)

use [url=http://api.silverstripe.org/2.4/forms/core/FormField.html#methodaddExtraClass]FormField->addExtraClass()[/url]