Form Tabs and Breadcrumb Widgets are having style conflicts

  • jasc3
    Asked on August 8, 2017 at 6: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?

  • Mike
    Replied on August 8, 2017 at 8: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.

    Form Tabs and Breadcrumb Widgets are having style conflicts Image 1 Screenshot 20

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

  • jasc3
    Replied on August 8, 2017 at 9: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
    ________________________________
    ...
  • Elton Support Team Lead
    Replied on August 8, 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.

    Form Tabs and Breadcrumb Widgets are having style conflicts Image 1 Screenshot 20

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

  • jasc3
    Replied on August 9, 2017 at 9: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
    ________________________________
    ...
  • Kiran Support Team Lead
    Replied on August 9, 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! 

  • TitusNdoka JotForm Developer
    Replied on December 29, 2017 at 4:32 AM

    We've fixed the issue. The breadcrumbs widget and the form tabs widget will play nice. 

    Give it a try - let us know. 

    Happy Holidays!