Field Editor and Template fields are being cut-off in a pop-up

  • 1
  • Problem
  • Updated 2 years ago
  • In Progress
I'm trying to figure out why my field editor values (both model fields and templates) are being cut off in a pop-up window (see first image)



There is no CSS assigned to the popup, the panel set or the field editor fields/templates.  This is happening on all components within the popup.

This is what the Skuid editor looks like for this component.

Photo of Debbie Bishko

Debbie Bishko

  • 250 Points 250 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Karl Li

Karl Li, Employee

  • 708 Points 500 badge 2x thumb
Debbie,

Do you mean to say that the template field you have there is rendering halfway on the page, so that School of Business is cut in half?
Photo of Debbie Bishko

Debbie Bishko

  • 250 Points 250 badge 2x thumb
Hi Karl, yes.  You can only see the top portion of "School of Business", the bottom portion of this text is being cut off.

The same is happening with check box fields.  The lower half of the check box is being cut off.
Photo of Karl Li

Karl Li, Employee

  • 708 Points 500 badge 2x thumb
Could you paste what you have going on inside the template? When you resize the browser window, does it fix for the rendering issue? If you allow HTML, does that solve the glitch?
(Edited)
Photo of Debbie Bishko

Debbie Bishko

  • 250 Points 250 badge 2x thumb
Resizing the window does not help.

Here is the template:

{{job_title__c}} at <b>{{employer__c}}</b>     
HTML is enabled for the template.

It's not just templates, though.  Model fields are also getting cut off.  Here is a screenshot of  what some checkbox fields look like.  Note that the bottom of the boxes are being cut off.

Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
Debbie,

Are all other fields that are not in the popup ok? Or are they messed up as well?

Do you, by any chance, have global field CSS styling or anything in other CSS resources (could also be in the theme)? The selector to look for would be .nx-field or .nx-fieldtext.

Cheers
Photo of Debbie Bishko

Debbie Bishko

  • 250 Points 250 badge 2x thumb
Brilliant!  I'm not very strong with CSS, but I did find the offending statement.  I ended up creating a new CSS resource with a unique identifier and tagged this pop-up with the new CSS.  So it is working better now.  I still have one field in the popup (a template field displaying a Text Area field) that is not obeying the "overflow: visible" characteristic.  This is my new CSS:

#connections .nx-fieldtext{height:50px; overflow: visible;}

Do I need a different statement to apply to a Text Area field?
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
You could add a style attribute to the text area field containing the appropriate values ;)