+ Start a Discussion
Jon KeenerJon Keener 

Internet Explorer 6 rendering issue with dataTable and Field Help Hovers

I've been doing most of my development in Firefox, but the end users of this will be in IE. I ran into this during a demo using IE.
 
1. The field help hover is going over the next input field in IE.
2.  To mark columns required, I put the * in the header facet, and made it red.  For some reason, the Font tag isn't working in IE like it does in Firefox
 
 
As a side note, I love it if on an inputField that is a checkbox, we could force the label not to show, as it definitely increases the width of the a data table needlessly.
 
 
 
A snippet of the page code is below:
 
Code:
<apex:dataTable value="{!sampleMaterials}" var="lines" styleClass="list" id="MaterialGrid" rendered="{!IF(ErrorMessage!='','False','True')}">

  <apex:column>
    <apex:facet name="header"><b>Shipping Location <FONT COLOR="#C00" SIZE="4">*</FONT></b></apex:facet>
    <apex:inputField value="{!lines.Shipping_Plant__c}"/>
  </apex:column>

  <apex:column>
    <apex:facet name="header"><b>Material Must Ship from Shipping Location</b></apex:facet>
    <apex:inputField value="{!lines.Material_Must_Ship_from_Shipping_Plant__c}"/>
  </apex:column>

  <apex:column>
    <apex:facet name="header"><b>Estimated Ship Date <FONT COLOR="#C00" SIZE="4">*</FONT></b></apex:facet>
    <apex:inputField value="{!lines.Estimated_Ship_Date__c}"/>
  </apex:column>

</apex:dataTable>


 
Jon Keener
dchasmandchasman
The field hover help looks like a visualforce issue and we'll look into that one (you might try add an &nbsp; after the inputfield). The FONT thing does not look like a VF specific issue - could it be that your color constant is not kosher? You could also try switching to using a style specification instead in an apex:outputText or plain old <span>.
Manu ErwinManu Erwin
Hi Jon,
if you're not bound to using a datatable for style reasons then you could try using a pageBlockList with the 'mode' attribute of the parent pageBlock set to 'edit'. This will automatically set the required display value just as in standard edit pages.

Your example code would then be:

Code:
<apex:pageBlock mode="edit">

 <apex:pageBlockList value="{!sampleMaterials}" var="lines" styleClass="list" id="MaterialGrid" rendered="{!IF(ErrorMessage!='','False','True')}"

  <apex:column>
   <apex:inputField value="{!lines.Shipping_Plant__c}"/>
  </apex:column>

  <apex:column>
   <a pex:inputField value="{!lines.Material_Must_Ship_from_Shipping_Plant__c}"/>
  </apex:column>

  <apex:column>
   <apex:inputField value="{!lines.Estimated_Ship_Date__c}"/>
  </apex:column>

 </apex:pageBlockList

</apex:pageBlock>

 
Sorry I haven't had time to check the syntax in an actual page.

Hope this helps,
manu
aballardaballard

For the font color... if you're going to use RGB constants, use the full 6 digit values.    #c00000 works fine.  My guess is IE and Firefox "extend" the value differently.

 

 
 
aballardaballard
Also note that if you want the checkbox to appear without the label, you could just use <apex:inputCheckBox> instead.
aballardaballard

Note if you make the change suggested above to display the checkbox with no label, the help icon will disappear (and hence so does the overlap problem).

However, if you decide to keep the labelled checkbox,  adding the following inline stylesheet to your page should be a workaround for the overlapping icon problem:

<style>
.detailList .dataCol .helpOrb {
    position: relative;
    top: 0;
    right: 0px;
}
</style>

GoForceGoGoForceGo
In the example above, what is the controller being used to save the values entered in the table fields?

I assume rawMaterials is a related list within a higher level parent object.

I am trying to create a grid for all the contacts (for an account0 so that contact info can be quickly edited.
However, the standard controller account does not save the changes in contact.

http://community.salesforce.com/sforce/board/message?board.id=Visualforce&message.id=642