AnsweredAssumed Answered

Nintex Form formating issue/css issue

Question asked by arobins on Jan 11, 2017
Latest reply on Jan 13, 2017 by jesse.mchargue

 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();

Outcomes