Can I add a text field on the right side of the title of my configurable list?

  • Navassa
    Asked on March 14, 2015 at 8:51 PM
    Now one more item ( :) )

    Form:  Final 531926   (form in this thread) as displayed couple screens above.

     

    Is it possible to get ONE DYNAMIC CELL located  to the right of the words "ENTER Log Data" 

    The cell, if possible, needs to be able to accommodate combo text and numbers --  10 characters wide.

    It also needs to be a REQUIRED  field

     Thanks again,  Randy

  • Ben
    Replied on March 15, 2015 at 12:33 AM

    I believe that this is the jotform Randy: http://www.jotform.us/form/50723991844160 ?

    If so are you trying to move the configurable list widget to be displayed on the right instead of being under the Enter Log Data text?

    If so, you should usually click on the widget once in the form builder and then click on Align left option.

    Now I say usually since it is already aligned to the left, but not shown on the left of it because the widget is occupying more space, so it goes to the new line instead, but we could help you with some CSS code that would bring them in the same line - if that is what you are after?

  • Navassa
    Replied on March 15, 2015 at 12:43 AM

    Hello again BEN.

    No....everything on the form is perfect....just need one final addition.

    I just need a stand alone Box/Cell for the customer to type in his ID ... if we place somewhere else on the page other than my suggestion, then we need to label it  ENTER CALLSIGN  

    The perfect place and associated with the data is to have that cell to the right of the TEXTon top of the grid (ENTER LOG DATA) or use that box somehow(???).   However, it does not absolutely have to be located there...we could place it  at the bottom of the form prior to submit...whatever works.   Has to be REQUIRED item though.     In a way it is a Form within a Form....so, maybe that's out of possibility and we have to think differently on this......need your help.  Thanks again.

    randy

  • Ben
    Replied on March 15, 2015 at 1:55 AM

    You can add any field above or under it by selecting it from the left. Now I presume that you want it right above of the Configurable List, like it is here: http://form.jotformpro.com/form/50731580827962

    If that is correct Randy, then to do that all you need is to add a text box right above the Configurable List widget and apply the following CSS code:

    #id_4 > label {
        display: none;
    }
    #id_4, #id_4 > div {
        float: right;
        margin-bottom: -30px;
        margin-right: 35px;
    }

    Now #id_4 might change, but the rest of the code would remain the same. To see which ID you need I would recommend taking a look at this guide: How to find Field IDs & Names

    Once you take a look, all you need is to replace the number 4 with the number shown to you within the ID field after following the guide above.

    You can see here how to apply the CSS above (once you have added the field and if needed, adjusted the ID): Inject Custom CSS Codes

    You can also just clone the jotform to your account by following the steps here: How to Clone an Existing Form from a URL

    Do let us know Randy if that is what you were after.

  • Navassa
    Replied on March 15, 2015 at 8:55 AM

    What you show is the idea;   That bOX/cell is okay to be there.   I have to be able to TYPE directly in it and it has to be a REQUIRED field.

    I have tired to figure out how to implement and add CSS code per your info above and have not yet been successful.  ??

    Also there need to be a Label on top or to immediate left of the box as follows:   ENTER YOUR CALL

  • Ben
    Replied on March 15, 2015 at 4:36 PM

    I have just set it as a required field for you on my jotform above: http://form.jotformpro.com/form/50731580827962

    If you clone it to your account it will be set for you.

    I have to be able to TYPE directly in it and it has to be a REQUIRED field.

    Basically when you add a field and you want to set it as required, you should click on it and in the toolbar there will be an option called Required. Clicking on it would switch (turn on or off) the current value.

    I see now that it is not possible to fill it out, so I would change my CSS to this instead:

    #id_4, #id_4 > div {
        float: right;
        margin-bottom: -30px;
        margin-right: 35px;
        z-index: 2;
    }
    #id_4.form-line-active, #id_4.form-line-error {
        background: none transparent;
    }

    I have tired to figure out how to implement and add CSS code per your info above and have not yet been successful.  ??

    Lets try to do it through the steps then.

    1. Add a textbox right above the Configurable List widget.

    Can I add a text field on the right side of the title of my configurable list? Image 1 Screenshot 30

    2. double click on title to change it to "ENTER YOUR CALL"

    3. Set as required

    Tip: You can use Label Align button left of the Required button to set the label to show where you want it.

    Now as mentioned in the guide above, we get its ID:

    Click on the little gear wheel icon on the right -> Show Properties and scroll down.

    Can I add a text field on the right side of the title of my configurable list? Image 2 Screenshot 41

    Now we can see #input_4 being set under the ID field. What we need here is the number 4 only.

    It can be any other number, but no matter what number it is we remember it and then construct the rule as so:

    #id_{number goes here}

    since we have 4 it means that our rule will look like #id_4.

    Knowing this we apply the following CSS:

    #id_4, #id_4 > div {
        float: right;
        margin-bottom: -30px;
        margin-right: 35px;
        z-index: 2;
    }
    #id_4.form-line-active, #id_4.form-line-error {
        background: none transparent;
    }

    All numbers in bold are the ones that we would need to change as shown above.

    Once we add the CSS code by following these steps: Inject Custom CSS Codes

    The jotform will look like this: http://form.jotformpro.com/form/50731580827962

    Do let us know if you have any further questions and we would be happy to assist.

  • Navassa
    Replied on March 15, 2015 at 7:57 PM

    I am sorry Ben....I am very poor at this and maybe bit off too much.

    I cannot make this work.   I imported your work into MY Forms.   but the Box want to hide behind the main form and I can't get it position nor stable

  • Navassa
    Replied on March 15, 2015 at 11:35 PM

    okay BEN....it appears that I have worked my way through this.   All seems to be working just fine and published to WEB.   Looks good and functions as designed.   Thank you for your assistance and the other folks along the line also.   Much appreciated.

     

    randy

  • Welvin Support Team Lead
    Replied on March 16, 2015 at 3:47 AM

    Hi Randy,

    In behalf of my colleague, you are most welcome. If you require any further assistance, feel free to contact us again.

    Thank you and have a great day!