styling g:ui_reference

[yundlu316]

I have a reference field on my UI Page, but it's a bit too wide.   Is there a way to style jelly elements?   My HTML code looks something like this:

<table   class = "field">

        <tr>

                  <td>

                            <label> Name of family member $[SP]<i>(last, first, middle initial)</i></label>

                            <g:ui_reference name="family_member_1" id="family_member_1" table="hr_beneficiary" query="active=true" completer="AJAXTableCompleter" columns="employee; beneficiary_contact.relationship"/>

                  </td>

        </tr>

</table>

I would love to be able to use some CSS to style g:ui_reference, but haven't found a way to do it:

<style>

        ui_reference {

                  width: 70%;

                  border-color: blue;

        }

</style>

Thanks.

[bernyalvarado · Accepted solution]

Hi David,

Jelly tags are processed on the server side and transformed into html tags that can be interpreted by any client (browser). You may want to try to create the styles aligned to the resultant html code that is created. You can take a look to this resultant code created by opening your UI page on your browser using "Inspect".

Additionally, I'll recommend you add your style tags at the beginning of your ui page code after the default ui page header tags.

I hope this helps.

Thanks,

Berny

[yundlu316]

Hi Berny, what do you mean by opening my UI Page on my browser using "Inspect"?   How do I do that exactly?

Thanks.

[yundlu316]

nevermind, figured it out and it works.   thanks!

[bernyalvarado]

Cool! You're welcome!