How can we find the Text element ID to apply some CSS to it?

  • KarFre
    Asked on April 1, 2015 at 12:20 PM
    I have the same issue on many other forms in my library.  How do I find the Text element id# for the fields I would like to shrink?
  • Ben
    Replied on April 1, 2015 at 12:41 PM

    I have moved your question to this thread since we can only have one issue / question per thread and because this might require some back and forth in regards to this - to cover everything.

    Now usually you could follow these steps: How to find Field IDs & Names

    Unfortunately the Text element would not show the the ID this way, so for it we need to do this a bit differently.

    The first option would be to go into Form Designer and then into CSS tab. Following this we should double click the Text fields that we are interested in.

    How can we find the Text element ID to apply some CSS to it? Image 1 Screenshot 30

     

    Each time we do so the entry on the right is created that shows us the ID of the element:

    1. one click for class
    2. double click for ID

    Now we can remove it right away if we want to, or we can leave it as it is and add the code that we want - for example, looking at the previous thread, that would be:

    width: 65%;

    If we do not want to enter the Form Designer then the best way would be to right click on the form (that is in preview) and select View page source option.

    Now this is a lot of text and presented in quite likely not as easy to follow manner so I would always suggest using CTRL+F (Search function) to locate the text that we are after.

    You can search the part of the text shown or the part of the Text element, such as class="form-html"

    In my case, I have used the text from within.

    How can we find the Text element ID to apply some CSS to it? Image 2 Screenshot 41

    As you can see both options have shown the same - that the id is ID_4.

    Now the # in CSS means that we are calling ID, so that is the only different that your will notice since in HTML code that we can see above that is not written.

    I hope that this helps, but do let us know if it does not and we would be happy to see how we can assist further in regards to this.