How can I make a Text element float?

  • lafhab2
    Asked on June 12, 2015 at 8:44 AM
    This is great, but I have a question:

    How can I make a Text element float?  There is no element field ID to quote for inserted text/html.

    I am using pre-populate for a specific field, I wanted that to float but can't make it large enough, so I have used the text element and insert {fieldname} which is fine because I can use font size.  I now want to make that float but there is no field ID to use in the code above.
  • Boris
    Replied on June 12, 2015 at 9:11 AM

    Hello.

    Al regular form fields (widgets excluded) have classes, IDs, or other ways of selecting them through CSS. Could you please show us the exact element that you would like to "float" on the screen?

    I have cloned your most recent form, CC GH11 A, and I assume you are trying to float the Student text field, correct? Now, you would be accessing the form with the ?student=somename parameter.

    http://form.jotformpro.com/form/51623433537958?student=somename

    How can I make a Text element float? Image 1 Screenshot 40

    To float this Student field, you should find out its selector, which you can see by right-clicking on the live form and Inspect Element.

    How can I make a Text element float? Image 2 Screenshot 51

    We can see that this element (3) has the ID of id_178, which means that we select the entire Text field by using #id_178. But I assume you want to select just the word "somename", which is created by {student} - we can see (4) that it has received a class of 178_student, which means we need to use span[class="178_student"] as its selector. (Due to technical reasons, you can't write classes that start with numbers as .178_student)

    span[class="178_student"]{position:fixed;right:10px;bottom:20px;}

    Please take a look at the above form to see if this is what you are looking for, and please let us know if you need further assistance.

    How can I make a Text element float? Image 3 Screenshot 62

  • lafhab2
    Replied on November 11, 2015 at 8:26 PM

    It has been a while since you replied however some time recently this stopped working.  The specified fields no longer stay in a fixed position, on ANY of your forms, despite the correct code still being in place.  I think this occurred a few weeks ago when the backend was changed and everything was bullet-pointed.  The above solution no longer works, the injected CSS is there but it doesn't work, eg:

    span[class="167_student166"]{position:fixed;right:40px;top:20px;}
    span[class="169_formname"]{position:fixed;right:40px;top:50px;}

    Is there a new way of achieving this, ie fixed position of specified fields.  It used to work but I think a change made in the backend has caused it to stop working.

  • Charlie
    Replied on November 12, 2015 at 3:15 AM

    It seems like the CSS selectors have been changed, either by using a new theme, editing or deleting the old field or there was a changed made by the backend team. You could try updating the CSS selectors instead.

    Here's how:

    1. If you are using Chrome browser, first, right click on the element and choose "Inspect Element"

    How can I make a Text element float? Image 1 Screenshot 40

     

    2. In the browser console, it should auto highlight the element you inspected. Now, right click on that specific element and choose "Copy CSS path". Please note that the text element is wrapped in multiple elements. In this case, the specific child element we want to get is the <span>

    How can I make a Text element float? Image 2 Screenshot 51

    3. Now paste the CSS selector and add the custom CSS code in your Form Designer Tool. In my case, this is how it looks like:

    #text_178 > p > span > span {

        position : fixed;

        right : 10px;

        bottom : 20px;

    }

     

    How can I make a Text element float? Image 3 Screenshot 62

     

    I cloned my colleague's form, you can check how it looks like with the change I made: https://form.jotform.com/53151629455962? 

    Let us know if you need more assistance on this.

  • lafhab2
    Replied on November 12, 2015 at 7:20 AM

    Thanks for the reply, yes I have followed the guidance - very clear! - and it seems to be working but I'm having one small issue still.  I'm trying it on 'CCH GH0', as with all forms I have 2 elements to 'fix position' of but can't get the 2nd one to fix. My code seems correct:

    #text_187 > p > span > strong > span {

        position : fixed;

        right : 20px;

        top : 40px;

    }

    #text_189 > p > span > strong > span {

        position : fixed;

        right : 20px;

        top : 60px;

     

    }


    Can you see if anything is wrong with the above code?

     

  • Charlie
    Replied on November 12, 2015 at 9:20 AM

    Could you share us the form URL or form title?

    I can't seem to find a form titled "CCH GH0", I see one "CC GH10".

    Perhaps this will work:

    #text_187 > p > span > strong > span > span {

        position : fixed !important;

        right : 20px !important;

        top : 40px !important;

    }

     

    #text_189 > p > strong > span > span {

        position : fixed !important;

        right : 20px !important;

        top : 60px !important;

    }

     

     

    Make sure that there's no duplicate code that will conflict the other one. Let us know if that works.

  • lafhab2
    Replied on November 13, 2015 at 7:30 AM

    Thanks for the reply, yes I meant CC GH10 - sorry for the confusion.  I managed to get the above working, I went on to the next one but can't get that working quite right.  I used 'inspect element' to get the text numbers, for this form it's 178 & 180, so the code applied is:

    #text_178 > p > span > strong > span > span {

        position : fixed !important;

        right : 20px !important;

        top : 40px !important;

    }

     

    #text_180 > p > strong > span > span {

        position : fixed !important;

        right : 20px !important;

        top : 80px !important;

    }


    The page is: http://form.jotformeu.com/form/41604031931342?student=Sample%20Name&formname=GH11

    Frustratingly, the name element (180) didn't position, although the form (178) did.  I changed the numbers round so it was 180 first and then 178, and the name did position.  Therefore on the above code, the first element positions but the second doesn't.  It worked on CC GH10 no problem.  I can't see anything wrong with this, so why isn't it working?  Is extra code required between the 2 elements?

  • Charlie
    Replied on November 13, 2015 at 9:18 AM

    The elements seems to change in your end. Have you copied exactly the elements? Changing the element numbers may not accurately give you the correct CSS path, you need to inspect each element.

    In my case, I checked the form you shared:

     How can I make a Text element float? Image 1 Screenshot 30

    The CSS path for the above element I copied is this one:

    #text_178 > p > strong > span > span

     

    How can I make a Text element float? Image 2 Screenshot 41

    I then copied the other element and this is the path for it:

    #text_180 > p > strong > span > span

     

     

    So in each form, you need to do the same process, right click on the element you want to change position, copy the CSS path of the highlighted element.

    You can check the cloned form here: https://form.jotform.com/53163700434952? using those CSS paths.

    Let us know if you need more help on this.