Required field icon is not displaying properly

  • Profile Image
    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_

  • Profile Image
    VincentJay
    Answered 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.gif

  • Profile Image
    hasseltdelangeman
    Answered on October 17, 2021 at 03: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_

  • Profile Image
    Collin_S
    Answered on October 17, 2021 at 03: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.

  • Profile Image
    hasseltdelangeman
    Answered on October 18, 2021 at 06: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

  • Profile Image
    IvayloK
    Answered on October 18, 2021 at 07: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.

  • Profile Image
    hasseltdelangeman
    Answered on October 18, 2021 at 07: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_

  • Profile Image
    hasseltdelangeman
    Answered on October 18, 2021 at 08: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_

  • Profile Image
    Sam_G
    Answered on October 18, 2021 at 09: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_

    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.

  • Profile Image
    hasseltdelangeman
    Answered on October 18, 2021 at 09: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_

  • Profile Image
    Michal_S
    Answered 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.png

    Let us know if you require any further assistance,

    Thank you!

  • Profile Image
    hasseltdelangeman
    Answered 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_


  • Profile Image
    Tommi_N
    Answered on October 18, 2021 at 01:03 PM
    @media (max-width:480px){
    .required{
     right: -190px;
    }
    }

    Seems like guided max width was too low for mobile, change it to 480px.

  • Profile Image
    hasseltdelangeman
    Answered on October 18, 2021 at 03:18 PM

    Hello Tommi,

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


    1634584699_616dc87b11aa1_

  • Profile Image
    VincentJay
    Answered on October 18, 2021 at 04: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.gif

  • Profile Image
    hasseltdelangeman
    Answered on October 19, 2021 at 04: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_

  • Profile Image
    Zahra_S
    Answered on October 22, 2021 at 04: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_

    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.

  • Profile Image
    hasseltdelangeman
    Answered on October 26, 2021 at 05: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