Skip to main content
Nintex Community Menu Bar

Nintex Form formating issue/css issue

  • January 11, 2017
  • 7 replies
  • 112 views

Forum|alt.badge.img+6

 Good afternoon,

I've been having a problem with Nintex forms for some time that I can't solve on my own. My forms always render missing the right side boarder (see pic).

I suspect the issue is in the CSS (below) but I don't know enough for me to determine if this is in fact the issue. I have pasted the CSS below.

Any help would be appreciated.

Missing ride board of the form

/* Template styles */
.ip-container{
border: 1px solid #000000;
border-style: solid;
 }
.ar box{
border: 1px solid #000000;
font-size: 14pt;
align-content: center;
color: #000000;
}
.nf-form-input
{
background-color: #f4f2ed;
}
.nf-form-input .nf-filler-control-inner, .nf-form-label .nf-filler-control-inner
{
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
.nf-form-input .nf-textbox-wrapper
{
left: 0px;
right: 0px;
}
.nf-section
{
border-top: 1px solid #000000;
margin-top: -1px;
}
.nf-section-bottom
{
border-top: 2px solid #000000;
margin-top: -2px;
}
.nf-item
{
background-color: white;
}
.nf-item-alternating
{
background-color: #f2f4f7;
}
/* Mobile styles */
.nf-mobile-form
{
background-color: inherit;
}
.nf-mobile-form .nf-form-input .nf-filler-control-inner
{
top: 4px;
bottom: 10px;
left: 10px;
right: 10px;
}
.nf-mobile-form .nf-form-label .nf-filler-control-inner
{
top: 5px;
bottom: 1px;
left: 10px;
right: 10px;
}
.nf-mobile-form .nf-form-input, .nf-mobile-form .nf-form-label
{
background-color: #f4f2ed;
}

/* Nintex Mobile styles */
.nf-nintexmobile-form .nf-form-input, .nf-nintexmobile-form .nf-form-label
{
background-color: transparent !important;
}
/* Out of Dialog styles */
.nf-non-dialog-outer
{
padding: 20px 0px;
}

.nf-non-dialog-outer .nf-filler-wrapper-outer
{
margin: 0px auto;
position: relative;
background-color: #f4f2ed;
}

.nf-non-dialog-outer .nf-filler-wrapper
{
border: 1px solid #333;
background-color: white;
position: relative;
top: -5px;
left: -5px;
}

/* IE 8 designer fix */
.nf-mobile-form #uiDesignerSurface .nf-section
{
border-top: inherit;
margin-top: inherit;
}
.nf-mobile-form #uiDesignerSurface .nf-section-bottom
{
border-bottom: inherit;
margin-bottom: inherit;
}
/* Workflow designer override for Nintex Workflow styling */
#uiDesignerSurface input[type=text], #uiDesignerSurface input[type=password], #uiDesignerSurface .ms-inputBox, #uiDesignerSurface  select, #uiDesignerSurface  textarea, #uiDesignerSurface .ms-inputBoxActive, #uiDesignerSurface .ms-inputBoxActive.ms-inputBox, #uiDesignerSurface button, #uiDesignerSurface .sp-peoplepicker-topLevel, #uiDesignerSurface .sp-peoplepicker-topLevelDisabled, #uiDesignerSurface .sp-peoplepicker-autoFillContainer
{
background-color: rgb(253, 253, 253) !important;
}
@media print
{
input[type=checkbox], input[type=radio], label
{
vertical-align:baseline;
margin:0px 2px 1px 2px !Important;
}
} /* print pdf IE fix */
/* Start: Make label and text fields larger */
.nf-outer {
font-size: 11pt;
}
a.ms-addnew {
font-size: 11pt;
}
input[type=”submit”], button {
padding: 3px;
font-size: 19px;
border:1px solid #999999;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.nf-textbox-wrapper > input[type=”text”] {
margin-left: -2px !important;
max-width: 98%;
}
.ui-datepicker-trigger {
top: 7px;
height: 20px;
width: 21px;
}
.ms-taxonomy-browser-button {
padding-top:5px !important;
}
.nf-attachmentsLink {
padding-top:2px;
}
.nf-form-label label {
padding-top: 3px !important;
padding-left: 10px !important;
}
.nf-filler-container {
padding: 10px 0px 0px 10px;
}
.nf-filler-control-inner label {
padding-top: 3px !important;
}
select{
font-size: 11pt
}
NWF$("#s4-ribbonrow").hide();

7 replies

Forum|alt.badge.img+7
  • Nintex Partner
  • January 12, 2017

Hi Andrew,

Could you please show us where you use ".ip-container" and ".ar box" styles?

Or could you provide an export of your form (which seems a basic task form) ?

Space between left border and form labels suggest that the right border could be "pushed" out of the canvas.


kelliganp
Forum|alt.badge.img+10
  • Rookie
  • January 12, 2017

Hi Andrew,

Try widening your canvas by 10 or 15 pixels and see if the border shows up. If it is at 700 for example, make it 715.

197600_pastedImage_1.png

Regards,

Patrick Kelligan


Forum|alt.badge.img+6
  • Author
  • Rookie
  • January 13, 2017

Thanks Patrick but this didn't work. I ended up trying it up to 50px with no sucess.


Forum|alt.badge.img+6
  • Author
  • Rookie
  • January 13, 2017

Hi Pierre,

I've attached the form. I'm not certain where the ".ip-container" and ".ar box" styles are being used.

Thanks for any help you can provide.

Andrew


Forum|alt.badge.img+12
  • Nintex Partner
  • January 13, 2017

Hi Andrew,

is your site running a custom design? If you, can you create a form to a default theme SharePoint site and import your css there? If the form is looking ok there, the problem is more the custom design of your site rather than the style of the form.

If the problem persists I'd try to reset the custom css and build up your customizations again and always check if the outcome still looks good. You changed a lot of margins and paddings which makes it very difficult to give you a direct advice what to change.

Kind regards,

Enrico


Forum|alt.badge.img+7
  • Nintex Partner
  • January 13, 2017

The straight way I found to workaround your problem is to change this CSS rule:

Snippet

.nf-filler-container {padding0/*padding: 10px 0px 0px 10px;*/}

197605_pastedImage_2.png

There's probably a better approach but... happy.png


jesse_mchargue
Forum|alt.badge.img+12

Andrew Robinson‌ - 

You can add left and right border to the .nf-section and achieve what you are looking for:

.nf-section
{
   border-top: 1px solid #000000;
   border-left: 1px solid #000000;
   border-right: 1px solid #000000;
   margin-top: -1px;
}

Form:

197622_pastedImage_2.png

Hope this helps!