Form Tabs and Breadcrumb Widgets are having style conflicts

  • Profile Image
    jasc3
    Asked on August 08, 2017 at 06:05 PM

    Please note that I have already inserted the Form Tabs widget, and labeled them. However the labels don't look like tabs. The labels look like clickable text in the preview of the form. I had expected to see actual tabs similar to what is shown in the widget image. How do I fix this?

  • Profile Image
    Mike
    Answered on August 08, 2017 at 08:49 PM

    The current navigation on your form is actually related to the Breadcrumbs Widget, please remove it from the form to get the form tabs.

    If you need any further assistance, please let us know.

  • Profile Image
    jasc3
    Answered on August 08, 2017 at 09:43 PM
    Actually I have both the form tab and the breadcrumb widget in my form so this response does not help. My issue with the tabs not showing still remains. Please help!
    Get Outlook for iOS
    ________________________________
    ...
  • Profile Image
    EltonCris
    Answered on August 08, 2017 at 11:29 PM

    Did you remove the form tabs widget in your form? I could not find it as of this writing.

    Anyways, it seems the breadcrumb style conflicts with the form tabs style that's why it was not working.

    To fix it, inject the following CSS codes to your form.

    .tabs-list li.current {background: #fff !important; z-index: 3 !important; } .tabs-list li {padding: 3px 27px; color: #656565; height: 22px; background: #ebebeb !important; border-top: 1px solid #EBEBEB ; text-align: center; font-size: 14px; line-height: 23px; display: inline-block; margin: 0 1px!important; position: relative; z-index: 2; cursor: pointer; } .liBefore, .liAfter {display: none !important; } .tabs-list {margin: 0 !important; }

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

    This should give you the following styles on the form tabs as an example.

    I've also escalated this to our developer so they can fix the issue.

  • Profile Image
    jasc3
    Answered on August 09, 2017 at 09:43 AM
    Yes I did remove the form tabs. Since it seemed I had to pick one, I preferred the breadcrumb widget for this survey. Thanks for the CSS code I'll give it a try!
    Get Outlook for iOS
    ________________________________
    ...
  • Profile Image
    Kiran
    Answered on August 09, 2017 at 11:43 AM

    I see that the issue is now forwarded to our backend team to investigate further. If we have any news in this regard, we'll update you here. Please inject the CSS code provided by our colleague and let us know if you need any further assistance. 

    Thank you!