Jump to content
  • 0

CSS styling just one of two visible virtual fields in a details page


Jodie

Question

I'm trying to add css styling to a details page for one of my two visible virtual fields. The second field is set as an auto text cascade that provides the answer to my user - and so I don't want the same formatting as the input virtual field.

I was able to selectively style the table fields with adding into my header 

#fieldname { 

background-color:#f9f9f9;

}

but when I used cbParamVirtual53 and applied the same code nothing happened for the virtual field. I realise (using f12) the virtual field id has additional numbers which change each time the page is created. Is there a specific way I should be referring to the virtual field in CSS styling in header? 

Any help would be appreciated.

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
On 2/17/2023 at 3:52 AM, cheonsa said:

Hi @Jodie,

You can check this forum post from Caspio. It provides a guideline for referencing Caspio form elements using JavaScript.

 

Thanks for the reference sheet. I tried document.getElementsByName and using JS to format the second field but no matter what options I tried, I couldn't get one to find the second field ( a virtual cascade) and apply the format.

I've found a work around though. As this form only has two inputs (everything else is display only), I created a new style sheet for this page and just put the formatting for the second virtual field in the style sheet and then customised the first virtual parameter field with the CSS.  The form works how I'd hoped - Users now recognise where to enter data (in the first field )and they see the description in the second 'look up' field.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...