Required field icon is not displaying properly

  • hasseltdelangeman
    Asked on October 17, 2021 at 11:52 AM

    A last small question: Why is the red star (indicating that this field is required to be filled in) from the first condition is at the end of the line and on the last condition it is on the beginning of the line. This is strange because I used the same function.

    Kind regards.
    Daniel

    1634485114 616c437a7f89e  Screenshot 10

  • VincentJay
    Replied 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"

    1634486041 616c4719b1c96 vab2s22 Screenshot 10

  • hasseltdelangeman
    Replied 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.


    1634498461 616c779db64f4  Screenshot 10

  • Collin_S
    Replied 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.

  • hasseltdelangeman
    Replied 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 Support
    Replied 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.

  • hasseltdelangeman
    Replied 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


    1634558202 616d60fa646a8  Screenshot 10

  • hasseltdelangeman
    Replied 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:


    1634560570 616d6a3a7019c  Screenshot 10

  • Sam_G
    Replied 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;

    1634563500 616d75ac61a5a  Screenshot 10

    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.

  • hasseltdelangeman
    Replied 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


    1634565272 616d7c981ddb7  Screenshot 10

  • Michal_S Jotform Support
    Replied 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.

    1634568687 616d89ef87d6a 1 Screenshot 10

    Let us know if you require any further assistance,

    Thank you!

  • hasseltdelangeman
    Replied 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:

    1634572601 616d9939245ea  Screenshot 10


  • Tommi_N
    Replied 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.

  • hasseltdelangeman
    Replied on October 18, 2021 at 3:18 PM

    Hello Tommi,

    it doesn't work. I think that this problem can't be solved:


    1634584699 616dc87b11aa1  Screenshot 10

  • VincentJay
    Replied 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:

    1634589888 616ddcc0f1b63 ac221 Screenshot 10

  • hasseltdelangeman
    Replied 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.

    1634631242 616e7e4a24671  Screenshot 10

  • Zahra_S
    Replied 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:

    1634891074 617275420401e  Screenshot 10

    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.

  • hasseltdelangeman
    Replied 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