Changing Multiple Choice Styling in Advanced Designer

  • Profile Image
    CrispCuts
    Asked on January 31, 2021 at 10:38 PM

    Hi, I added a facebook comments widget to my form, then tested it out on my iphone 8 safari (latest iOS). The widget displays but the comments are merged with the rest of the form. It is as if the form is acting like the comments aren't there in terms of not leaving space for them

  • Profile Image
    Vanessa_T
    Answered on February 01, 2021 at 01:51 AM

    Kindly add the CSS below to fix the widget's display issue:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
     .facebook-comments-widget {
      height: auto !important;
     }
    }

    Guide: How-to-Inject-Custom-CSS-Codes

  • Profile Image
    CrispCuts
    Answered on February 01, 2021 at 02:31 AM

    That worked but now my screen is wobbly on mobile (it was fixed before) and also the radio buttons have gone smaller?



    1612164604_6017adfc93aaf_144668164_44614

  • Profile Image
    sylas
    Answered on February 01, 2021 at 04:30 AM

    Hi CrispCuts,

    I'm working on this issue. You'll be notified as soon as I'm done. Thank you for your patience.

    Do not hesitate to contact us if you have any further questions.

  • Profile Image
    sylas
    Answered on February 01, 2021 at 04:42 AM

    Hi CrispCuts,

    That worked but now my screen is wobbly on mobile (it was fixed before)

    I checked your form, which is on your website, on the Safari browser (iPhone 8, v13). However, I was not able to replicate any issues. Facebook comment widget and the section "Car Washes and Valeting" seems to fit phone screen perfectly as you can see below:

    1612172350_6017cc3e7b2ab_issue_not_found

    Could you please give it one more try and let us know if the issue persists? Looking forward to hearing from you.

    also the radio buttons have gone smaller?

    Could you please add this code below using the guide my colleague shared above? You can play with the scale value (1.5, 2.5 etc.).

    .form-checkbox { 

     transform: scale(2); 

    }

    Do not hesitate to contact us if you have any further questions.

  • Profile Image
    CrispCuts
    Answered on February 03, 2021 at 01:27 AM

    Hi

    I tried adding that code and all it did was make the radio buttons larger, but still not the style they were before I added the original code suggested by Vanessa. Also, the screen on my iPhone is still not fixed like it was before. So i have removed your bit of code, but have kept Vanessa's there.

    To show you how the style and fixed screen should be, please see my other form:

    The Bracknell Directory - Home & Garden (jotformeu.com)

    The Bracknell Directory (jotformeu.com)


    P.S. When I originally created my forms, I asked Jotform Support for some code to fix the forms so they don't wobble at all. It may be possible that Vanessa's code undid this?


    1612333589_601a4215306e9_ss2.jpg

  • Profile Image
    Vanessa_T
    Answered on February 03, 2021 at 02:50 AM

    Thank you for providing the links. I now see that you are referring to the "toggle button" display. I remember your form indeed used to have this toggle.

    1612338581_601a5595e3765_02970.jpg

    The code I have provided was specifically only for Facebook Comments widget which should not affect that toggle button.

    Please allow me some time to carefully check your form if there were other changes or any conflicts that caused the issue.

    Will get back to you afterwards.

  • Profile Image
    Vanessa_T
    Answered on February 03, 2021 at 03:09 AM

    Kindly open the Advanced Designer page and click on the Multiple Choice field.

    https://www.jotform.com/help/935-how-to-access-the-advanced-designer

    Within the right panel, change the button template to your previous toggle design. You can make other changes in here depending on what you want. Once done, kindly make sure to click on the Save icon on the left side.

    1612339668_601a59d43850a_a.gif


  • Profile Image
    CrispCuts
    Answered on February 03, 2021 at 04:54 AM

    Thanks. When I changed it back to the big toggles my page became fixed again on mobile.

    I noticed whenever I open Advanced Designer it automatically changes my toggles back to small and green! Is this a bug?

    Final question.... With the Facebook comments widget is there any way to remove individual comments from displaying on my form? Or for the owner of the facebook page they are commenting on? I did some test comments but can't see those comments copied across onto the facebook page anywhere. They only display on the form
  • Profile Image
    sylas
    Answered on February 03, 2021 at 06:29 AM

    Hi CrispCuts,

    I noticed whenever I open Advanced Designer it automatically changes my toggles back to small and green! Is this a bug?

    I cloned and tested your form on Chrome and Firefox browsers. However, I was not able to replicate any issues. The styling you've applied did not change automatically once I opened the Advanced Designer page. Kindly see the screencast below:

    1612350973_601a85fdb040a_toggle_test.gif

    Could you please provide us with more information about the issue so that we can assist you better? On which browser did you encountered it? Did you make any changes (except for the toggles) in Advanced Designer, which triggered toggle styling? Looking forward to hearing from you.

    Your second question about Facebook comments has been moved to another thread so as to avoid confusion, which is accessible via this link. I'll be answering your question shortly:

    https://www.jotform.com/answers/2870441-Final-question-With-the-Facebook-comments-widget-is-there-any-way-to-remove-individual-comments-from-displaying-on-my-form-Or-for-the-owner-of-th

    Do not hesitate to contact us if you have any further questions.