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

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.

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?

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.

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?

Resizing the window does not help.

Here is the template:

{{job_title__c}} at {{employer__c}}
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.

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

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?

You could add a style attribute to the text area field containing the appropriate values :wink: