Home Forums Plugin Support WP User Frontend Pro Two custom fields on the same line

This topic is: not resolved

This topic contains 15 replies, has 4 voices, and was last updated by  Sekander Badsha 4 years, 10 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #21513

    John
    Member
    Post count: 63

    Is it possible to place the submitted content of two (or more) custom fields on the same line?

    So, for example, Field A “Date_of_Birth” and Field B “Country_of_Birth” can be displayed on the posted page as a single line: Born 12/11/1966 in Australia.

    #21645

    John
    Member
    Post count: 63

    Any comment?

    #21709

    Sk
    Moderator
    Post count: 371

    Hello John,

    sorry for late response.
    And the answer of your question is YES. Yes it possible to place the submitted content of two (or more) custom fields on the same line. when you add custom fields then you could also add css class for the field. every field shows by lists. Your defined css class added with the list element like <li class="your-class">custom field</li>. so you could show the fields in line by write some css for the class.

    thank you.

    #23072

    John
    Member
    Post count: 63

    Sorry for my even later reply…

    I'm a bit stumped – when I put my class into the field it shows up in the form but not in the submitted post.

    #23191

    Sk
    Moderator
    Post count: 371

    Hello John,

    The front end view of data depends on the theme you using. If you want to change the style please hire a developer.

    Thank you

    #23381

    John
    Member
    Post count: 63

    Yes it possible to place the submitted content of two (or more) custom fields on the same line.

    This topic is marked Resolved, but I don't think this is correct.

    Editting the style sheet of my theme would only work if Frontend User lets me apply unique classes to the submitted fields in the front end view.

    All fields are <div class="entry-content"><ul class="wpuf_customs"><li> – so any CSS I use will affect them all.

    #23401

    Sekander Badsha
    Member
    Post count: 2067

    Hello John,
    If you want to style one single element but all the elements have same class, in that case you may use CSS pseudo-class. Here you can see a detailed documentation about pseudo-class: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

    #23628

    John
    Member
    Post count: 63

    Thank you for the suggestion.

    I tried:
    .wpuf_customs li:nth-child(4n + 2), .wpuf_customs li:nth-child(4n + 3) {display:inline;}

    Unfortunately this doesn't work because I don't know in advance how many fields will be submitted by the form. Some fields are not required and more than one image field can be submitted, for example.

    #23695

    Sekander Badsha
    Member
    Post count: 2067

    Make the form first and then apply the CSS. In that way it should work.

    #23726

    John
    Member
    Post count: 63

    I'm sorry, I don't understand. I did make the form first but I can't see how to apply CSS to the content of the submitted fields because they don't have unique classes and the :nth-child pseudo-class approach requires that I know how many fields will actually be submitted. This, as I said, will vary from one post to the next.

    #23811

    Sekander Badsha
    Member
    Post count: 2067

    A developer would understand your requirements and would make the feature available for you. Please hire a developer.

    #23904

    John
    Member
    Post count: 63

    I don't believe it is possible for a developer to do this without rewriting code in wpuf-functions.php.
    As coded, there is no way to individually style the output of custom fields. Using nth-child pseudo-class, as you suggested, is the nearest, but for the reasons I gave, it is inadequate.

    By adding classes to wpuf-functions.php, such as <li class="imagefield"> and <li class="textfield"> it is at least possible to separately style those elements. However, the custom text fields simply cannot be individually styled unless the number of fields submitted by the forms is forced to remain the same by making them all ‘Required'.

    In my view this issue is not resolved because it's a limitation inherent to Frontend Pro and should be addressed in a future release.

    #23944

    Sekander Badsha
    Member
    Post count: 2067

    Why you'd need to edit the wpuf-functions.php file ? we have given you fields to insert css classes in the form input fields. You can write whatever class you want to apply.

    #23945

    Mahi
    Member
    Post count: 1555

    Hello John,

    Sorry for inconvenience. Please follow these steps:

    1. When you create your form there is an option to insert every field's class name

    image:

    Insert different class names as necessary.

    2. Now open your theme style.css file and apply css accordingly.

    you have to know css very well.

    example: http://jsfiddle.net/VQrYD/1/

    #23989

    John
    Member
    Post count: 63

    I'm afraid this thread has gone full circle and you've given me the same answer Sk_Shaikat gave me at the start to a question I didn't ask.

    I am not trying to style the fields in the form. I can see that is easy.
    I am trying to style the submitted content of those fields in the front end view.

    Because these are all generated by the same bit of code in wpuf-functions.php, every submitted text field has the same class, so they cannot be individually styled.

Viewing 15 posts - 1 through 15 (of 16 total)

The topic ‘Two custom fields on the same line’ is closed to new replies.