In the breadcrumbs widget - add text below the numbers - css wont work

  • Migrative
    Asked on February 1, 2021 at 5:28 PM

    I have tried to inject the css code to display the page names of the form, I have followed the instructions but it does not work.

    Im using this code:


    li#form-tab-1:before {

    content: "Vamos a empezar";

    text-align: right;

    position: absolute;

    }


    Can you help me.

    Thanks in advance.

    Jotform Thread 2865442 Screenshot
  • Ashwin JotForm Support
    Replied on February 1, 2021 at 11:27 PM

    Do you want to display text below the numbers? Please inject the following custom CSS code in your widget and see if that solves your problem:

    .se-desc {

      width: 100px !important;

    }

    #form-tab-1 > div > div.se-desc:after {

      content: 'Vamos a empezar';

      font-size: 9px;

      word-break: break-word !important;

    }

    #form-tab-2 > div > div.se-desc:after {

     content: 'Vamos a empezar';

     font-size: 9px;

     word-break: break-word !important;

    }

    Please change the "#form-tab-2" to "#form-tab-3" and so on for the rest of your pages. Hope this helps.

    Do get back to us if you have any questions.


  • Ashwin JotForm Support
    Replied on February 2, 2021 at 12:44 AM

    I have already shared custom CSS code for your widget. Please try it out and get back to us if you have any questions.

    We will wait for your response.

  • Migrative
    Replied on February 2, 2021 at 10:34 AM

    Thank for the support, but after apply the css code in the widget, update and nothing happen. Still no names show below number of Breadcrumber progress bar.

    Are there any other settings that I should apply? I remain attentive to your indications.

    Thanks again.


  • Ashwin JotForm Support
    Replied on February 2, 2021 at 12:45 PM

    I am sorry for the trouble caused to you. It seems the custom CSS injected in widget is not working but when I injected the code to form, it works as expected. Let us fix your issue first, and then we will escalate it to our backend team. I injected the following custom CSS code in form:

    .se-desc {

      width: 90px !important;

      margin-left: -2px;

      white-space: break-spaces !important;

    }

    #form-tab-1 > div > div.se-desc:after {

     content: 'Vamos a empezar';

      font-size: 9px;

      word-break: break-word !important;

    }

    #form-tab-2 > div > div.se-desc:after {

     content: 'Vamos a empezar';

      font-size: 9px;

      word-break: break-word !important;

    }

    This is how the form is being displayed:

    1612287714 60198ee25e4a1 injectCss Screenshot 10

    I did check your form, and it seems you tried to change the font size to 30px. Please note that the widget has very limited width space for description.

    Please take a look at the following cloned form and see if it works as expected: https://form.jotform.com/210324539932959

    Hope this helps.

    Do get back to us if you have any questions.

  • Migrative
    Replied on February 2, 2021 at 1:14 PM

    Thank you very much, it works.

    Excellent technical support, fast and accurate.