Apex Code Development You need to sign in to do that
Don't have an account?
ministe_2003 Vertical Scrollbar Not Appearing On Overflowing Table
Hi all,
I'm creating my own custom Lookup popup page and it's gone brilliantly, the only problem I have is that the results are going off the bottom of the page. I've wrapped the table in a div and set overflow to auto but it's still not working unless I set a fixed height to the div which I don't want to do if possible - the standard lookup page doesn't seem to since the results table always stretches to the bottom of the screen and a large results set causes a scroll bar to appear. I want the same functionality. Here's the code and style:
<style>
.dTable{
border: 1px solid #E0E3E5;
line-height:130%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:100%;
overflow:auto;
}
</style>
<div id="results" style="width: 100%; height:100%; overflow:auto; display:block;">
<
<apex:outputLabel id="clearLabel" value="Clear Search Results" onclick="clearResultDiv();"/>
<br />
<apex:outputLabel styleClass="h2" value="Search Results" rendered="{!hasResults}"/>
<apex:outputLabel styleClass="h2" value="All Application Engineers" rendered="{!NOT(hasResults)}"/>
<apex:dataTable id="resultsTable" value="{!searchedAppEngs}" var="u" styleClass="dTable" headerClass="tHeader" columnClasses="tCol">
<apex:column headerValue="Application Engineer (Sorted by surname)" width="100%">
<apex:outputLabel id="nameLabel" value="{!u.Name}" onclick="selectUser('{!u.Id}');"/>
</apex:column>
</apex:dataTable>
</div>
Anyone want to be my CSS hero?! Thanks in advance!
You have to specify a height (that's the point of overflowing; you have to clip). I think you can specify a max-height of 100%, though...
I understand that in theory, but the standard lookup page doesn't appear to work in that way. When you click the lookup icon and the popup displays, the results table always scrolls as far as the bottom of the window, if the results go that far, then there's a scroll bar which allows you to scroll down the table if necessary. It doesn't appear to have a fixed height at all because it always stretches when the window resizes, how can I replicate that style?
Thanks
They use "frame" tags to accomplish this; it works because the bottom frame is a "*" attribute, so it resizes itself dynamically. There's no CSS magic here.
Ah yes I can see that by inspecting with Chrome, not so clear in firebug. Thanks for that. I've at least managed to get the browser window to display the scrollbar when necessary, even that wasn't happening before - so its usable now.
Thanks for clarifying
I am facing a similar issue where in the vertical scroll bar is not visible in IE11 for custom lookup. what did you do for the fix? can you share the code please?