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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Form Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Displaying two form fields inline


Go to End


5 Posts   2420 Views

Avatar
Tama

Community Member, 138 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, 138 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, 138 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 FormField->addExtraClass()