+ Start a Discussion
GaneeeshGaneeesh 

Field and lookup icon display in different rows how to avoid this..?

Hi friends here i am trying to display lokkup fields on vf page using apex:inputField tag but the problem is field and lookup icon displays line by line(field displays on top and lookup icon displays below the field) how do i display field and lookup icon side by side..? . For maore clarification look at this pic.please look at this pic you can understand easily.
Vinit_KumarVinit_Kumar
Can you post your VF page code ??
GaneeeshGaneeesh
sure you can find the lookup related code at the bottom of my code that was highlate in bold. Thnx
<apex:page showHeader="false" controller="isos2_controllercls"  doctype="html-5.0">
<head>  
   <link rel="shortcut icon" type="image/x-icon" href="https://www.internationalsos.com/en/imagesisos/favicon.ico" />
    <link type="text/css" rel="stylesheet" href="https://www.internationalsos.com/en/isosenstyles.css" />   
    <link href="https://www.internationalsos.com/survey2/survey.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="https://www.internationalsos.com/en/files/imgcookie.js"></script>
   <!-- <script type="text/javascript" src="/en/jquery-1.4.1.min.js"></script> -->
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>   
<script type="text/javascript" src="https://buymembership.internationalsos.com/js/quoteEngineExternal.js"></script>

<script type="text/javascript" src="https://www.internationalsos.com/en/button-rollover.js"></script>
<script type="text/javascript" src="https://www.internationalsos.com/en/suckerfish-dropdown.js"></script>
<script type="text/javascript" src="https://www.internationalsos.com/en/jquery.cycle.all.2.73.js"></script>
<script type="text/javascript" src="https://www.internationalsos.com/en/functions.js"></script>
<script type="text/javascript">
          $(function() {
          $('input[type="image"]').hover(function() {
          $(this).attr("src", $(this).attr("src").replace('.gif','-inverse.gif')); },
          function () { $(this).attr("src", $(this).attr("src").replace('-inverse.gif','.gif')); }
          );
          });
          $(document).ready(function(){
            $('#membership-clear').show();
            $('#membership').hide();
            $('#membership-clear').focus(function() {
                $('#membership-clear').hide();
                $('#membership').show();
                $('#membership').focus();
            });
           
            $('#membership').blur(function() {
                if($('#membership').val() == '') {
                    $('#membership-clear').show();
                    $('#membership').hide();
                }
            });
        });
        
</script>
<style>
    #membership-clear {
    display: none;
}
</style> 
   <!--  initialize the slideshow when the DOM is ready -->
    <script type="text/javascript">
        $(document).ready(function() {
        $('div.slideshow').css({ 'display' : 'block' });
        $('div.slideshow').css({ 'z-index' : '-99' });
        $('.slideshow').cycle({
            fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            timeout: 5000 // milliseconds between slide transitions (0 to disable auto advance)
        });
    });
    </script>
   <script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-20225430-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
  </script>
</head>
<apex:form >
<!--<body>-->
<div><a href="#skipnav" class="skip" accesskey="s" tabindex="1">Skip to main content</a></div>
<!-- /en/about-us.htm -->
<div id="page">
  

    <div id="header">
        <div class="headertop">
   
            <div class="headertop-left">
                <form name="site" action="/en/redirect.asp" method="get">
                <div class="headertop-left-label">
                    <p><label for="site">Site selector:</label></p>
                </div><!-- /.headertop-left-label -->              
                <div class="headertop-left-field">
                    <select name="site" id="site" class="site" tabindex="2">
                        <option selected="selected" value="https://www.internationalsos.com">Select location</option>                       
                            <option value="https://www.internationalsos.com">Corporate Site</option>                       
                            <option value="https://www.internationalsos.com/clinicsinchina/en/default.aspx">Clinics in China</option>                      
                            <option value="https://www.internationalsos.com/de/">Deutschland </option>                      
                            <option value="https://www.internationalsos.es">Espa&ntilde;a</option>                      
                            <option value="https://www.internationalsos.fr">France</option>                      
                            <option value="http://www.sosindonesia.com/">Indonesia</option>                       
                            <option value="http://www.internationalsos.nl">Nederlands</option>                       
                            <option value="http://www.internationalsos.co.kr/">대한 민국</option>                       
                            <option value="https://www.internationalsos.com/cn/">中国</option>                      
                            <option value="http://www.internationalsos.co.jp/">日本</option>                      
                            <option value="http://www.internationalsos.com.tw">臺灣 </option>                      
                    </select>
                    <div class="clear0"></div>               
                </div><!-- /.headertop-left-field -->              
                <div class="headertop-left-button">
                    <input type="submit" name="sa" value="" class="go-button" onmouseover="rollover(this, '/en/imagesisos/button-arrow-inverse.gif');" onmouseout="rollover(this, '/en/imagesisos/button-arrow.gif');" tabindex="31" />
                </div><!-- /.headertop-left-button -->
                </form> 
            </div><!-- /.headertop-left -->                 
            <div class="clear0"></div>
        </div><!-- /.headertop -->       
        <div class="rightlinks">
            <ul>
                <li class="first"><a href="/en/emergencies.htm" tabindex="5">Emergencies</a></li>
                <li class="last"><a href="/en/contact-us.htm" tabindex="6">Contact us</a></li>
            </ul>
        </div><!-- /.rightlinks -->                       
        <div class="clear0"></div>       
        <div class="headermiddle">           
            <div class="logo"><a href="/en/index.htm" tabindex="7"><img src="https://www.internationalsos.com/en/imagesisos/international-sos.jpg" width="152" height="65" alt="International SOS" /></a></div>           
            <div id="searchbox">
                <form action="/en/search.aspx" method="get">
                    <p>
                        <label for="search" class="hidden">Search</label>
                        <input type="text" name="q" id="search" class="search" value="Search" onfocus="if(this.value=='Search'){this.value=''};" tabindex="8" />
                        <div class="search-wrapper">
                            <div class="menu_rollover">
                                <input type="image" class="hoverThis" src="https://www.internationalsos.com/en/imagesisos/button-search.gif" />
                            </div>
                        </div>
                    </p>
                </form>
            </div>                                
            <div class="clear0"></div>
        </div><!-- /.headermiddle -->      
        <div id="navbar">      
            <div id="topnav">
                <ul id="nav">
                   <li><span><a href="/apex/isos2" tabindex="9">Home</a></span></li>
                    <li><a href="/en/about-us.htm" class="" tabindex="10">Cases</a><ul>
<li class="first"><a href="/customers/500/e?retURL=%2F500%2Fo" tabindex="">Create New Case</a><ul>
<!--<li class="first"><a href="/en/timeline.htm">25-year timeline</a></li>-->
</ul>
</li>
<li class=""><a href="/customers/500?fcf=00B90000007TQH1" tabindex="">My Cases</a><ul>
<!--<li class="first"><a href="/en/Arnaud-Vaissie.htm">Arnaud Vaissié</a></li>
<li class=""><a href="/en/Pascal-Rey-Herme.htm">Dr. Pascal Rey-Herme</a></li>-->
</ul>
</li>
</ul>
</li>
<li><a href="/en/industries.htm" class="" tabindex="11">Industries</a><ul>
<li class="first"><a href="/en/corporations.htm" tabindex="">Corporations</a></li>
<li class=""><a href="/en/energy-mining-and-large-scale-construction.htm" tabindex="">Energy, mining and large-scale construction</a></li>
<li class=""><a href="/en/governments-and-public-sector.htm" tabindex="">Governments and public sector</a></li>
<li class=""><a href="/en/non-governmental-organizations.htm" tabindex="">Non-governmental organizations</a></li>
<li class=""><a href="/en/aviation.htm" tabindex="">Aviation</a></li>
<li class=""><a href="/en/commercial-maritime.htm" tabindex="">Commercial maritime </a></li>
<li class=""><a href="/en/banking-and-credit-cards.htm" tabindex="">Banking and credit card</a></li>
<li class=""><a href="/en/scholastic-and-higher-education.htm" tabindex="">Scholastic and higher education</a></li>
<li class=""><a href="/en/Individual.htm" tabindex="">Individuals, families, expatriates, students and small groups</a></li>
</ul>
</li>
<li><a href="/en/our-services.htm" class="" tabindex="12">Services</a><ul>
<li class="first"><a href="/en/Assistance.htm" tabindex="">Assistance</a><ul>
<li class="first"><a href="/en/Pre-travel-advice.htm">Pre-travel advice</a></li>
<li class=""><a href="/en/assistance-abroad.htm">Assistance abroad</a></li>
<li class=""><a href="/en/emergency-help.htm">Emergency help</a></li>
<li class=""><a href="/en/assistance-app.htm">Assistance App</a></li>
</ul>
</li>
<li class=""><a href="/en/medical-services.htm" tabindex="">Medical services</a><ul>
<li class="first"><a href="/en/medical-staffing.htm">Medical staffing</a></li>
<li class=""><a href="/en/medical-supply-chain-services.htm">Medical supply chain services</a></li>
<li class=""><a href="/en/medical-training.htm">Medical training</a></li>
<li class=""><a href="/en/consulting.htm">Medical consulting</a></li>
<li class=""><a href="/en/occupational-health.htm">Occupational health </a></li>
<li class=""><a href="/en/healthcare-management-services.htm">Healthcare management services</a></li>
<li class=""><a href="/en/integrated-malaria-program.htm">Integrated Malaria programs</a></li>
</ul>
</li>
                </ul>       
            </div><!-- /#topnav -->
                       
            <div class="clear0"></div>
        </div><!-- /#navbar -->
       
    </div><!-- /#header -->
<script type="text/javascript">
document.write(unescape("%3Cscript src='" + document.location.protocol +
  "//munchkin.marketo.net/munchkin.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>Munchkin.init('322-WCU-924');</script>
</div><!-- end #page -->
<!--</body>-->
</apex:form>
<div align="center" >
<chatter:newsfeed />
</div>
<apex:form >
<div align="center">
<apex:outputPanel >
<apex:inputField value="{!mycase.AccountId}" label="Account" /><br/>
<apex:inputField value="{!mycase.ContactId}" label="Contact"/>
<apex:inputField value="{!mycase.status}" label="Status"/>
</apex:outputPanel>
</div>

</apex:form>
</apex:page>
Vinit_KumarVinit_Kumar
This is happening coz of so many html divs in your VF page code.You need to check whichone is causing the issue.
GaneeeshGaneeesh
how can i fild this..?
GaneeeshGaneeesh
even i remove that div tags it show like that..