Anyone try this simple bit of code in an ie8 browswer and try refreshing the page,
in ie8 you will get an error around getelementbyid on refresh.
When i run it it complains of not being able to find control with id of 'ctl00_main_dd'
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server"
ImageControlID="Image2" CollapsedImage="~/App_Themes/IMStandard/icons/uparrow.png"
ExpandedImage="~/App_Themes/IMStandard/icons/downarrow.png"
CollapseControlID="dd" ExpandControlID="dd"
TargetControlID="pnlQuickKeywordSearch"
SuppressPostBack="true">
</cc1:CollapsiblePanelExtender>
<asp:Panel ID="dd" runat="server">
<h3 class="loginHeader">
<asp:Image ID="Image2" runat="server" />
Quick Keyword search <asp:Image ID="HelpIconImage" runat="server"
Width="16px" Height="16px" ImageUrl="~/App_Themes/IMStandard/icons/help.png" /></h3>
</asp:Panel>
<asp:Panel ID="pnlQuickKeywordSearch" Style="float: left; border: double 3px #C9DF86;"
runat="server" >
<div style="clear: both; padding: 5px;">
</div></asp:Panel>
Anybody know why this is happening? is it a bug in ie8 or am i missing something?
By the way, i am using masterpages, but i dont think that has anything to do with it.
Thanks
This example works for me in my IE8 running on Windows 7.
The id 'ctl00_main_dd' is typically the generated clientside ID (VS2010 will enable us to specify client side ID's.)
Can you use a div instead of the asp:panel for your expand/collapse control ?
<div ID="dd">
<h3 class="loginHeader">
<asp:Image ID="Image2" runat="server" />
Quick Keyword search <asp:Image ID="HelpIconImage" runat="server"
Width="16px" Height="16px" ImageUrl="~/App_Themes/IMStandard/icons/help.png" /></h3>
</div>
The collapsible panel extender should then be able to find the static 'dd' client ID.
Added 02.06:
No good guesses to why it happens in IE8 only
I would check =>
1) Correct doctype in masterpage
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
2) Tick the compatibility view button in IE8 if present
3) Ensure all VS, Framework and Toolkit are latest versions (SP1)
We just had a weird scenario where there was a tag inside the collapsed panel with style="float:right;", and removing div tag fixed the issue. Hopefully that helps someone else.
Related
I was wondering why the following code:
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None
AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
produces the combobox with label "Days" to the right off of it in IE9 and FireFox but when I run it using Chrome the "Days" label appears below the combo box?
How do I make it to be drawn to the right off the combo box like the rest of the browsers?
First up the Combo Box is not part of the "Standard" asp.net controls. I'm assuming you are using the asp.net AJAX Toolkit for this. As the Combo box is a compound control it does not render "Clean HTML" eg:
<select id="DropDown1"></select> Days
Instead it renders:
<div id="DropDown1" style="display:inline-block;">
<table id="DropDown1_Table"
class="ajax__combobox_inputcontainer"
cellspacing="0"
cellpadding="0"
border="0"
style="display:inline-block;border-width:0px;border-style:None;border-collapse:collapse;position:relative;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer">
<input name="DropDown1$TextBox"
type="text"
id="DropDown1_TextBox"
autocomplete="off"
style="width:30px;" />
</td>
<td class="ajax__combobox_buttoncontainer">
<button id="DropDown1_Button"
type="button"
style="visibility:hidden;"></button>
</td>
</tr>
</table>
<input type="hidden"
name="DropDown1$HiddenField"
id="DropDown1_HiddenField"
value="-1" />
</div> Days
Which for me in chrome 14 displays with the Days in the same line as the drop down.
The thing to note is the div wrapping up the combo box control. Either the version on chrome you are using is ignoring the display:inline-block; style or you have some CSS somewhere that is somehow overriding this.
Maybe look at using the standard controls and use jQuery and page methods to roll your own combo box, or better still look at FlexBox.
Which version of chrome on which OS is causing the issue?
If you don't need AJAX functionality just use the standard ASP:Dropdown control.
UPDATE:
Using Microsoft's Combo Box Sample page reproduces your issue in Chrome. Looking at the rendered code it is different in IE and Chrome. This leads me to believe I have a different version of the tool kit to yourself and Microsoft (probably older!)
IE uses display:inline-block while chrome renders display:inline which would be causing the display anomaly.
To work around the issue with the version of the toolkit you are using, I would try the following:
<div style="display:inline-block">
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox>
</div>
<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
I guess no one gets the "correct answer" check for this one.
Here's how I was able to "patch it" -- again, good ol' table came to rescue...
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign="bottom" width="1%"><asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True"></asp:ComboBox></td>
<td valign="bottom" width="99%"> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal></td>
</tr>
</table>
On the side note, I don't know guys how you can use that ASP.NET & VS2010. Both are such a headache and I'm so glad that my short stint with it is over!!!
"why do I need to wrap attributes into quotes"
Yes, you do need to pick up a good book on HTML / CSS and study it.
I have an update panel on my aspx page which does not have a style property or attribute which you can use to override the style. I know this is how it is designed so that is not the issue. From looking online most resources have said that simply putting a div around the update panel and setting the style at that level will take care of the issue. However a central div is created by Visual Studio which is stopping me from seeing my content.
ASPX Code
<div style="height:100%;width:100%;overflow:auto;padding-right:16px;" runat="server">
<asp:UpdatePanel runat="server" id="pdfPanel" UpdateMode="Conditional" EnableViewState="true">
<ContentTemplate>
<div id="pdfFrame" runat="server" style="height:100%;width:100%;overflow:auto;padding-right:16px;">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
How HTML is rendered
<div style="height:100%;width:100%;overflow:auto;padding-right:16px;">
<div id="ctl00_body_pdfPanel">
<div id="ctl00_body_pdfFrame" style="height:100%;width:100%;overflow:auto;padding-right:16px;">
<!-- Actual content here -->
</div>
</div>
</div>
The problem is the pdfPanel which is being created has no style and is causing my inner div not to be displayed. When I copy the style using Firebug from either of the other two controls then it becomes visible.
If you are using .NET 4.0 you can set ClientIDMode="Static" and it will give you the ID you set on the updatepanel itself.
I am using HTML control,and want to visible false from the server side with out using attributes runat="Server"
tell me any solution
Runat="Server" has got nothing to do with visibility.
If you want to hide the control (so that its not visible to any visitors to your site) you would simply set its CSS to visibility:hidden; or display: none;. I think this is what you wanted to know.
Wrap your html controls in an asp:placeholder control, and set the visibility on the placeholder.
Example
<asp:placeholder id="plc" runat="server" visible="false">
<h1>Some Content</h1>
<img src="/images/someimage.gif" alt="" />
</asp:placeholder>
ASP.net ajax 2.0
I've got a modalpopup extender that looks like this:
alt text http://img441.imageshack.us/img441/6342/localmodal.jpg
The actual modal popup is wrapped around a rounded corner extender to give it the nice curved look. Here is a simple snippet of code:
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel" OkControlID="btnOk" TargetControlID="ibStartNow" PopupControlID="Panel2" PopupDragHandleControlID="PopupHeader" BackgroundCssClass="ModalPopupBG">
<asp:Panel ID="Panel2" style="display: none" runat="server">
<asp:Panel ID="Panel3" runat="server">
<div class="ConfirmationPopup" style="text-align:center; margin-right:auto;margin-left:auto;">
<div class="PopupHeader" id="PopupHeader">
Confirm Start Now<br />
</div>
<div class="PopupBody">
<br />
This will save the expense report header and allow
<br />
you to enter items into your expense report, are you sure?
<br />
<br />
</div>
<div class="Controls">
<asp:ImageButton ID="btnOk" runat="server" imageurl="~/images/ok.gif" CausesValidation="False" />
<asp:ImageButton ID="btnCancel" runat="server" imageurl="~/images/cancel.gif" />
</div>
</div>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel3" Radius="6" Corners="All" BorderColor="#9BD1FA" Color="#377CB1">
</ajaxToolkit:RoundedCornersExtender>
The strange thing is on my local machine running IE8 it looks great, even on the server using firefox / chrome it looks great. But once it is on the server and I use IE8 it is no longer rounded it is basically a square.
It just doesn't make sense why locally using IE8 it works, but on the actual web server using IE8 it is no longer rounded, it looks like this:
alt text http://img441.imageshack.us/img441/2977/servermodal.jpg
My guess is you have probably moved on with this issue since this was so long ago but I stumbled across this http://www.mindfiresolutions.com/Workaround-for-Modal-Popup-with-RoundedCornerExtender-issue-833.php which seems to work for me. It looks like the trick is, in addition to using two panels, set the back color of the container panel to Transparent
I have the following problem with Opera.
The following asp.net code
<asp:Image runat="server" ID="imgExpand"/>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
ImageControlID="imgExpand"
ExpandedImage="<%$ Image:collapse.png %>"
CollapsedImage="<%$ Image:expand.png %>"
/>
generates the following in FF3, IE6, IE7, IE8:
<img style="border-width: 0px;" src="/style/img/collapse.png" id="ctl00_ContentPlaceHolder1_imgExpand" title="Ausblenden..."/>
however the following in Opera 10:
<img id="ctl00_ContentPlaceHolder1_ucProductList_rptProducts_ctl02_imgExpand" class="expand-img" src="" style="border-width:0px;"/>
As you can see the src="" is empty and thus no image is beeing displayed.
Do you know any solution to this problem?
Thanks alot
Sounds pretty weird. I haven't heard of that particular error, but you could probably work around it the same way you can avoid all the problems associated with ASP.NET's idiotic, broken browser-sniffing: turn it off.
Discovered the same problem. But noticed that official example is working under Opera. After some playing found a reason:
It's necessary to specify image for control (ImageUrl="~/Img/icon-plus.gif")
<asp:ImageButton ID="ib" runat="server" ImageUrl="~/Img/icon-plus.gif" ImageAlign="AbsMiddle" />
And after that put the ID of it into control (ImageControlID="ib"):
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="pD" ExpandControlID="pH" CollapseControlID="pH"
Collapsed="True" TextLabelID="lCategoryName" ImageControlID="ib" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)"
SuppressPostBack="true" ExpandedImage="~/Img/icon-minus.gif" CollapsedImage="~/Img/icon-plus.gif" />