How to adjust the input space of a single line text box


Badge

Hi,

I am trying to adjust the height of the white input space of a single line text box so it matches the people field on my form.It works this way but does not look "pretty".

As you can see below, left side box is a single line text box and right hand side is a people field, the while space is not aligning. I tried playing with formatting, cell padding etc. I couldn't not find anything.

I do have a CSS that I could apply but I am not that great at modifying it.

 Left box = Single line text box ; Right box = People field

Here is the CSS - Any help would be appreciated.

/* Template styles *//* Banner/Logo at top of form */
.Nintex-Forms-banner
{
 background: no-repeat fixed left top;
}.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;
}/* Label styling for desktop layout */
.nf-form-label
{
    display: block;
    text-align: right;
}
.nf-form-label label
{
padding-top: 1px;
}
/* Button styling */
.nf-button input
{
font-size: 14px;
}.nf-section
{
border-top: 1px solid #d4dbe0;
margin-top: -1px;
}
.nf-section-bottom
{
border-top: 1px solid #d4dbe0;
margin-top: -2px;
}
.nf-item
{
}
.nf-item-alternating
{
background-color: white;
}
/* 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;}/* Label styling for mobile layouts */
.nf-mobile-form .nf-form-label
{
 text-align: left;
 
}.nf-mobile-form .nf-form-input
{
border-top: 0px solid transparent;
}/* 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: transparent;
}.nf-non-dialog-outer .nf-filler-wrapper
{
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;
}
  


2 replies

Userlevel 6
Badge +16

Try setting the height with !important;

Badge +1

try this

 

input, select, textarea, .ms-inputBox, .ip-container, .ip-item span

{

height :30px !important;

}

Reply