Hi,
I have a WebDialogWindow control that gets cut off when it's rendered inside a WebDialogWindow. I have tried everything I know to get it to render outsdie the Window but I can't! I have set the z-index to 20000, set the overflow css property to visible, changed the WebDialogWindow to Model=False and Model=True. I have discoved that the overflow css property MUST be set to auto for the Auto Extender List to render properly, but I would like to have this list rendered outside the WebDialogWindow. The work around I have is to increase the height of the WebDialogWindow so that the Auto Extender List doesn't get truncated, but it just looks ugly like that.
I have pasted a couple of images showing the issue below. The first one shows the Auto Complete Extender being cut-ff and the 2nd shows what it should look like when it's fully extended.
Does anyone have any advise on this?
This is the CSS for my Auto Extender
.completionList { border:solid 1px; margin:0px; height: 200px; background-color: White; font-size: 12px; overflow:auto; z-index:200000; } .AutoExtender { font-size: 12px; border: solid 1px #006699; background-color: White; line-height: 20px; padding: 0px; margin: 0px; height: 200px; overflow:auto; z-index:200000; } .AutoExtenderList { border-top: dotted 1px #006699; border-bottom: dotted 1px #006699; cursor: pointer; color: Maroon; font-weight:bold; overflow:auto; z-index:200000; } .AutoExtenderHighlight { color: #006699; background-color: White; cursor: pointer; } #divwidth { width: 150px !important; } #divwidth div { width: 150px !important; }
Thanks in Advance for any ideas.
Hi Dave,
The dialog by default uses overflow:auto. Otherwise, children will be rendered outside of dialog. If extender is a child of dialog, then it is cut-off by exactly same way as any other child.
You have 3 options:1. Increase space between target-input and bottom edge of dialog.2. Move extender out of dialog.3. Disable overflow by <ContentPane ScrollBars="Visible">. However, some children can be rendered outside of dialog. It can be used if content of dialog is small and dialog is not resiable (it does have scrollbars)
Viktor,
Thanks for the reply but the last one did not work. If I however change the overflow to visible using IE Developer tools I get the desired result. But how can I override that setting via the code, or in a css file?
ThanksDave
This is what I mean. The highlighted property is set to visible though the IE Dev Tool adn it works, but I can't seem to override it anywhere. Even if I add overflow:visible; to the ig_Control and igdw_Control css classes.
Click on the image to see it properly.
Then this is the result, which is what I want. Thanks for any help on this Viktor.
Hi Viktor,
You are a JavaScript/CSOM guru! This solution worked perfectly, so thanks so much for your valuable time.
I have also discovered another option in mean time. In the Header<style type="text/css">.visibleOverflow { overflow:visible !important;} </style>
Add CssClass to WebDialogWindow <ig:WebDialogWindow ID="WebDialogWindowMap" runat="server" Height="300px"WindowState="Hidden" Width="370px" Modal="True" InitialLocation="Centered"CssClass="visibleOverflow">
WebDialogWidow raises various events on client and exposes various objcts including references to html elements. For example, you may process Initialize event and change attributes of html elements. You also may get references to all other elements using DOM members like parentNode, childNodes, firstChild, etc. Below is example to remove overflow from divs
<script type="text/javascript">function WebDialogWindow_Initialize(sender, eventArgs){ var mainDiv = sender.get_element(); var cp = sender.get_contentPane(); var cpDiv = cp.getBody(); //alert('mainDiv:' + $util.getStyleValue(null, 'overflow', mainDiv) + ' cpDiv:' + $util.getStyleValue(null, 'overflow', cpDiv)); mainDiv.style.overflow = 'visible'; cpDiv.style.overflow = 'visible';}</script><ig:WebDialogWindow ID="WebDialogWindow" runat="server" Width="300px" Height="200px"> <ClientEvents Initialize="WebDialogWindow_Initialize" /> <ContentPane> <Template> <asp:Button ID="Button2" runat="server" Text="Button" /> </Template> </ContentPane></ig:WebDialogWindow>