-
hasseltdelangemanAsked on October 17, 2021 at 11:52 AM
-
VincentJayReplied on October 17, 2021 at 11:54 AM
Hello,
I created a screencast guide below that you can follow and check. You just need to update one line in the custom CSS code window of the widget.
Change the "absolute" to "relative"
-
hasseltdelangemanReplied on October 17, 2021 at 3:21 PM
Hello Vincent,
thanks for your reply, but when I do this ,then my text isn't longer aligned to the left side. Each line of text has to start at the same position, It was correct before you modification. My only remaining problem was the red dot which was not at he end of the text. The rest of the text has to stay like it was. Only the red star has to move.
-
Collin_SReplied on October 17, 2021 at 3:46 PM
Hi,
I have taken a look at your form and see that you have fixed the problem you were referring to. I just want to make sure that that is in fact the case.
Please let us know if you require any further assistance.
Have an amazing day. -
hasseltdelangemanReplied on October 18, 2021 at 6:30 AM
Hello Collin,
the problem isn't fixed. Look to the position of the red star. It has to be placed behind "Privacyverklaring". All the rest as to stay the same.
Kind regards.
Daniel -
Ivaylo JotForm SupportReplied on October 18, 2021 at 7:11 AM
I checked your form. The red star is after "Privacyverklaring".
What do you mean by "behind "Privacyverklaring""? Do you mean the red star to be before "Privacyverklaring"?
We will wait for your response.
-
hasseltdelangemanReplied on October 18, 2021 at 7:56 AM
Hello IvayloK,
when I look to the preview from this form (https://form.jotform.com/212884755280362) in Microsoft edge or Google Chrome you will see that the red star is just on top of the letter "v" on the first line
-
hasseltdelangemanReplied on October 18, 2021 at 8:36 AM
Hello Support Team,
on a smartphone I detected another error. I want to put the function "Versturen " a little bit lower because there is a horizontal line crossing my text:
-
Sam_GReplied on October 18, 2021 at 9:29 AM
Hello Hasseltdelangeman,
Kindly add this CSS code on the Terms and Widget.
.required {
color: red;
content: "*";
float: right;
margin-bottom: -20px;
position: relative;
right: -550px;
}
Kindly add these on the form designer CSS:
@media screen and (max-width: 480px)
.jf-form-buttons.submit-button {
min-width: 100px;
margin-top: 60px;
}
.page-section li[data-type=control_button] {
padding: 0;
margin: 0;
background-color: transparent;
margin-top: 63px;
}
I hope this helps.
-
hasseltdelangemanReplied on October 18, 2021 at 9:57 AM
Hello Sam,
I'm so happy that the form is for 99% OK now with the code you sent me. It is perfect for PC and tablet but on the smartphones the red dot disappeared. When you could solve this last issue it would be perfect. All our future forms will be based on this form. That is the reason I put so much effort to get it perfect.
Kind regards.
Daniel -
Michal_S Jotform SupportReplied on October 18, 2021 at 10:51 AM
Hello!
Please try inserting the following CSS code in addition to my colleagues' code:
@media (max-width:300px){
.required{
right: -190px;
}
}
This should make the required mark appear properly on mobile.
Let us know if you require any further assistance,
Thank you!
-
hasseltdelangemanReplied on October 18, 2021 at 11:56 AM
Hello Michael,
I did what you asked me but I don't have the result I expected. Can you make a copy of this formular and send me a clone which is working. I executed everytime what the support team advised me but each time I have another result. It comes closer and closer to the final results but I'm still not there. When this would be fixed I can use for the coming years because I need these fields everytime. The link is
The Easiest Online Form Builder (jotform.com)
Preview link: https://form.jotform.com/212904458314353
The result I have now looks like this:
-
Tommi_NReplied on October 18, 2021 at 1:03 PM
@media (max-width:480px){
.required{
right: -190px;
}
}
Seems like guided max width was too low for mobile, change it to 480px.
-
hasseltdelangemanReplied on October 18, 2021 at 3:18 PM
Hello Tommi,
it doesn't work. I think that this problem can't be solved:
-
VincentJayReplied on October 18, 2021 at 4:45 PM
Hello,
Please check this cloned form: https://form.jotform.com/212906565093964
Would that work for you? If yes, is it okay if we add the custom CSS code to your form?
@media (max-width:480px){
.required{
right: -190px !important;
}
}
Here's what it looks like when I use the Preview mode:
-
hasseltdelangemanReplied on October 19, 2021 at 4:14 AM
Hello Vincent,
this is what I get when I use your link on my Iphone 13 Pro: you are very close to a total solution. That would be wonderful.
-
Zahra_SReplied on October 22, 2021 at 4:28 AM
Hi there,
Please check this demo form on your mobile and see if it works for you: https://form.jotform.com/212941791536966.
This is how it is showing on my end:
If it works, then please update the widget CSS to this one:
@media (max-width:480px){
.required{
right: -450% !important;
}
}
I use the percentage to make it responsive. I hope it works for you.
-
hasseltdelangemanReplied on October 26, 2021 at 5:21 AM
Hello Zahra,
thanks for your help but I have to confirm that the result on my IPhone 13 Pro is different. Idon't see the 2 red stars. You can close the case now because it took already to much time to try to fix this problem and I took the decision to use the form like it is today. I understand that it isn't so easy to get the same view on the different devices. We have to live with it, which I can at the moment.
Many thanks for all what you did.
Kind regards.
Daniel