<apex:inputtext> is distorting on VF page during zoom-in / out of screen

Question

I have used for search a string and when I zoom in or zoom out the screen text box move horizontally on the page also if I Zoom-in the screen text box overlaps the text , is there any way I can keep it just next to label. Can anyone please help me to

VF page:

<apex:pageBlockSection >

              <div class="slds-form-element">              

               <div class="slds-form-element__control">

                  <apex:inputtext styleClass="txtbox" label="Enter value:" value="{!searchstr}" onkeypress="return noenter(event);" style="right:123%; position:relative;"/>

                </div>

               </div><br/>

        </apex:pageBlockSection>

Answer 1

You need to use a label and field if you try to do it this way.

<div class="slds-form-element">
  <apex:outputLabel styleClass="slds-form-element__label" 
     for="inputField1" value="Enter Value" />
  <div class="slds-form-element__control">
    <apex:inputText id="inputField1" styleClass="slds-input" />
  </div>
</div>

Also, you need to remember to use an appropriate slds-form, such as slds-form_horizontal.