CiviCRM Community Forums (archive)

*

News:

Have a question about CiviCRM?
Get it answered quickly at the new
CiviCRM Stack Exchange Q+A site

This forum was archived on 25 November 2017. Learn more.
How to get involved.
What to do if you think you've found a bug.



  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Discussion (deprecated) »
  • Feature Requests and Suggestions »
  • Usability Improvements (Moderator: Dave Greenberg) »
  • Layout for price fields.
Pages: [1]

Author Topic: Layout for price fields.  (Read 1156 times)

joanne

  • Administrator
  • Ask me questions
  • *****
  • Posts: 852
  • Karma: 83
  • CiviCRM version: 4.4.16
  • CMS version: Drupal 7
Layout for price fields.
May 25, 2011, 06:07:07 am
I am using price sets for event registrations. I am setting up an event with 8 price fields some of which contain 15 options.The registration form will look a trifle daunting unless I display more than one price option per line.  However, if a price field is set up to display 3 or more options per line the layout is a little confusing as the options are not obviously in columns. The layout looks approximately like:

Thursday morning session selection *   O Not Applicable  O 1  O 2  O 3  O 4

This means that people could select the wrong option as, for example, the radio button for '2' is approximately equidistant between the labels '1' and' 2'.  I have tried adding trailing spaces when I enter the option labels to increase the distance between the end of one label and the radio button for the next, but CiviCRM ignores these.

Suggestions I have for improving the layout include
  • having all but the first radio button on each line preceded by, say, 5 spaces
  • having the options presented in a table

I am not very experienced at this but to me both suggestions seem to have problems.
Re suggestion 1 - I think getting more than one space to appear conisistently is not easy.
Re suggestion 2 -  For each price field the code would need to calculate the number of rows for the table using the number of options per line and the total number of price options and also calculate the width of each column using the number of options per line and the total available width.  This sounds rather complicated.

I suppose another alternative to help achieve suggestion 2 might be to have the Price field set up altered so that  'Options per line' was replaced by, say:
'Table size for displaying options  columns???   Rows??? '.

I was wondering if anyone else finds the layout poor when displaying more than one price option per line?

Also, if someone with more technical expertise than me could comment on the feasibility of my suggestions for a solution I would really appreciate it. 

I would be paying a developer to do the work, but would just like to know if anything I have suggested would work.


Thanks in advance.   JoAnne





 
 

Dave Greenberg

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 5760
  • Karma: 226
    • My CiviCRM Blog
Re: Layout for price fields.
May 25, 2011, 05:40:24 pm
You might experiment with using CSS to add spacing between the input (radio button) fields. I did a quick experiment with:
 
div#priceset input[type=radio] {
margin-left: 20px;
}

... which spaced things out pretty nicely.

If that works well for you, we can consider just adding that to the default civicrm.css
Please attach some before and after screenshots if possible so we can see how it shapes up.
Protect your investment in CiviCRM by  becoming a Member!

Pages: [1]
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Discussion (deprecated) »
  • Feature Requests and Suggestions »
  • Usability Improvements (Moderator: Dave Greenberg) »
  • Layout for price fields.

This forum was archived on 2017-11-26.