Adjusting icon position

The Icon plugin generates the following markup for icon:

        
          
          
        
        
          
          <
          i
          
          data-field
          =
          "
          FIELD_NAME
          "
          
          class
          =
          "
          fv-plugins-icon CSS_CLASSES
          "
          >
          
          i
          >

In some cases, the icons aren't shown properly. Understanding the markup of icon and customizing the value of top and right properties for icon's class, you can adjust the feedback icon to deserved position.

The following example demonstrates this technique when using the Bootstrap's Input Group with the Bootstrap plugin :

        
          <
          style
          >
          
        
        
          
          /*
        
        
          fv-plugins-bootstrap is CSS class that will be added to the form automatically
        
        
          when the Bootstrap plugin is used.
        
        
          You might need to change that if your form is made in other CSS frameworks
        
        
          */
          
        
        
          
          .fv-plugins-bootstrap
          
          .form-group
          .inputGroupContainer
          
          .fv-plugins-icon
          ,
          
        
        
          
          .fv-plugins-bootstrap
          
          .form-group
          .selectContainer
          
          .fv-plugins-icon
          
          {
          
        
        
                  // Customize the icon's position
        
        
          
          right
          :
          
          -20
          px
          ;
          
        
        
          
          }
          
        
        
          
          
          style
          >
          
        
        
          
        
        
          
          <
          div
          
          class
          =
          "
          form-group row inputGroupContainer
          "
          >
          
        
        
          
          
          
        
        
              ...
        
        
          
          
          div
          >
          
        
        
          
        
        
          
          <
          div
          
          class
          =
          "
          form-group row selectContainer
          "
          >
          
        
        
          
          
          
        
        
              ...
        
        
          
          
          div
          >

Adjusting icon position

Hiding icon for particular field

Since each icon element for given field has data-field="FIELD_NAME" attribute, we can easily hide the icon by adding one more CSS property as:

        
          <
          style
          >
          
        
        
          
          /* Hide the icon for phoneNumber field */
          
        
        
          
          .fv-plugins-icon
          [
          data-field
          =
          'phoneNumber'
          ]
          
          {
          
        
        
          
          display
          :
           none
          ;
          
        
        
          
          }
          
        
        
          
          
          style
          >
          
        
        
          
        
        
          
          <
          input
          
          name
          =
          "
          phoneNumber
          "
          
          />

Adjusting icon position

Hiding icon for particular field

See also