Display Only Fields - formatting?

[georgep]

We are looking to have a responsive datapage form that includes a mix of normal Text, Calendar and Text Area fields etc - alongside an equal number of Display Only fields.

Our issue is that whilst you can style fairly readily the other fields it's not so easy with Display Only fields.

We would like a box round our Display Only fields to highlight that their contents is data (as a deafult in Capsio  it just shows as plain text and is confusing round what is the field name and what is the data).  Our plan was to use a boarder box to surround the data. We sort of got this to work - m ostly - with CSS.  However we note that when the field is empty the border collapses to a very narrow box. You can see this in our screenshot below.  The field "Staff Grade" is just a narrow box as it has no content.

Does anyone have any ideas or work arounds for how format this field so it will display like the others when blank or with content?

George

 

[sandy159]

Hi @georgep,

For the Display only fields on the Details page, it is possible to change styling in the Styles tab. It should be needed to add the 'min-height' to make the fields look the same. 

You may go to Styles -> Form/Details -> Layout -> Source. Find .cbFormDataCell and .cbFormDataCellNumberDate classes and set the 'min-height' property to the needed value.

So even if the field will be empty, the data cell will have min-height to it. 

Hope this helps!

[georgep]

That was really helpful and an eye opener.  We have now got the height sorted.  Many thanks Sandy159

Our last issue however is to do with field length.  In the screenshot above the Display Only fields match the length of the normal Text Filed (one with white background). Hoever if all fields within a section are Display Only then they dont get forced to match page size.  Is there any way round this?

G

 

[kpcollier]

45 minutes ago, georgep said:

That was really helpful and an eye opener.  We have now got the height sorted.  Many thanks Sandy159

Our last issue however is to do with field length.  In the screenshot above the Display Only fields match the length of the normal Text Filed (one with white background). Hoever if all fields within a section are Display Only then they dont get forced to match page size.  Is there any way round this?

Do you want the fields to stay the width they are in the screenshot at all times? You could go to the same place that @sandy159 showed you in the screenshot. Change 'width: auto' to 'width: 100%;'.