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

  • Profile Image
    Migrative
    Asked on February 01, 2021 at 05: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.

    Screenshot
  • Profile Image
    ashwin_d
    Answered on February 01, 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.


  • Profile Image
    ashwin_d
    Answered on February 02, 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.

  • Profile Image
    Migrative
    Answered on February 02, 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.


  • Profile Image
    ashwin_d
    Answered on February 02, 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.png

    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.

  • Profile Image
    Migrative
    Answered on February 02, 2021 at 01:14 PM

    Thank you very much, it works.

    Excellent technical support, fast and accurate.