function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Nitish 73Nitish 73 

Bootstrap Lookup fields on Visualforce page

Hi Everyone, 

I have a requirement where in I am leveraging twitter bootstrap (from Visualstrap - The app exchange tool) in my visualforce page and I hit a road block. 

I have a 2 look up fields (Applicant Name, Owner) on my VF page, but they isnt rendering like a normal once. PFA the picture attached.I would like them to render like a normal field (without those separations). 


User-added image

Here is my code. I would be greatful, if you can help me resolve this issue
 
<apex:page standardController="Application__c" >
 <vs:importvisualstrap />
 
 
   <script>
      function goToDetailPage(recId){
          if(typeof sforce != 'undefined' && typeof sforce.one != 'undefined'){
              sforce.one.navigateToSObject(recId);
          }
          else{
              window.location.href = '/'+recId;
          }
          return false;
      }
   </script>
   
   <vs:visualstrapblock style="font-size: 15px;"  >
       <apex:form >
       <apex:pageBlock >
       <center>
         <vs:pageheader style="color:#006600"  title="New Application" icon="file" subtitle="{!Application__c.Name}"/>
      </center>
      <center>
           <vs:formblock alignment="horizontal" style=" margin-top: 20px; marrgin-bottom: 20px;  margin-left: 20px;" >
        <div class="span7 text-center">
                  
                     <apex:commandButton value="Save" styleClass="btn-success"/> &nbsp;
                     <apex:commandButton value="Edit" styleClass="btn-success"/> &nbsp;
                     
                  
               </div><br/><br/>
   <vs:row style="align:center">
   <vs:column type="col-md-6">
     
      
            <apex:outputLabel >Applicant Name</apex:outputLabel>
            
        <apex:inputfield id="Employee" value="{!Application__c.Applicant_Name__c}" styleClass="form-control">
            </apex:inputfield>
    <br/><br/>
 </vs:column>


<vs:column type="col-md-6">
           <apex:outputLabel >Record Type</apex:outputLabel>
     <apex:inputfield value="{!Application__c.RecordTypeID}" styleClass="form-control" html-placeholder="Record Type"></apex:inputfield>
     <br/><br/>
     
      <apex:outputLabel >Status</apex:outputLabel>
            <apex:inputfield value="{!Application__c.Application_Status__c}" styleClass="form-control" html-placeholder="Status"></apex:inputfield>
     <br/><br/>
     
     <apex:outputLabel >Owner</apex:outputLabel>
       <apex:inputHidden id="Employee_lkid" value="{!Application__c.OwnerID}"/>
     <apex:inputfield value="{!Application__c.OwnerID}" styleClass="form-control" html-placeholder="Owner"></apex:inputfield><br/>
    
    </vs:column>
    </vs:row>
    
    </vs:formblock>
    </center>
    </apex:pageblock>
    </apex:form>
    </vs:visualstrapblock>
</apex:page>

Thanks
Nitish

 
James LoghryJames Loghry
Bootstrap nor the lightning design system will work well with the lookup functionality in Visualforce / Salesforce.  In order to acheive that, you'll have to implement your own using some combination of html / css / javascript remoting in order to make it pretty.  If you haven't already, I would check out the SLDS at http://www.lightningdesignsystem.com as a responsive solution that works well with Salesforce.