Is it possible to populate all drop down values from one field in the another drop down field having blank values?

  • deviharesh
    Asked on July 22, 2020 at 1:13 AM

    Under Update / Calculate Field option, is it possible to populate all drop down values from one field in the another drop down field having blank values?

  • Ashwin JotForm Support
    Replied on July 22, 2020 at 5:03 AM

    Yes it is possible to achieve your requirement by taking advantage of conditions feature. Please check the screenshot below:

    1595408556passDDValue Screenshot 10

    Hope this helps.

    Do try it out and get back to us if you have any questions. 

  • Ashwin JotForm Support
    Replied on July 22, 2020 at 5:06 AM

    Please accept my apology as I overlooked the other part of your question. It seems you want to populate the value in a blank dropdown field. 

    Please note that it is not possible to dynamically add options in dropdown field conditionally. If you have same option in second dropdown field, then you can add condition to populate it based on the selection in another dropdown field. 

  • deviharesh
    Replied on July 22, 2020 at 5:23 AM

    Hi Ashwin,

    No issues.  Here is the scenario and I'm trying to find a way to achieve the solution.

    We have 10 buildings and have different number of flats in each one of them.  So I have one drop down for buildings from A to J and based on buildings selection values in second drop down need to be changed.

    There seems to be a option "Dynamic Dropdowns" under Widgets. However, layout wise it is less user friendly to change shape of the drop down, font etc.  Also, if you make some changes in the drop down option, then drop down doesn't work as expected. e.g. when you select any value from the drop down, then drop down should be collapsed.  However, it remains expanded, until you click on the drop down button again. 

     answers Screenshot 10

  • Ashwin JotForm Support
    Replied on July 22, 2020 at 6:50 AM

    The best way to achieve your requirement is by adding multiple dropdown field in your form. Here are the steps you need to follow:

    #1. Add one dropdown field to list building A to J.

    #2. Add another Dropdown field to list the flat numbers. That means one separate drop field for each building. 

    #3. You can then add condition in form to show hide the respective dropdown field based on user's answer in building dropdown selection. 

    Hope this helps.

    Do get back to us if you have any questions. 

  • deviharesh
    Replied on July 22, 2020 at 7:06 AM

    Yes, I did that and it was successful.  However, there are many members having multiple flats in the society, so there was no point in increasing the number of fields for each building multiplied by number of multiple flats per member.  So I used Dynamic drop down, with modification in the drop down values.  Layout, font size etc. is still a concern.


    Thanks anyway to your response.  I would like to talk to you over the phone, if you can please spare few minutes and if you are in India.  I can call you, if you can share your number.

  • Basil JotForm Support
    Replied on July 22, 2020 at 9:05 AM

    Hi,

    Unfortunately, we do not provide support over the phone. Please provide us with the issues that you are currently facing and we will assist you on how to fix them.

    Looking forward to your reply.

  • deviharesh
    Replied on July 23, 2020 at 9:35 AM

    Hi Team,


    I have below questions and need your help -

    I'm using Dynamic Dropdown from widget.  Please look at the attached screenshot.  Here, I have two issues.


    a)  How to change the height and width of this "Dynamic Dropdown" and font size.

    b)  The second drop down that appears one another below, how can we arrange it next to each other?  E.g. First user will select Building number and then flat number next to it.

    I'm not a technical person to write any code in CSS.  But a question is, can we have a way to allow users update these properties within respective widget items ?  So, user will be able to change height, width, font, color, values, arrangement etc.  User also should be able to use fields from respective widget items in the conditions.  Currently, it seems we cannot use fields from widget items in the condition.  If it is possible, please let me know.


    1595510693DynamicDropdownSize Screenshot 10

  • Jovanne JotForm Support
    Replied on July 23, 2020 at 10:58 AM

    Hi,

    Please allow us some time to conduct tests and work for a workaround to your concern. We will get back to you as soon as we can come up with a solution.

    Thank you for your patience.

  • Jovanne JotForm Support
    Replied on July 23, 2020 at 11:14 AM

    Hi,

    You can change the width and height of the dropdown by changing the values of the fields in the dropdown settings:

    Is it possible to populate all drop down values from one field in the another drop down field having blank values? Image 10

    As for changing the font-size and making the dropdowns appear in the same line, kindly insert this CSS code to the widget's custom CSS code:

    #dropdownsContainer {

        width: 400px;

        display: flex; }


    span.select2-selection.select2-selection--single {

        font-size: 18px !important; }

    15955171609b Screenshot 21


    Sample output:

    15955172529c Screenshot 32


    Please give it a try and let us know if this works for you.

  • deviharesh
    Replied on July 23, 2020 at 1:07 PM

    Hi Team,

     

    Thanks for your response -

    a) Currently, for blank, value is set to "Please Select".  How can I set it to only "Select" in the existing code that you have given ?  Also, I need to update font (and not only font size)

     

    b) Width of both the drop down need to set separately.

     

    c) In this Dynamic Dropdown, i have set value from 1 to 17.  When I select the number from the drop down, 1 and 1 (from 10), comes under each other.  If I try putting 01 instead of only 1, then values from 01 to 09 doesn't get selected.  If it is considered as a text, then is there a way to right align drop down values of SECOND DROP DOWN only ?

     

     

  • Basil JotForm Support
    Replied on July 23, 2020 at 2:39 PM

    Hi, 

    Please allow some time while we try to make a workaround for your concern.

    Thank you.

  • Basil JotForm Support
    Replied on July 23, 2020 at 2:54 PM

    Hi,

    Thank you for your patience.

    a) You can add the following CSS code into your widget to change the placeholder text to "Select":

    .select2-selection__placeholder{

    color: #fff !important;

    font-size: 6px !important; 

    }

    .select2-selection__placeholder:before{

    content: 'Select';

    color: #999;

    font-size: 15px !important; 

    }

    b) How would you like the boxes to look like? 

    c) I was unable to find a way to right-align the second dropdown box only.


  • deviharesh
    Replied on July 24, 2020 at 6:10 AM

    Hi Team,

    The output given by your team member, Jovanne_A, was the expected one i.e. in horizontal form.  The only issue I had was about defining font, font size, drop down box height and width.  Now after getting above code, drop down is appearing on second line.

    Note: For the Dynamic Dropdown I have used, I'm looking at the output like the drop down shown in below screenshot, so that, all the drop downs are similar in the form.

     1595586254Expected DropdownBorder Screenshot 10

  • Bojan Support Team Lead
    Replied on July 24, 2020 at 8:38 AM

    I was able to add some custom CSS, so the dropdown looks like this:

    Is it possible to populate all drop down values from one field in the another drop down field having blank values? Image 1 Screenshot 20

    To achieve this, you first need to add the following CSS to the form style:

    #customFieldFrame_101 {
      min-width: 100%;
    }

    Please note that this is not added to the widget CSS. This is injected into the form CSS. You can click here to see how to inject this.

    Then, add the following CSS directly to the widget CSS:

    #dropdownsContainer {
    height: 80 px;
     width: 100%;
     display: flex;
    }

    .select2-container {
      margin-right: 10px !important;
        width: 100px !important;
    }

    .select2-selection--single {
      border-radius: 0 !important;
        border: 1px solid black !important;
        font-size: 13px !important;
        height: 2px !important;
        height: 22px !important;

    }

    .select2-selection__rendered  {
        padding: 0px 5px !important;
        padding-bottom: 10px !important;
        height: 100%;

    }

    .select2-selection__arrow {
        height: 100%!important;   
    padding-right: 0px!important;
    }

    .select2-selection__arrow b{
      visibility: hidden;
    }

    .select2-selection__arrow{
      right: -6px !important;
    }

    .select2-selection__arrow:after {
      content: '';
      border: solid black;
      border-width: 0 1px 1px 0;
      display: inline-block;
      padding: 3px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }

    Let us know if this solution will work for you.

  • deviharesh
    Replied on July 24, 2020 at 10:32 AM

    Dear Bojan,

    Thanks, it worked.  However, request for two small things.

    a)  "Please select" word is still there instead of "Select".  We are using "Select", for all the drop downs.


    b) Alignment of any value in the drop down e.g. "Please select" / "Select" or any value, need to be corrected i.e. either middle or top.  Currently, part of the value is cut from the bottom.


  • Bojan Support Team Lead
    Replied on July 24, 2020 at 11:44 AM

    To resolve these problems, please add the following CSS directly to the widget:

    .select2-selection__placeholder:before{
      content: 'Select';
      color: black;
    }
    .select2-selection__rendered {
      position: absolute;
      top: -2px;
    }
    .select2-selection__placeholder{
      color: white !important;
    }

    Please make sure you add this CSS next to the current one, at the end.

    Let us know if this resolved your problem.