change width of wedding registry entry

  • Profile Image
    Program_Director
    Asked on February 18, 2021 at 05:40 PM

    howdy!

    i'm trying to build a form that limits responses to a certain question. it seems that this isn't a function you have built in, so i'm trying to utilize a widget to do this.

    the one that seems like it may work the best is the wedding registry one, however the width of the text entry is severely limited, and it overlaps with the availability information. is there any way to have all of the information easily legible?

    when i try to edit the "width," it ends up shrinking it severely to the point that the widget disappears altogether.

    any help in resolving this is helpful, even if it's utilizing a different widget altogether to accomplish this (although the inventory widget is even less efficient).

    thank you!

    Screenshot
  • Profile Image
    Vick_W
    Answered on February 18, 2021 at 11:11 PM

    Hi there,

    Please inject the following CSS code into your form.

    iframe#customFieldFrame_8{
      max-width: 100% !important;
        width: 100% !important;
    }
    iframe#customFieldFrame_11{
      max-width: 100% !important;
        width: 100% !important;
    }

    You can adjust the width to your liking by changing the percentage.

    You can find instructions in the guide below.

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here is a clone of your form:

    https://form.jotform.com/210488519801963

    You can also clone it using the guide below.

    https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url

    Let us know if you need further assistance.

    Thanks

  • Profile Image
    Program_Director
    Answered on February 26, 2021 at 04:30 PM

    this didn't work. all of my text is still being forced onto a segment of the screen instead of having full use of the space.1614375129_603968d915ac6_

  • Profile Image
    Program_Director
    Answered on February 26, 2021 at 06:42 PM

    again, i just want to show that you were able to make it work for the clone form, but *even when i copy and paste the css code from your form into an identical duplicate section* it still doesn't replicate the results. [included picture shows your section from the clone form, followed by the section i attempted to recreate using the same css code]

    i need to do this for five different sections, so any resolution would be greatly appreciated.

    thank you!1614382887_6039872759313_

  • Profile Image
    Vick_W
    Answered on February 26, 2021 at 09:43 PM

    Hi there,

    I've added the required CSS in your forms and now all the widgets have the full width in the following two forms.

    https://form.jotform.com/210267481212043

    https://www.jotform.com/form/210566811825153

    I've also created a short video to show you how you can find the iframe ID for all new widgets. You can simply copy-paste the code and change the iframe ID to change the width.1614393706_6039b16a48052_1test.gif

    Please check your forms now and let us know if you need further assistance.

    Thanks