How do I position my fields side by side?

  • baiversen
    Asked on April 28, 2017 at 5:54 AM

    As you can see on the image the size of the box do not expand to fit the Choose Option field. The result is that the first field cover the calculation field.

    You choose a product and the price for product is shown in calculation field.

    How do I position my fields side by side? Image 1 Screenshot 20

    Best regards

    Bjørn Arve Iversen

    Zoft Zircus

  • Nik_C
    Replied on April 28, 2017 at 6:31 AM

    You can insert the below CSS code in your Custom CSS field:

    select#input_15 {

        width: 323px!important;

    }

    input#input_33 {

        margin-left: 125px;

    }

    label#label_33 {

        margin-left: 125px;

    }

    It should look like this:

    How do I position my fields side by side? Image 1 Screenshot 20

    Hope it helps.

    Let us know if you have any further questions.

    Thank you!

  • baiversen
    Replied on April 28, 2017 at 7:38 AM

    Thanks a lot

    That works just fine. I have further questions — of cause — but I will try myself before I bother you.

    Bjørn Arve

  • baiversen
    Replied on May 5, 2017 at 8:43 AM
    Hi
    I have two more questions.
    I think the field length is fine now, but only if I use the mouse on the left side of the selection box (covered by the yellow box). Green arrow.
    If I click th right side — red arrow — theres no list and no selection.
    Is it possible to make the selection list bigger? I want it match the size of the amount fields.
    I go on holiday for a week now so it is no hurry… :-)
    Best regards
    Bjørn Arve
    __________________________
    Bjørn Arve Iversen
    Zoft Zircus
    E-mail: baiversen@zoftzircus.no
    Mobile phone: (+47) 467 48 525
    Båsløkka 44
    N - 3144 Veierland
    Norway
    www.zoftzircus.no
    __________________________
    ...
  • Mike
    Replied on May 5, 2017 at 10:22 AM

    You may try an alternative CSS instead of the current one.

    [data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide {
    width: 100%;
    }

    It should fix the dropdowns.

  • baiversen
    Replied on May 19, 2017 at 10:13 AM

    Thank you — This work as wanted.