How to place icon next to or within input field

Question

How I can put my icon next to or within the input field?

The problem is, the icon changes the form. Usually, it\'s like this:

But when I\'m adding the icon

Answer 1

You can achieve it using the below code, just updated the CSS as per your requirement. It is a responsive design, it will work for all the devices.

CODE

        
            
                
                
                    
                
                
                
                
                
                    
                        
                    
                
                
                    
                        
                    
                
                
                            </f:content>
        </f:SimpleForm>
    </VBox>
</code></pre>

<p><strong>Output:</strong></p>

<p></p>

<p>If you are looking for below output</p>

<p></p>

<pre><code><f:SimpleForm 
    editable="true"
    layout="ResponsiveGridLayout"
    title="Neue Zeiterfassung anlegen"
    labelSpanXL="3"
    labelSpanL="3"
    labelSpanM="3"
    labelSpanS="12"
    adjustLabelSpan="false"
    emptySpanXL="1"
    emptySpanL="1"
    emptySpanM="1"
    emptySpanS="0"
    columnsXL="1"
    columnsL="1"
    columnsM="1"
    singleContainerFullSize="false" >
    <f:content>
    <Label text="Auftrag" tooltip="Auftrag eingeben" />
      <ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
        <core:ListItem text="{Aufnr}"/>
          <layoutData>
            <l:GridData span="XL8 L8 M7 S9" />
          </layoutData>
      </ComboBox>
        <Label text="Datum" labelFor="DP3"/>
        <DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" 
         placeholder="dd.mm.yyyy">
         <layoutData>
            <l:GridData span="XL8 L8 M7 S9" />
         </layoutData>
            </DatePicker>
             <Label class="font1" text="Dauer"/>
                <Input value="Street">
        <layoutData>
            <l:GridData span="XL8 L8 M7 S9" />
        </layoutData>
            </Input>
        <Button icon="sap-icon://sys-help"  press="onPress" width="40px" >
        <layoutData>
            <l:GridData span="XL1 L1 M1 S3" />
                </layoutData>
                    </Button>
                    <Label text="Arbeitsbeschreibung"/>
                    <TextArea id="beschreibung">
                        <layoutData>
                            <l:GridData span="XL8 L8 M7 S9" />
                        </layoutData>
                    
                
            

With icon

    
        
            
            
                
                
                    
                
            
            
            
                
                    
                
            
            
            
                
                    
                
            
            
                
                
                    
                
            
            
                            <layoutData>
                    <l:GridData span="XL10 L10 M10 S10" />
                </layoutData>
            
        
    

If you are using the ICON you need to add the style as well for alignment

.infoIcon {
  line-height: 3rem;
}