Jump to:

1969 Posts in 1272 Topics by 606 members

Form Questions

SilverStripe Forums » Form Questions » Displaying two form fields inline

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

Page: 1
Go to End
Author Topic: 1422 Views
  • Tama
    Avatar
    Community Member
    119 Posts

    Displaying two form fields inline Link to this post

    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

  • Tama
    Avatar
    Community Member
    119 Posts

    Re: Displaying two form fields inline Link to this post

    Any ideas from anyone?

  • TotalNet
    Avatar
    Community Member
    181 Posts

    Re: Displaying two form fields inline Link to this post

    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

  • Tama
    Avatar
    Community Member
    119 Posts

    Re: Displaying two form fields inline Link to this post

    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}

  • TotalNet
    Avatar
    Community Member
    181 Posts

    Re: Displaying two form fields inline Link to this post

    Oops, Just realised you're not using UDF.

    There is a much cleaner way of doing it

    use FormField->addExtraClass()

    1422 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.