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   1685 Views

Avatar
Tama

Community Member, 132 Posts

19 July 2010 at 3:52pm

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

Community Member, 132 Posts

22 July 2010 at 9:57am

Any ideas from anyone?

Avatar
TotalNet

Community Member, 181 Posts

22 July 2010 at 10:47am

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

Community Member, 132 Posts

22 July 2010 at 11:14am

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

Community Member, 181 Posts

22 July 2010 at 11:42am

Edited: 22/07/2010 11:43am

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]