-
MigrativeAsked 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.
-
Ashwin JotForm SupportReplied 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 SupportReplied 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.
-
MigrativeReplied 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 SupportReplied 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:
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.
-
MigrativeReplied on February 2, 2021 at 1:14 PM
Thank you very much, it works.
Excellent technical support, fast and accurate.