How to apply Fieldset

rss

Posted by schuess - Nov 2 ’15 at 04:17

If i wanted to take a group of fields, and apply a fieldset tag around them, how would i do that?

 

thanks

matt

  • rostislav
    rostislav
    Moderator
    Member for: 6 years 8 months 17 days
    #1 by rostislav Nov 3 ’15 at 05:55

    The easiest thing is to use a table and set its border. Just put all your fields inside a table, then add

    border: 1px solid black; 
    

    into its style attribute.

    Does that satisfy your requirements?

  • schuess
    schuess
    Member
    Member for: 7 years 11 months 28 days
    #2 by schuess Nov 3 ’15 at 12:02

    Well it does not give you the text that is built into the border like a traditional fieldset does, but if the alternative is extremely complex, i guess it will have to do.

     

     

  • rostislav
    rostislav
    Moderator
    Member for: 6 years 8 months 17 days
    #3 by rostislav Nov 5 ’15 at 06:27

    [#2]:

    An SP form is an html table, where each field is a table row. You cannot simply insert a fieldset around table rows. You could move all fields outside the table and wrap them around a fieldset, but that would break existing CSS.

    You could simply add a caption to the table. If you want, you can also position it right on the table border. This will add such a caption:

    $(".mytable").prepend("<caption style='position: relative;top: 8px;width: 100px;background: white;margin-left: 50px;'>Monthly savings</caption>")
    

    You have to add a CSS Class name 'mytable' (in Forms Designer) to the table for this to work.

    You may have to tweek it a little bit to suit your needs. If you change the caption's text you'll have to change its width too.

    Note that this will leave a small amount of space above the table.

    Is this okay for you?

  • schuess
    schuess
    Member
    Member for: 7 years 11 months 28 days
    #4 by schuess Nov 6 ’15 at 10:04

    Thanks for the info. I was interested in what all the options were. It is not a hard requirement that i need. This will suffice.

Displaying 1 to 4 of 4 messages